/**
 * Nexus One – Premium WHMCS Theme
 * Full dark/light mode design token system
 * Compatible with WHMCS 8.x | PHP 8.x
 */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');

/* ===========================================
   DESIGN TOKENS – LIGHT (default)
   =========================================== */
:root {
  --nx-primary: #135bec;
  --nx-primary-hover: #1050d0;
  --nx-primary-muted: rgba(19, 91, 236, 0.1);
  --nx-bg: #ffffff;
  --nx-bg-page: #f8fafc;
  --nx-surface: #ffffff;
  --nx-surface-alt: #f8fafc;
  --nx-card: #ffffff;
  --nx-text: #0f172a;
  --nx-text-secondary: #334155;
  --nx-muted: #64748b;
  --nx-border: #e2e8f0;
  --nx-border-light: #f1f5f9;
  --nx-success: #10b981;
  --nx-success-bg: #ecfdf5;
  --nx-success-text: #065f46;
  --nx-warning: #f59e0b;
  --nx-warning-bg: #fffbeb;
  --nx-warning-text: #92400e;
  --nx-danger: #ef4444;
  --nx-danger-bg: #fef2f2;
  --nx-danger-text: #991b1b;
  --nx-info: #3b82f6;
  --nx-info-bg: #eff6ff;
  --nx-info-text: #1e40af;
  --nx-radius: 6px;
  --nx-radius-lg: 8px;
  --nx-radius-xl: 12px;
  --nx-radius-2xl: 16px;
  --nx-radius-full: 9999px;
  --nx-shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --nx-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
  --nx-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05);
  --nx-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.08);
  --nx-shadow-primary: 0 4px 14px -3px rgba(19,91,236,0.25);
  --nx-font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --nx-transition: 0.2s ease;
  --nx-transition-fast: 0.15s ease;
  --nx-nav-bg: rgba(255,255,255,0.8);
  --nx-nav-border: var(--nx-border);
  --nx-hero-gradient: radial-gradient(circle at top right, rgba(19,91,236,0.08), transparent 50%),
                      radial-gradient(circle at bottom left, rgba(19,91,236,0.03), transparent 50%);
  --nx-sidebar-width: 288px;
  --nx-sidebar-bg: #ffffff;
}

/* ===========================================
   DESIGN TOKENS – DARK
   =========================================== */
[data-theme="dark"] {
  --nx-primary: #135bec;
  --nx-primary-hover: #2563eb;
  --nx-primary-muted: rgba(19, 91, 236, 0.15);
  --nx-bg: #0a0f1d;
  --nx-bg-page: #0a0f1d;
  --nx-surface: #0d1425;
  --nx-surface-alt: #101622;
  --nx-card: #161e2e;
  --nx-text: #f1f5f9;
  --nx-text-secondary: #cbd5e1;
  --nx-muted: #64748b;
  --nx-border: #1e293b;
  --nx-border-light: #1e293b;
  --nx-success: #34d399;
  --nx-success-bg: rgba(16,185,129,0.1);
  --nx-success-text: #34d399;
  --nx-warning: #fbbf24;
  --nx-warning-bg: rgba(245,158,11,0.1);
  --nx-warning-text: #fbbf24;
  --nx-danger: #f87171;
  --nx-danger-bg: rgba(239,68,68,0.1);
  --nx-danger-text: #f87171;
  --nx-info: #60a5fa;
  --nx-info-bg: rgba(59,130,246,0.1);
  --nx-info-text: #60a5fa;
  --nx-shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.2);
  --nx-shadow: 0 1px 3px 0 rgba(0,0,0,0.3), 0 1px 2px -1px rgba(0,0,0,0.2);
  --nx-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.2), 0 2px 4px -2px rgba(0,0,0,0.15);
  --nx-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.3), 0 4px 6px -4px rgba(0,0,0,0.2);
  --nx-shadow-primary: 0 4px 14px -3px rgba(19,91,236,0.3);
  --nx-nav-bg: rgba(10,15,29,0.8);
  --nx-nav-border: #1e293b;
  --nx-hero-gradient: radial-gradient(circle at top right, rgba(19,91,236,0.15), transparent 50%),
                      radial-gradient(circle at bottom left, rgba(19,91,236,0.05), transparent 50%);
  --nx-sidebar-bg: #0f172a;
}

/* ===========================================
   BASE / RESET
   =========================================== */
body,
body.primary-bg-color,
html body,
html body.primary-bg-color {
  font-family: var(--nx-font) !important;
  color: var(--nx-text) !important;
  background: var(--nx-bg-page) !important;
  background-color: var(--nx-bg-page) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.3s ease, color 0.3s ease;
}
*:not(body).primary-bg-color:not(.btn-primary):not(.btn) {
  background: transparent !important;
  background-color: transparent !important;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  color: var(--nx-text);
  letter-spacing: -0.025em;
}

a {
  color: var(--nx-primary);
  transition: color var(--nx-transition-fast);
  text-decoration: none;
}
a:hover { color: var(--nx-primary-hover); }

::selection {
  background: var(--nx-primary-muted);
}

/* ===========================================
   PUBLIC NAVIGATION – Single-Row Stitch Design
   =========================================== */
.nx-pub-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nx-nav-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--nx-nav-border);
}
[data-theme="dark"] .nx-pub-nav {
  background: rgba(10,15,29,0.80);
  border-bottom-color: #1e293b;
}
.nx-pub-nav-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 5rem;
  gap: 2rem;
}
@media (min-width: 640px) {
  .nx-pub-nav-inner { padding: 0 1.5rem; }
}
@media (min-width: 1024px) {
  .nx-pub-nav-inner { padding: 0 2rem; }
}

.nx-pub-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none !important;
  flex-shrink: 0;
}
.nx-pub-brand-icon {
  width: 2.5rem;
  height: 2.5rem;
  background: var(--nx-primary);
  border-radius: var(--nx-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 12px -2px rgba(19,91,236,0.25);
}
.nx-pub-brand-icon .material-symbols-outlined { font-size: 1.25rem; }
.nx-pub-brand-text {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--nx-text);
}
[data-theme="dark"] .nx-pub-brand-text { color: #fff; }

.nx-pub-links {
  display: none;
  align-items: center;
  gap: 2rem;
}
@media (min-width: 768px) {
  .nx-pub-links { display: flex; }
}
.nx-pub-links a {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--nx-text-secondary);
  text-decoration: none;
  transition: color 0.15s ease;
}
[data-theme="dark"] .nx-pub-links a {
  color: #cbd5e1;
}
.nx-pub-links a:hover {
  color: var(--nx-primary);
  text-decoration: none;
}
.nx-pub-links.nx-mobile-open {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 5rem;
  left: 0;
  right: 0;
  background: var(--nx-card);
  border-bottom: 1px solid var(--nx-border);
  padding: 1rem 1.5rem;
  gap: 0.75rem;
  z-index: 49;
  box-shadow: var(--nx-shadow-lg);
}
[data-theme="dark"] .nx-pub-links.nx-mobile-open {
  background: #0d1425;
}

.nx-pub-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}
.nx-pub-support-link {
  display: none;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--nx-text-secondary) !important;
  text-decoration: none !important;
  transition: color 0.15s ease;
}
[data-theme="dark"] .nx-pub-support-link {
  color: #cbd5e1 !important;
}
.nx-pub-support-link:hover {
  color: #fff !important;
}
@media (min-width: 640px) {
  .nx-pub-support-link { display: block; }
}
.nx-pub-hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--nx-muted);
  cursor: pointer;
  padding: 0.5rem;
}
@media (min-width: 768px) {
  .nx-pub-hamburger { display: none; }
}

/* Nav login button — Stitch primary pill */
.nx-nav-login-btn {
  display: inline-block;
  padding: 0.625rem 1.5rem;
  background: var(--nx-primary) !important;
  color: #fff !important;
  font-family: var(--nx-font) !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  border-radius: var(--nx-radius-lg) !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  box-shadow: var(--nx-shadow-primary) !important;
  border: none !important;
  line-height: 1.4 !important;
  white-space: nowrap;
}
.nx-nav-login-btn:hover {
  background: var(--nx-primary-hover) !important;
  color: #fff !important;
  text-decoration: none !important;
  transform: translateY(-1px);
}

/* Legacy WHMCS nav — hide when public Stitch nav is active */
.header .navbar,
.header .navbar-light,
.header .main-navbar-wrapper {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.topbar {
  background: var(--nx-surface) !important;
  border-bottom: 1px solid var(--nx-border) !important;
}
.topbar .btn, .topbar span, .topbar a {
  color: var(--nx-muted) !important;
}

/* ===========================================
   DARK/LIGHT TOGGLE
   =========================================== */
.nx-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--nx-radius-lg);
  border: 1px solid transparent;
  background: transparent;
  color: var(--nx-muted);
  cursor: pointer;
  transition: all var(--nx-transition-fast);
}
.nx-theme-toggle:hover {
  background: var(--nx-surface-alt);
  border-color: var(--nx-border);
  color: var(--nx-text);
}

/* ===========================================
   HERO SECTION
   =========================================== */
.nx-hero {
  position: relative;
  padding: 5rem 0 8rem;
  overflow: hidden;
  background: var(--nx-hero-gradient);
  text-align: center;
}
.nx-hero h1 {
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .nx-hero h1 { font-size: clamp(3.5rem, 7vw, 5.5rem); }
}
.nx-hero h1 .nx-accent { color: var(--nx-primary); }
.nx-hero p {
  font-size: 1.25rem;
  color: var(--nx-muted);
  max-width: 42rem;
  margin: 0 auto 3rem;
  line-height: 1.7;
}

/* Domain Search Box */
.nx-domain-search {
  max-width: 48rem;
  margin: 0 auto;
  background: var(--nx-card);
  padding: 0.5rem;
  border-radius: var(--nx-radius-2xl);
  border: 1px solid var(--nx-border);
  box-shadow: var(--nx-shadow-lg);
}
.nx-domain-search .nx-search-inner {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
@media (min-width: 768px) {
  .nx-domain-search .nx-search-inner { flex-direction: row; }
}
.nx-domain-search .nx-search-field {
  flex: 1;
  position: relative;
}
.nx-domain-search .nx-search-field .nx-search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--nx-muted);
}
.nx-domain-search .nx-search-field input {
  width: 100%;
  background: var(--nx-surface-alt);
  border: 1px solid transparent;
  border-radius: var(--nx-radius-xl);
  padding: 1rem 1rem 1rem 3rem;
  font-size: 1rem;
  color: var(--nx-text);
  transition: all var(--nx-transition);
}
.nx-domain-search .nx-search-field input::placeholder {
  color: var(--nx-muted);
}
.nx-domain-search .nx-search-field input:focus {
  outline: none;
  border-color: var(--nx-primary);
  box-shadow: 0 0 0 3px var(--nx-primary-muted);
}
.nx-domain-search .nx-search-btn {
  padding: 1rem 2.5rem;
  background: var(--nx-primary);
  color: #fff;
  border: none;
  border-radius: var(--nx-radius-xl);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all var(--nx-transition-fast);
  box-shadow: var(--nx-shadow-primary);
  white-space: nowrap;
}
.nx-domain-search .nx-search-btn:hover {
  background: var(--nx-primary-hover);
  transform: translateY(-1px);
}
.nx-domain-search .nx-search-btn:active {
  transform: scale(0.98);
}
.nx-domain-tlds {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1rem;
  padding-bottom: 0.5rem;
}
.nx-domain-tlds span {
  font-size: 0.75rem;
  color: var(--nx-muted);
  font-weight: 500;
}

/* Homepage domain result - simple Available/Not Available */
@keyframes nx-spin {
  to { transform: rotate(360deg); }
}
.nx-domain-result-simple .nx-domain-loading-icon {
  animation: nx-spin 1s linear infinite;
}
.nx-domain-result-simple .nx-domain-cta:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
.nx-domain-tlds span strong {
  color: var(--nx-text);
  font-weight: 700;
}

/* ===========================================
   PRICING CARDS
   =========================================== */
.nx-pricing-section {
  padding: 6rem 0;
  background: var(--nx-bg-page);
}
[data-theme="dark"] .nx-pricing-section {
  background: var(--nx-bg);
}
.nx-section-header {
  text-align: center;
  margin-bottom: 4rem;
}
.nx-section-header h2 {
  font-size: 1.875rem;
  font-weight: 800;
  margin-bottom: 1rem;
}
.nx-section-header p {
  color: var(--nx-muted);
  font-size: 1rem;
}

.nx-pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 768px) {
  .nx-pricing-grid { grid-template-columns: repeat(3, 1fr); }
}

.nx-pricing-card {
  background: var(--nx-card);
  padding: 2rem;
  border-radius: var(--nx-radius-2xl);
  border: 1px solid var(--nx-border);
  transition: all var(--nx-transition);
  position: relative;
}
@media (min-width: 768px) {
  .nx-pricing-card { padding: 2.5rem; }
}
.nx-pricing-card:hover {
  border-color: rgba(19,91,236,0.5);
  box-shadow: var(--nx-shadow-lg);
}
[data-theme="dark"] .nx-pricing-card:hover {
  border-color: rgba(19,91,236,0.5);
}
.nx-pricing-card.nx-popular {
  border: 2px solid var(--nx-primary);
  box-shadow: var(--nx-shadow-lg);
}
[data-theme="dark"] .nx-pricing-card.nx-popular {
  box-shadow: 0 20px 40px -10px rgba(19,91,236,0.12);
}
.nx-pricing-badge {
  position: absolute;
  top: -1rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--nx-primary);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: 0.25rem 1rem;
  border-radius: var(--nx-radius-full);
  white-space: nowrap;
}
.nx-pricing-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.nx-pricing-card .nx-price {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 2rem;
}
.nx-pricing-card .nx-price span {
  font-size: 1rem;
  font-weight: 500;
  color: var(--nx-muted);
}
.nx-pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}
.nx-pricing-features li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  font-size: 0.875rem;
  color: var(--nx-text-secondary);
}
[data-theme="dark"] .nx-pricing-features li {
  color: #cbd5e1;
}
.nx-pricing-features li .material-symbols-outlined {
  font-size: 1.125rem;
  color: var(--nx-success);
}
[data-theme="dark"] .nx-pricing-features li .material-symbols-outlined {
  color: #22c55e;
}
.nx-popular .nx-pricing-features li .material-symbols-outlined {
  color: var(--nx-primary);
}
.nx-pricing-cta {
  display: block;
  width: 100%;
  padding: 0.75rem;
  border-radius: var(--nx-radius-xl);
  font-size: 0.875rem;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: all var(--nx-transition-fast);
  border: 1px solid var(--nx-border);
  background: transparent;
  color: var(--nx-text-secondary);
  text-decoration: none;
}
.nx-pricing-cta:hover {
  background: var(--nx-surface-alt);
  color: var(--nx-text);
  text-decoration: none;
}
[data-theme="dark"] .nx-pricing-cta {
  border-color: #334155;
}
[data-theme="dark"] .nx-pricing-cta:hover {
  background: #1e293b;
  color: #fff;
}
.nx-popular .nx-pricing-cta {
  background: var(--nx-primary);
  color: #fff;
  border-color: var(--nx-primary);
  box-shadow: var(--nx-shadow-primary);
}
.nx-popular .nx-pricing-cta:hover {
  background: var(--nx-primary-hover);
  transform: translateY(-1px);
}

/* ===========================================
   TESTIMONIALS MARQUEE
   =========================================== */
.nx-testimonials-section {
  padding: 6rem 0;
  background: var(--nx-bg-page);
  overflow: hidden;
}
.nx-marquee {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}
.nx-marquee-track {
  display: flex;
  gap: 1.5rem;
  animation: nx-marquee-scroll 45s linear infinite;
  width: max-content;
}
.nx-marquee-track:hover {
  animation-play-state: paused;
}
@keyframes nx-marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.nx-testimonial-card {
  flex-shrink: 0;
  width: 340px;
  background: var(--nx-card);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-2xl);
  padding: 1.5rem;
  box-shadow: var(--nx-shadow-md);
  transition: box-shadow var(--nx-transition);
}
.nx-testimonial-card:hover {
  box-shadow: var(--nx-shadow-lg);
}
.nx-testimonial-stars {
  display: flex;
  gap: 0.125rem;
  margin-bottom: 0.75rem;
}
.nx-testimonial-stars .material-symbols-outlined {
  font-size: 1rem;
  color: #f59e0b;
  font-variation-settings: 'FILL' 1;
}
.nx-testimonial-stars .material-symbols-outlined.nx-star-empty {
  color: var(--nx-border);
  font-variation-settings: 'FILL' 0;
}
.nx-testimonial-text {
  font-size: 0.875rem;
  color: var(--nx-text-secondary);
  line-height: 1.6;
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nx-testimonial-author {
  font-weight: 800;
  font-size: 0.875rem;
  color: var(--nx-text);
}
.nx-testimonial-role {
  font-size: 0.75rem;
  color: var(--nx-muted);
}

/* ===========================================
   FEATURES / SECURITY SECTION
   =========================================== */
.nx-features-section {
  padding: 6rem 0;
  background: var(--nx-surface-alt);
  border-top: 1px solid var(--nx-border);
  border-bottom: 1px solid var(--nx-border);
}
[data-theme="dark"] .nx-features-section {
  background: #0d1425;
}
.nx-features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: center;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 1024px) {
  .nx-features-grid { grid-template-columns: 1fr 1fr; }
}
.nx-features-content h2 {
  font-size: 2.25rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}
.nx-features-content p {
  font-size: 1.125rem;
  color: var(--nx-muted);
  margin-bottom: 2rem;
  line-height: 1.7;
}
.nx-mini-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.nx-mini-feature {
  padding: 1rem;
  background: var(--nx-card);
  border-radius: var(--nx-radius-xl);
  border: 1px solid var(--nx-border);
  transition: all var(--nx-transition);
}
[data-theme="dark"] .nx-mini-feature {
  background: #0f172a;
  border-color: #1e293b;
}
.nx-mini-feature:hover {
  transform: translateY(-2px);
  box-shadow: var(--nx-shadow);
}
.nx-mini-feature .material-symbols-outlined {
  color: var(--nx-primary);
  margin-bottom: 0.5rem;
}
.nx-mini-feature h4 {
  font-weight: 700;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}
.nx-mini-feature p {
  font-size: 0.75rem;
  color: var(--nx-muted);
  margin: 0;
  line-height: 1.5;
}

.nx-integration-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) {
  .nx-integration-cards { grid-template-columns: 1fr 1fr; }
}
.nx-integration-card {
  background: var(--nx-card);
  padding: 1.5rem;
  border-radius: var(--nx-radius-2xl);
  border: 1px solid var(--nx-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: var(--nx-shadow-sm);
  transition: all var(--nx-transition);
}
.nx-integration-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--nx-shadow-md);
}
.nx-integration-icon {
  width: 4rem;
  height: 4rem;
  border-radius: var(--nx-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.nx-integration-icon.nx-blue { background: var(--nx-info-bg); }
.nx-integration-icon.nx-blue .material-symbols-outlined { color: var(--nx-info); }
.nx-integration-icon.nx-red { background: var(--nx-danger-bg); }
.nx-integration-icon.nx-red .material-symbols-outlined { color: var(--nx-danger); }
.nx-integration-card h3 {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
.nx-integration-card p {
  font-size: 0.875rem;
  color: var(--nx-muted);
  margin: 0;
}

/* ===========================================
   FOOTER
   =========================================== */
.nx-footer {
  background: var(--nx-bg);
  padding: 5rem 0 2.5rem;
  border-top: 1px solid var(--nx-border);
}
[data-theme="dark"] .nx-footer { background: var(--nx-bg); }

.nx-footer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1rem;
  margin-bottom: 4rem;
}
@media (min-width: 768px) {
  .nx-footer-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
  .nx-footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; }
}
.nx-footer-brand {
  grid-column: span 2;
}
@media (min-width: 1024px) {
  .nx-footer-brand { grid-column: span 1; }
}
.nx-footer-brand p {
  font-size: 0.875rem;
  color: var(--nx-muted);
  max-width: 20rem;
  line-height: 1.6;
  margin-top: 1.5rem;
}
.nx-footer-col h4 {
  font-weight: 700;
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}
.nx-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nx-footer-col ul li {
  margin-bottom: 1rem;
}
.nx-footer-col ul li a {
  font-size: 0.875rem;
  color: var(--nx-muted);
  transition: color var(--nx-transition-fast);
}
.nx-footer-col ul li a:hover {
  color: var(--nx-primary);
}
.nx-footer-bottom {
  max-width: 72rem;
  margin: 0 auto;
  padding: 2rem 1rem 0;
  border-top: 1px solid var(--nx-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
@media (min-width: 768px) {
  .nx-footer-bottom { flex-direction: row; justify-content: space-between; }
}
.nx-footer-bottom p {
  font-size: 0.875rem;
  color: var(--nx-muted);
  margin: 0;
}
.nx-footer-social {
  display: flex;
  gap: 1.5rem;
}
.nx-footer-social a {
  color: var(--nx-muted);
  transition: color var(--nx-transition-fast);
}
.nx-footer-social a:hover {
  color: var(--nx-text);
}

/* ===========================================
   BUTTONS
   =========================================== */
.btn-primary {
  background: var(--nx-primary) !important;
  border: none !important;
  border-radius: var(--nx-radius-lg) !important;
  color: #fff !important;
  font-weight: 700 !important;
  transition: all var(--nx-transition-fast) !important;
  box-shadow: var(--nx-shadow-primary) !important;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--nx-primary-hover) !important;
  transform: translateY(-1px);
  box-shadow: var(--nx-shadow-lg) !important;
}
.btn-primary:active { transform: scale(0.98); }

.btn-default, .btn-secondary {
  background: var(--nx-card) !important;
  border: 1px solid var(--nx-border) !important;
  border-radius: var(--nx-radius-lg) !important;
  color: var(--nx-text-secondary) !important;
  font-weight: 600 !important;
  transition: all var(--nx-transition-fast) !important;
  box-shadow: var(--nx-shadow-sm) !important;
}
.btn-default:hover, .btn-secondary:hover {
  background: var(--nx-surface-alt) !important;
  border-color: var(--nx-border) !important;
}

.btn-danger {
  background: var(--nx-danger) !important;
  border: none !important;
  color: #fff !important;
  border-radius: var(--nx-radius-lg) !important;
}
.btn-success {
  background: var(--nx-success) !important;
  border: none !important;
  color: #fff !important;
  border-radius: var(--nx-radius-lg) !important;
}

.btn {
  transition: all var(--nx-transition-fast);
}
.btn:active { transform: scale(0.98); }

/* ===========================================
   CARDS / PANELS
   =========================================== */
.panel, .card, .panel-default {
  border-radius: var(--nx-radius-2xl) !important;
  border: 1px solid var(--nx-border) !important;
  box-shadow: var(--nx-shadow-md) !important;
  background: var(--nx-card) !important;
  transition: all var(--nx-transition);
  overflow: hidden;
}
.panel:hover, .card:hover {
  box-shadow: var(--nx-shadow-lg) !important;
}
.panel-heading, .card-header {
  background: var(--nx-surface-alt) !important;
  color: var(--nx-text) !important;
  border-bottom: 1px solid var(--nx-border) !important;
  border-radius: 0 !important;
  padding: 1.25rem 1.5rem !important;
  font-weight: 700 !important;
}
.panel-body, .card-body {
  padding: 1.5rem !important;
}

/* ===========================================
   FORMS
   =========================================== */
.form-control {
  border-radius: var(--nx-radius-lg) !important;
  border: 1px solid var(--nx-border) !important;
  background: var(--nx-surface-alt) !important;
  color: var(--nx-text) !important;
  padding: 0.625rem 0.875rem !important;
  font-size: 0.875rem !important;
  transition: all var(--nx-transition) !important;
}
.form-control:focus {
  border-color: var(--nx-primary) !important;
  box-shadow: 0 0 0 3px var(--nx-primary-muted) !important;
  background: var(--nx-card) !important;
}
.form-control::placeholder {
  color: var(--nx-muted) !important;
}
select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  padding-right: 2rem !important;
}
label {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--nx-text-secondary);
  margin-bottom: 0.375rem;
}

/* ===========================================
   TABLES
   =========================================== */
.table {
  border-radius: var(--nx-radius-lg);
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
}
.table > thead > tr > th {
  background: var(--nx-surface-alt) !important;
  color: var(--nx-muted) !important;
  font-weight: 800 !important;
  font-size: 0.625rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  border-bottom: 1px solid var(--nx-border) !important;
  padding: 1rem 1.5rem !important;
  border-top: none !important;
}
.table > tbody > tr > td {
  padding: 1rem 1.5rem !important;
  border-top: 1px solid var(--nx-border-light) !important;
  color: var(--nx-text-secondary) !important;
  font-size: 0.875rem !important;
  vertical-align: middle !important;
}
.table > tbody > tr {
  transition: background-color 0.15s ease;
}
.table > tbody > tr:hover {
  background: var(--nx-surface-alt) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) {
  background: transparent !important;
}

/* ===========================================
   ALERTS
   =========================================== */
.alert {
  border-radius: var(--nx-radius-lg) !important;
  border-width: 1px !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}
.alert-success {
  background: var(--nx-success-bg) !important;
  border-color: var(--nx-success) !important;
  color: var(--nx-success-text) !important;
}
.alert-warning {
  background: var(--nx-warning-bg) !important;
  border-color: var(--nx-warning) !important;
  color: var(--nx-warning-text) !important;
}
.alert-danger {
  background: var(--nx-danger-bg) !important;
  border-color: var(--nx-danger) !important;
  color: var(--nx-danger-text) !important;
}
.alert-info {
  background: var(--nx-info-bg) !important;
  border-color: var(--nx-info) !important;
  color: var(--nx-info-text) !important;
}

/* ===========================================
   BREADCRUMBS
   =========================================== */
.master-breadcrumb {
  background: transparent !important;
  border: none !important;
}
.breadcrumb {
  background: transparent !important;
  padding: 0.75rem 0 !important;
  margin: 0 !important;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.breadcrumb > li + li::before {
  color: var(--nx-muted) !important;
}
.breadcrumb > li > a { color: var(--nx-muted); }
.breadcrumb > .active { color: var(--nx-text-secondary); }

/* ===========================================
   PAGINATION
   =========================================== */
.pagination > li > a,
.pagination > li > span {
  border: 1px solid var(--nx-border) !important;
  background: var(--nx-card) !important;
  color: var(--nx-text-secondary) !important;
  border-radius: var(--nx-radius) !important;
  margin: 0 0.125rem;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.375rem 0.75rem !important;
  transition: all var(--nx-transition-fast);
}
.pagination > li > a:hover {
  background: var(--nx-surface-alt) !important;
}
.pagination > .active > a,
.pagination > .active > span {
  background: var(--nx-primary) !important;
  border-color: var(--nx-primary) !important;
  color: #fff !important;
}

/* ===========================================
   SIDEBAR (WHMCS Twenty-One)
   =========================================== */
.sidebar .list-group {
  border-radius: var(--nx-radius-xl) !important;
  overflow: hidden;
}
.sidebar .list-group-item {
  background: var(--nx-card) !important;
  border-color: var(--nx-border) !important;
  color: var(--nx-text-secondary) !important;
  transition: all var(--nx-transition-fast);
}
.sidebar .list-group-item:hover {
  background: var(--nx-surface-alt) !important;
  color: var(--nx-primary) !important;
}
.sidebar .list-group-item.active {
  background: var(--nx-primary-muted) !important;
  color: var(--nx-primary) !important;
  border-color: var(--nx-border) !important;
  font-weight: 600;
}

/* ===========================================
   CLIENT AREA – APP SHELL (Logged In)
   =========================================== */
.nx-client-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
}
.nx-sidebar {
  width: var(--nx-sidebar-width);
  flex-shrink: 0;
  background: var(--nx-sidebar-bg);
  border-right: 1px solid var(--nx-border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.nx-sidebar-brand {
  padding: 2rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.nx-sidebar-logo {
  width: 2.5rem;
  height: 2.5rem;
  background: var(--nx-primary);
  border-radius: var(--nx-radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: var(--nx-shadow-primary);
}
.nx-sidebar-name {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.nx-sidebar-label {
  padding: 0 1rem;
  margin-bottom: 0.5rem;
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--nx-muted);
}
.nx-sidebar-nav {
  flex: 1;
  padding: 0 1rem;
  list-style: none;
  margin: 0;
}
.nx-sidebar-nav li { margin-bottom: 0.25rem; }
.nx-sidebar-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  border-radius: var(--nx-radius-lg);
  color: var(--nx-muted);
  font-weight: 500;
  font-size: 0.875rem;
  transition: all 0.2s ease;
  text-decoration: none;
}
.nx-sidebar-item:hover {
  background: var(--nx-surface-alt);
  color: var(--nx-text);
  text-decoration: none;
}
.nx-sidebar-item.active {
  background: var(--nx-primary-muted);
  color: var(--nx-primary);
  font-weight: 700;
}
.nx-sidebar-item .material-symbols-outlined {
  font-size: 1.25rem;
}
.nx-sidebar-footer {
  padding: 1.5rem;
  border-top: 1px solid var(--nx-border);
}
.nx-plan-card {
  background: var(--nx-surface-alt);
  border: 1px solid var(--nx-border-light);
  border-radius: var(--nx-radius-2xl);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
.nx-plan-label {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--nx-muted);
  margin-bottom: 0.5rem;
}
.nx-plan-name {
  font-size: 0.875rem;
  font-weight: 800;
  margin-bottom: 0.75rem;
}
.nx-plan-cta {
  display: block;
  width: 100%;
  padding: 0.625rem;
  background: var(--nx-primary);
  color: #fff;
  border: none;
  border-radius: var(--nx-radius-lg);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: all var(--nx-transition-fast);
}
.nx-plan-cta:hover { background: var(--nx-primary-hover); color: #fff; text-decoration: none; }

.nx-user-block {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
}
.nx-user-avatar {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--nx-radius-full);
  background: var(--nx-surface-alt);
  border: 2px solid var(--nx-card);
  box-shadow: 0 0 0 1px var(--nx-border);
  overflow: hidden;
  flex-shrink: 0;
}
.nx-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nx-user-info { flex: 1; min-width: 0; }
.nx-user-name { font-size: 0.875rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-user-role { font-size: 0.6875rem; font-weight: 600; color: var(--nx-muted); }
.nx-user-logout {
  color: var(--nx-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  transition: color var(--nx-transition-fast);
}
.nx-user-logout:hover { color: var(--nx-danger); }

/* Client shell main area */
.nx-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--nx-bg-page);
}
.nx-topbar {
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2.5rem;
  background: var(--nx-card);
  border-bottom: 1px solid var(--nx-border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.nx-topbar-search {
  flex: 1;
  max-width: 40rem;
  position: relative;
}
.nx-topbar-search .material-symbols-outlined {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--nx-muted);
  font-size: 1.25rem;
}
.nx-topbar-search input {
  width: 100%;
  background: var(--nx-surface-alt);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-xl);
  padding: 0.625rem 1rem 0.625rem 2.75rem;
  font-size: 0.875rem;
  color: var(--nx-text);
  transition: all var(--nx-transition);
}
.nx-topbar-search input:focus {
  outline: none;
  border-color: var(--nx-primary);
  box-shadow: 0 0 0 3px var(--nx-primary-muted);
}
.nx-topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.nx-icon-btn {
  position: relative;
  padding: 0.625rem;
  border-radius: var(--nx-radius-xl);
  border: 1px solid transparent;
  background: transparent;
  color: var(--nx-muted);
  cursor: pointer;
  transition: all var(--nx-transition-fast);
}
.nx-icon-btn:hover {
  background: var(--nx-surface-alt);
  border-color: var(--nx-border);
  color: var(--nx-text);
}
.nx-icon-btn .nx-badge-dot {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--nx-danger);
  border-radius: var(--nx-radius-full);
  border: 2px solid var(--nx-card);
}
.nx-topbar-divider {
  width: 1px;
  height: 2rem;
  background: var(--nx-border);
  margin: 0 0.5rem;
}

.nx-content { padding: 2.5rem; max-width: 80rem; margin: 0 auto; width: 100%; }

/* ===========================================
   STATS CARDS (Client Dashboard)
   =========================================== */
.nx-stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px) {
  .nx-stats-grid { grid-template-columns: repeat(3, 1fr); }
}
.nx-stat-card {
  background: var(--nx-card);
  padding: 1.75rem;
  border-radius: var(--nx-radius-2xl);
  border: 1px solid var(--nx-border);
  box-shadow: var(--nx-shadow-md);
  transition: all var(--nx-transition);
}
.nx-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--nx-shadow-lg);
}
.nx-stat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.nx-stat-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--nx-radius-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
}
.nx-stat-icon .material-symbols-outlined { font-size: 1.75rem; }
.nx-stat-icon.nx-green { background: #ecfdf5; color: #059669; }
.nx-stat-icon.nx-orange { background: #fff7ed; color: #ea580c; }
.nx-stat-icon.nx-blue { background: #eff6ff; color: #2563eb; }
[data-theme="dark"] .nx-stat-icon.nx-green { background: rgba(16,185,129,0.12); color: #34d399; }
[data-theme="dark"] .nx-stat-icon.nx-orange { background: rgba(234,88,12,0.12); color: #fb923c; }
[data-theme="dark"] .nx-stat-icon.nx-blue { background: rgba(37,99,235,0.12); color: #60a5fa; }

.nx-stat-badge {
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.75rem;
  border-radius: var(--nx-radius-full);
}
.nx-stat-badge.nx-green { background: #ecfdf5; color: #047857; }
.nx-stat-badge.nx-orange { background: #fff7ed; color: #c2410c; }
.nx-stat-badge.nx-blue { background: #eff6ff; color: #1d4ed8; }
[data-theme="dark"] .nx-stat-badge.nx-green { background: rgba(16,185,129,0.15); color: #34d399; }
[data-theme="dark"] .nx-stat-badge.nx-orange { background: rgba(234,88,12,0.15); color: #fb923c; }
[data-theme="dark"] .nx-stat-badge.nx-blue { background: rgba(37,99,235,0.15); color: #60a5fa; }

.nx-stat-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--nx-muted);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.nx-stat-value {
  font-size: 2.5rem;
  font-weight: 800;
  margin-top: 0.25rem;
}
.nx-stat-footer {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--nx-border-light);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--nx-muted);
}
.nx-stat-footer .material-symbols-outlined { font-size: 0.875rem; }

/* ===========================================
   ACTIVITY CARDS
   =========================================== */
.nx-activity-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 1024px) {
  .nx-activity-grid { grid-template-columns: 1fr 1fr; }
}
.nx-activity-card {
  background: var(--nx-card);
  border-radius: var(--nx-radius-2xl);
  border: 1px solid var(--nx-border);
  box-shadow: var(--nx-shadow-md);
  overflow: hidden;
}
.nx-activity-header {
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--nx-border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--nx-surface-alt);
}
.nx-activity-header h2 { font-size: 1.125rem; font-weight: 800; margin: 0; }
.nx-activity-header a {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--nx-primary);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.nx-activity-header a .material-symbols-outlined { font-size: 0.875rem; }

.nx-service-row {
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--nx-border-light);
  transition: background-color 0.15s ease;
  cursor: pointer;
}
.nx-service-row:last-child { border-bottom: none; }
.nx-service-row:hover { background: var(--nx-surface-alt); }
.nx-service-left { display: flex; align-items: center; gap: 1.25rem; }
.nx-service-icon {
  width: 3rem;
  height: 3rem;
  background: var(--nx-surface-alt);
  border-radius: var(--nx-radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nx-muted);
  transition: all var(--nx-transition-fast);
}
.nx-service-row:hover .nx-service-icon {
  background: var(--nx-primary);
  color: #fff;
}
.nx-service-name { font-weight: 800; font-size: 0.875rem; }
.nx-service-domain { font-size: 0.75rem; color: var(--nx-muted); margin-top: 0.125rem; }
.nx-service-price { font-size: 0.875rem; font-weight: 800; text-align: right; }
.nx-service-status {
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--nx-success);
  margin-top: 0.25rem;
}

.nx-ticket-row {
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--nx-border-light);
  transition: background-color 0.15s ease;
  cursor: pointer;
}
.nx-ticket-row:last-child { border-bottom: none; }
.nx-ticket-row:hover { background: var(--nx-surface-alt); }
.nx-ticket-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.nx-ticket-id {
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--nx-muted);
}
.nx-ticket-badge {
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 0.25rem 0.625rem;
  border-radius: var(--nx-radius);
  border: 1px solid;
}
.nx-ticket-badge.nx-awaiting {
  background: var(--nx-info-bg);
  color: var(--nx-info);
  border-color: rgba(59,130,246,0.2);
}
.nx-ticket-badge.nx-closed {
  background: var(--nx-surface-alt);
  color: var(--nx-muted);
  border-color: var(--nx-border);
}
.nx-ticket-badge.nx-open {
  background: var(--nx-success-bg);
  color: var(--nx-success);
  border-color: rgba(16,185,129,0.2);
}
.nx-ticket-title { font-weight: 800; font-size: 0.875rem; margin-bottom: 0.25rem; }
.nx-ticket-excerpt {
  font-size: 0.75rem;
  color: var(--nx-muted);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===========================================
   DOMAIN SEARCH BAR (Dashboard)
   =========================================== */
.nx-dash-domain {
  background: var(--nx-card);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-2xl);
  padding: 0.5rem;
  box-shadow: var(--nx-shadow-md);
}
[data-theme="dark"] .nx-dash-domain {
  background: var(--nx-primary-muted);
  border-color: rgba(19,91,236,0.2);
}

/* ===========================================
   TESTIMONIAL SUBMISSION MODAL
   =========================================== */
.nx-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: nx-fadeIn 0.2s ease;
}
.nx-modal-overlay.active { display: flex; }
.nx-modal {
  background: var(--nx-card);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-2xl);
  box-shadow: var(--nx-shadow-lg);
  width: 100%;
  max-width: 32rem;
  padding: 2rem;
  animation: nx-modalIn 0.2s ease;
}
@keyframes nx-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes nx-modalIn {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.nx-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.nx-modal-header h3 { font-size: 1.25rem; font-weight: 800; margin: 0; }
.nx-modal-close {
  background: none;
  border: none;
  color: var(--nx-muted);
  cursor: pointer;
  padding: 0.25rem;
  transition: color var(--nx-transition-fast);
}
.nx-modal-close:hover { color: var(--nx-text); }
.nx-form-group { margin-bottom: 1rem; }
.nx-form-group label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--nx-text-secondary);
  margin-bottom: 0.375rem;
}
.nx-form-group input,
.nx-form-group textarea {
  width: 100%;
  background: var(--nx-surface-alt);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-lg);
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  color: var(--nx-text);
  font-family: var(--nx-font);
  transition: all var(--nx-transition);
}
.nx-form-group input:focus,
.nx-form-group textarea:focus {
  outline: none;
  border-color: var(--nx-primary);
  box-shadow: 0 0 0 3px var(--nx-primary-muted);
}
.nx-form-error {
  font-size: 0.75rem;
  color: var(--nx-danger);
  font-weight: 600;
  margin-top: 0.25rem;
  display: none;
}
.nx-form-group.has-error input,
.nx-form-group.has-error textarea {
  border-color: var(--nx-danger);
}
.nx-form-group.has-error .nx-form-error { display: block; }

/* Star Rating Picker */
.nx-star-picker {
  display: flex;
  gap: 0.25rem;
  direction: rtl;
}
.nx-star-picker input { display: none; }
.nx-star-picker label {
  cursor: pointer;
  font-size: 1.5rem;
  color: var(--nx-border);
  transition: all var(--nx-transition-fast);
  margin: 0;
}
.nx-star-picker label:hover,
.nx-star-picker label:hover ~ label,
.nx-star-picker input:checked ~ label {
  color: #f59e0b;
  transform: scale(1.15);
}
.nx-star-picker label .material-symbols-outlined {
  font-variation-settings: 'FILL' 1;
}

.nx-modal-success {
  text-align: center;
  padding: 2rem 0;
}
.nx-modal-success .material-symbols-outlined {
  font-size: 3rem;
  color: var(--nx-success);
  margin-bottom: 1rem;
}
.nx-modal-success h4 { font-weight: 800; margin-bottom: 0.5rem; }
.nx-modal-success p { color: var(--nx-muted); font-size: 0.875rem; }

/* Honeypot field */
.nx-hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

/* ===========================================
   SCROLL ANIMATIONS
   =========================================== */
.nx-animate {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.nx-animate.nx-visible {
  opacity: 1;
  transform: translateY(0);
}
.nx-animate-delay-1 { transition-delay: 0.1s; }
.nx-animate-delay-2 { transition-delay: 0.2s; }
.nx-animate-delay-3 { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .nx-animate { opacity: 1; transform: none; }
}

/* ===========================================
   MOBILE – Sidebar Responsive
   =========================================== */
.nx-sidebar-toggle {
  display: none;
  padding: 0.5rem;
  background: none;
  border: none;
  color: var(--nx-muted);
  cursor: pointer;
}
.nx-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 40;
}
@media (max-width: 768px) {
  .nx-sidebar-toggle { display: flex; }
  .nx-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 45;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    box-shadow: var(--nx-shadow-lg);
  }
  .nx-sidebar.open { transform: translateX(0); }
  .nx-sidebar-backdrop.active { display: block; }
  .nx-client-shell { flex-direction: column; }
  .nx-main { height: 100vh; }
  .nx-content { padding: 1.5rem; }
  .nx-topbar { padding: 0 1.5rem; }

  .nx-hero { padding: 3rem 0 5rem; }
  .nx-hero h1 { font-size: 2rem; }
  .nx-footer-grid { grid-template-columns: 1fr; }

  .btn { width: 100%; margin-bottom: 0.5rem; }
  .table-responsive {
    border-radius: var(--nx-radius-lg);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 480px) {
  body { font-size: 15px; }
  .nx-domain-tlds { gap: 0.75rem; flex-wrap: wrap; }
  .nx-stats-grid { gap: 1rem; }
}

/* ===========================================
   ORDER FORM / CART PAGE
   Styles #order-standard_cart (Standard Cart & Nexus Cart)
   =========================================== */
#order-standard_cart {
  font-family: var(--nx-font);
}
#order-standard_cart .product,
#order-standard_cart .nexus-product-card {
  background: var(--nx-card) !important;
  border: 1px solid var(--nx-border) !important;
  border-radius: var(--nx-radius-xl) !important;
  padding: 1.5rem !important;
  transition: all 0.2s ease;
}
#order-standard_cart .product:hover,
#order-standard_cart .nexus-product-card:hover {
  border-color: var(--nx-primary) !important;
  box-shadow: var(--nx-shadow-md);
}
#order-standard_cart .product-name,
#order-standard_cart .product .product-name {
  font-weight: 700 !important;
  color: var(--nx-text) !important;
}
#order-standard_cart .product .price,
#order-standard_cart .product-pricing .price {
  color: var(--nx-primary) !important;
  font-weight: 700 !important;
  font-size: 1.25rem !important;
}
#order-standard_cart .btn-order-now,
#order-standard_cart .btn-success.btn-order-now,
#order-standard_cart .nexus-btn-primary {
  background: var(--nx-primary) !important;
  border: none !important;
  border-radius: var(--nx-radius-lg) !important;
  color: #fff !important;
  font-weight: 600 !important;
  padding: 0.5rem 1rem !important;
}
#order-standard_cart .btn-order-now:hover,
#order-standard_cart .btn-success.btn-order-now:hover {
  background: var(--nx-primary-hover) !important;
  color: #fff !important;
}
#order-standard_cart .cart-sidebar .panel,
#order-standard_cart .card-sidebar {
  background: var(--nx-card) !important;
  border: 1px solid var(--nx-border) !important;
  border-radius: var(--nx-radius-xl) !important;
}
#order-standard_cart .panel-heading,
#order-standard_cart .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--nx-border) !important;
  color: var(--nx-text) !important;
  font-weight: 600 !important;
}
#order-standard_cart .list-group-item {
  border-color: var(--nx-border) !important;
  color: var(--nx-text-secondary) !important;
}
#order-standard_cart .list-group-item:hover,
#order-standard_cart .list-group-item.active {
  background: var(--nx-primary-muted) !important;
  color: var(--nx-primary) !important;
  border-color: var(--nx-border) !important;
}
#order-standard_cart .header-lined h1 {
  font-weight: 800 !important;
  color: var(--nx-text) !important;
}
#order-standard_cart .header-lined p {
  color: var(--nx-muted) !important;
}
#order-standard_cart .sidebar-collapsed .panel {
  background: var(--nx-card) !important;
  border: 1px solid var(--nx-border) !important;
  border-radius: var(--nx-radius-lg) !important;
}

/* Domain checker — ensure results area is visible (WHMCS w-hidden can block display) */
#order-standard_cart .domain-checker-advanced #DomainSearchResults,
#order-standard_cart .domain-checker-advanced .spotlight-tlds,
#order-standard_cart .domain-checker-advanced .suggested-domains {
  display: block !important;
  visibility: visible !important;
}

/* ===========================================
   WHMCS TWENTY-ONE OVERRIDES
   Core framework overrides to enforce Nexus design
   =========================================== */

/* Body and background — nuclear override of WHMCS brand color */
html body,
html body.primary-bg-color,
body,
body.primary-bg-color {
  background: var(--nx-bg-page) !important;
  background-color: var(--nx-bg-page) !important;
  color: var(--nx-text) !important;
  font-family: var(--nx-font) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* ===========================================
   HOMEPAGE FULL-WIDTH BREAKOUT
   Only on .nx-homepage — remove container constraints
   so pricing/testimonials/features go edge-to-edge.
   =========================================== */
#main-body {
  min-height: auto;
}
.nx-homepage #main-body {
  padding: 0 !important;
}
.nx-homepage #main-body > .container {
  max-width: none !important;
  padding: 0 !important;
  width: 100% !important;
}
.nx-homepage #main-body > .container > .primary-content {
  max-width: none !important;
  padding: 0 !important;
}

/* Public nav is now custom .nx-pub-nav — no WHMCS header overrides needed */

/* Dropdown menus */
.dropdown-menu {
  background: var(--nx-card) !important;
  border: 1px solid var(--nx-border) !important;
  border-radius: var(--nx-radius-lg) !important;
  box-shadow: var(--nx-shadow-lg) !important;
  padding: 0.5rem !important;
}
.dropdown-menu .dropdown-item,
.dropdown-menu > li > a {
  color: var(--nx-text-secondary) !important;
  font-family: var(--nx-font) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  border-radius: var(--nx-radius) !important;
  padding: 0.5rem 0.75rem !important;
  transition: all 0.15s ease !important;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu > li > a:hover {
  background: var(--nx-primary-muted) !important;
  color: var(--nx-primary) !important;
}
.dropdown-divider {
  border-color: var(--nx-border) !important;
  margin: 0.25rem 0 !important;
}
[data-theme="dark"] .dropdown-menu {
  background: var(--nx-card) !important;
  border-color: var(--nx-border) !important;
}
[data-theme="dark"] .dropdown-menu .dropdown-item,
[data-theme="dark"] .dropdown-menu > li > a {
  color: var(--nx-text-secondary) !important;
}

/* Breadcrumb — minimal style, hidden on homepage */
.master-breadcrumb {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Hide breadcrumb when hero section follows (homepage) */
.master-breadcrumb:has(+ .nx-hero),
.nx-hero ~ .master-breadcrumb {
  display: none !important;
}

/* Badge styling */
.badge-info, .badge-primary {
  background: var(--nx-primary) !important;
  border-radius: var(--nx-radius-full) !important;
  font-weight: 700 !important;
  font-family: var(--nx-font) !important;
}

/* Form inputs global */
input[type="search"],
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea {
  color: var(--nx-text) !important;
  font-family: var(--nx-font) !important;
}
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] textarea {
  color: var(--nx-text) !important;
  background: var(--nx-surface-alt) !important;
  border-color: var(--nx-border) !important;
}

/* Well / panels */
.well {
  background: var(--nx-surface-alt) !important;
  border: 1px solid var(--nx-border) !important;
  border-radius: var(--nx-radius-xl) !important;
}
.modal-content {
  background: var(--nx-card) !important;
  border: 1px solid var(--nx-border) !important;
  border-radius: var(--nx-radius-xl) !important;
}

/* WHMCS "Powered by" — hide on homepage, minimal elsewhere */
#main-body p:last-child a[href*="whmcs.com"] {
  font-size: 0 !important;
  line-height: 0 !important;
  visibility: hidden !important;
  height: 0 !important;
  display: block !important;
  overflow: hidden !important;
}
#main-body p[style*="text-align:center"] {
  font-size: 0 !important;
  line-height: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Cart button */
.navbar-nav .cart-btn .badge {
  position: relative;
  top: -2px;
  font-size: 0.625rem;
}

/* ===========================================
   BLOG – Hero Header
   =========================================== */
.nx-blog-hero {
  position: relative;
  padding: 4rem 1rem 3rem;
  text-align: center;
  overflow: hidden;
  background: var(--nx-hero-gradient);
  background-color: var(--nx-bg);
  border-bottom: 1px solid var(--nx-border);
}
[data-theme="dark"] .nx-blog-hero {
  border-bottom-color: rgba(30,41,59,0.5);
}
.nx-blog-hero h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.15;
  margin: 0 0 1rem;
}
.nx-blog-hero h1 .nx-accent { color: var(--nx-primary); }
.nx-blog-hero > p {
  font-size: 1.125rem;
  color: var(--nx-muted);
  max-width: 40rem;
  margin: 0 auto 2rem;
  line-height: 1.6;
}
.nx-blog-search {
  max-width: 36rem;
  margin: 0 auto;
  position: relative;
}
.nx-blog-search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--nx-muted);
  pointer-events: none;
}
.nx-blog-search input {
  width: 100%;
  background: var(--nx-surface-alt);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-xl);
  padding: 0.75rem 1rem 0.75rem 3rem;
  font-size: 0.9375rem;
  color: var(--nx-text);
  font-family: var(--nx-font);
  transition: all var(--nx-transition);
}
[data-theme="dark"] .nx-blog-search input {
  background: var(--nx-surface);
  border-color: rgba(30,41,59,0.5);
}
.nx-blog-search input::placeholder { color: var(--nx-muted); }
.nx-blog-search input:focus {
  outline: none;
  border-color: var(--nx-primary);
  box-shadow: 0 0 0 3px var(--nx-primary-muted);
}

/* ===========================================
   BLOG – Category Filter Pills
   =========================================== */
.nx-blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
}
.nx-blog-filters::-webkit-scrollbar { width: 4px; height: 4px; }
.nx-blog-filters::-webkit-scrollbar-track { background: var(--nx-surface-alt); }
.nx-blog-filters::-webkit-scrollbar-thumb { background: var(--nx-border); border-radius: 10px; }

.nx-filter-pill {
  padding: 0.5rem 1.25rem;
  border-radius: var(--nx-radius-full);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid var(--nx-border);
  background: var(--nx-card);
  color: var(--nx-muted);
  cursor: pointer;
  transition: all var(--nx-transition-fast);
}
.nx-filter-pill:hover {
  color: var(--nx-text);
  border-color: var(--nx-text-secondary);
}
.nx-filter-pill.active {
  background: var(--nx-primary);
  color: #fff;
  border-color: var(--nx-primary);
  font-weight: 700;
  box-shadow: var(--nx-shadow-primary);
}
[data-theme="dark"] .nx-filter-pill {
  background: var(--nx-card);
  border-color: var(--nx-border);
  color: var(--nx-muted);
}
[data-theme="dark"] .nx-filter-pill:hover {
  color: #fff;
  border-color: #475569;
}

/* ===========================================
   BLOG – Layout (2-col with sidebar)
   =========================================== */
.nx-blog-layout {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 72rem;
  margin: 0 auto;
  padding: 3rem 1rem;
}
@media (min-width: 1024px) {
  .nx-blog-layout {
    flex-direction: row;
    gap: 2rem;
  }
}

.nx-blog-main {
  flex: 1;
  min-width: 0;
}

/* ===========================================
   BLOG – Featured Post (First Post)
   =========================================== */
.nx-featured-post {
  margin-bottom: 2rem;
}
.nx-featured-post .nx-featured-thumb {
  border-radius: var(--nx-radius-2xl) var(--nx-radius-2xl) 0 0;
  overflow: hidden;
  background: var(--nx-surface-alt);
  border: 1px solid var(--nx-border);
  border-bottom: none;
}
[data-theme="dark"] .nx-featured-post .nx-featured-thumb {
  background: #0d1425;
}
.nx-featured-post .nx-featured-thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.nx-featured-post .nx-featured-body {
  background: var(--nx-card);
  border: 1px solid var(--nx-border);
  border-top: none;
  border-radius: 0 0 var(--nx-radius-2xl) var(--nx-radius-2xl);
  padding: 2rem;
}
.nx-featured-post:hover .nx-featured-body {
  border-color: rgba(19,91,236,0.4);
}
.nx-featured-post:hover .nx-featured-thumb {
  border-color: rgba(19,91,236,0.4);
}
.nx-featured-title {
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin: 0 0 1rem;
}
.nx-featured-title a {
  color: var(--nx-text);
  text-decoration: none;
  transition: color var(--nx-transition-fast);
}
.nx-featured-title a:hover { color: var(--nx-primary); }
.nx-featured-excerpt {
  font-size: 0.9375rem;
  color: var(--nx-muted);
  line-height: 1.6;
  margin: 0 0 1.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Post meta row */
.nx-post-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.nx-post-badge {
  padding: 0.25rem 0.75rem;
  background: var(--nx-primary-muted);
  color: var(--nx-primary);
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: var(--nx-radius-full);
}
.nx-post-date {
  font-size: 0.8125rem;
  color: var(--nx-muted);
}

/* Author block */
.nx-post-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.nx-author-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--nx-radius-full);
  background: var(--nx-surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nx-muted);
}
[data-theme="dark"] .nx-author-avatar { background: #1e293b; }
.nx-author-avatar .material-symbols-outlined { font-size: 1.25rem; }
.nx-author-name {
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1;
}
.nx-author-role {
  font-size: 0.75rem;
  color: var(--nx-muted);
  margin-top: 0.125rem;
}

/* Thumb placeholder */
.nx-thumb-placeholder {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nx-thumb-placeholder .material-symbols-outlined {
  font-size: 3.5rem;
  color: var(--nx-border);
}
[data-theme="dark"] .nx-thumb-placeholder .material-symbols-outlined { color: #1e293b; }
.nx-thumb-placeholder-sm {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nx-surface-alt);
  border-radius: var(--nx-radius-2xl) var(--nx-radius-2xl) 0 0;
}
[data-theme="dark"] .nx-thumb-placeholder-sm { background: #0d1425; }
.nx-thumb-placeholder-sm .material-symbols-outlined {
  font-size: 3rem;
  color: var(--nx-border);
}
[data-theme="dark"] .nx-thumb-placeholder-sm .material-symbols-outlined { color: #1e293b; }

/* ===========================================
   BLOG – Post Grid Cards
   =========================================== */
.nx-blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 640px) {
  .nx-blog-grid { grid-template-columns: repeat(2, 1fr); }
}

.nx-blog-card {
  background: var(--nx-card);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-2xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all var(--nx-transition);
}
.nx-blog-card:hover {
  border-color: rgba(19,91,236,0.4);
  box-shadow: var(--nx-shadow-lg);
}
.nx-card-thumb {
  overflow: hidden;
}
.nx-card-thumb img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid var(--nx-border-light);
}
.nx-blog-card-body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.nx-post-meta-sm {
  display: flex;
  gap: 0.375rem;
  margin-bottom: 0.75rem;
}
.nx-post-category {
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--nx-primary);
}
.nx-post-readtime {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--nx-muted);
}
.nx-blog-card-title {
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.3;
  margin: 0 0 0.75rem;
  letter-spacing: -0.02em;
}
.nx-blog-card-title a {
  color: var(--nx-text);
  text-decoration: none;
  transition: color var(--nx-transition-fast);
}
.nx-blog-card:hover .nx-blog-card-title a { color: var(--nx-primary); }

.nx-blog-card-excerpt {
  font-size: 0.875rem;
  color: var(--nx-muted);
  line-height: 1.6;
  margin: 0 0 1.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nx-card-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nx-post-author-sm {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.nx-author-avatar-sm {
  width: 2rem;
  height: 2rem;
  border-radius: var(--nx-radius-full);
  background: var(--nx-surface-alt);
}
[data-theme="dark"] .nx-author-avatar-sm { background: #1e293b; }
.nx-author-name-sm {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--nx-text-secondary);
}
.nx-card-arrow {
  color: var(--nx-muted);
  transition: color var(--nx-transition-fast);
}
.nx-blog-card:hover .nx-card-arrow { color: var(--nx-primary); }
.nx-card-arrow .material-symbols-outlined { font-size: 1.25rem; }

/* Empty blog state */
.nx-blog-empty {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--nx-muted);
}
.nx-blog-empty .material-symbols-outlined {
  font-size: 3rem;
  display: block;
  margin-bottom: 1rem;
}
.nx-blog-empty h3 { font-weight: 800; margin-bottom: 0.25rem; color: var(--nx-text); }

/* ===========================================
   BLOG – CTA Section
   =========================================== */
.nx-blog-cta {
  padding: 5rem 1rem;
  text-align: center;
  background: var(--nx-surface-alt);
  border-top: 1px solid var(--nx-border);
}
[data-theme="dark"] .nx-blog-cta {
  background: var(--nx-surface);
}
.nx-blog-cta h2 {
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 1.5rem;
}
.nx-blog-cta > p {
  color: var(--nx-muted);
  max-width: 36rem;
  margin: 0 auto 2.5rem;
  line-height: 1.6;
}
.nx-blog-cta-btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
@media (min-width: 640px) {
  .nx-blog-cta-btns { flex-direction: row; justify-content: center; }
}
.nx-cta-primary {
  display: inline-block;
  padding: 1rem 2rem;
  background: var(--nx-primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.9375rem;
  border-radius: var(--nx-radius-xl);
  text-decoration: none;
  transition: all var(--nx-transition-fast);
  box-shadow: var(--nx-shadow-primary);
}
.nx-cta-primary:hover {
  background: var(--nx-primary-hover);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}
.nx-cta-secondary {
  display: inline-block;
  padding: 1rem 2rem;
  background: var(--nx-card);
  color: var(--nx-text);
  font-weight: 700;
  font-size: 0.9375rem;
  border-radius: var(--nx-radius-xl);
  border: 1px solid var(--nx-border);
  text-decoration: none;
  transition: all var(--nx-transition-fast);
  box-shadow: var(--nx-shadow-sm);
}
[data-theme="dark"] .nx-cta-secondary {
  background: var(--nx-border);
  color: #fff;
  border-color: var(--nx-border);
}
.nx-cta-secondary:hover {
  background: var(--nx-surface-alt);
  color: var(--nx-text);
  text-decoration: none;
}
[data-theme="dark"] .nx-cta-secondary:hover {
  background: #1e293b;
}

/* ===========================================
   BLOG SIDEBAR
   =========================================== */
.nx-blog-sidebar {
  width: 100%;
}
@media (min-width: 1024px) {
  .nx-blog-sidebar {
    width: 20rem;
    flex-shrink: 0;
  }
  .nx-blog-sidebar > .nx-blog-sidebar-sticky {
    position: sticky;
    top: 7rem;
  }
}
.nx-blog-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media (min-width: 1024px) {
  .nx-blog-sidebar {
    position: sticky;
    top: 7rem;
    align-self: flex-start;
  }
}

/* Sidebar: Sponsored Ad Card */
.nx-sidebar-ad {
  background: var(--nx-card);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-2xl);
  overflow: hidden;
  box-shadow: var(--nx-shadow-sm);
  transition: all var(--nx-transition);
}
[data-theme="dark"] .nx-sidebar-ad {
  background: var(--nx-surface);
}
.nx-sidebar-ad-header {
  padding: 0.75rem 1rem;
  background: var(--nx-surface-alt);
  border-bottom: 1px solid var(--nx-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
[data-theme="dark"] .nx-sidebar-ad-header {
  background: rgba(30,41,59,0.3);
}
.nx-sidebar-ad-label {
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--nx-muted);
}
.nx-sidebar-ad-body {
  padding: 1.5rem;
}
.nx-sidebar-ad-creative {
  margin-bottom: 1rem;
}
.nx-sidebar-ad-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--nx-radius-xl);
  display: block;
  border: 1px solid var(--nx-border-light);
}
[data-theme="dark"] .nx-sidebar-ad-img {
  border-color: rgba(30,41,59,0.5);
}
.nx-sidebar-ad-body h4 {
  font-size: 1rem;
  font-weight: 800;
  margin: 0 0 0.5rem;
}
.nx-sidebar-ad-body p {
  font-size: 0.75rem;
  color: var(--nx-muted);
  line-height: 1.5;
  margin: 0 0 1rem;
}
.nx-sidebar-ad-cta {
  display: block;
  width: 100%;
  padding: 0.625rem;
  background: var(--nx-primary);
  color: #fff;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 700;
  border-radius: var(--nx-radius-lg);
  text-decoration: none;
  transition: all var(--nx-transition-fast);
  box-shadow: var(--nx-shadow-primary);
}
.nx-sidebar-ad-cta:hover {
  background: var(--nx-primary-hover);
  color: #fff;
  text-decoration: none;
}
[data-theme="dark"] .nx-sidebar-ad-cta {
  background: var(--nx-primary-muted);
  color: var(--nx-primary);
  box-shadow: none;
}
[data-theme="dark"] .nx-sidebar-ad-cta:hover {
  background: rgba(19,91,236,0.25);
}

/* Sidebar: Partner / Promo card */
.nx-sidebar-card-partner {
  background: linear-gradient(to bottom right, var(--nx-primary-muted), transparent);
  border-color: rgba(19,91,236,0.2);
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .nx-sidebar-card-partner {
  background: linear-gradient(to bottom right, rgba(19,91,236,0.1), transparent);
}
.nx-partner-accent {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.25rem;
  height: 100%;
  background: var(--nx-primary);
}
.nx-partner-label {
  display: block;
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--nx-primary);
  margin-bottom: 1rem;
  opacity: 0.7;
}
[data-theme="dark"] .nx-partner-label { opacity: 0.6; }
.nx-sidebar-cta-dark {
  display: block;
  width: 100%;
  padding: 0.5rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 800;
  border-radius: var(--nx-radius-lg);
  text-decoration: none;
  transition: all var(--nx-transition-fast);
  background: var(--nx-text);
  color: var(--nx-bg);
  box-shadow: var(--nx-shadow-md);
}
.nx-sidebar-cta-dark:hover {
  background: #000;
  color: #fff;
  text-decoration: none;
}
[data-theme="dark"] .nx-sidebar-cta-dark {
  background: var(--nx-primary);
  color: #fff;
  box-shadow: var(--nx-shadow-primary);
}
[data-theme="dark"] .nx-sidebar-cta-dark:hover {
  background: var(--nx-primary-hover);
}

/* Sidebar: Newsletter card */
.nx-sidebar-card {
  background: var(--nx-card);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-2xl);
  padding: 1.5rem;
  box-shadow: var(--nx-shadow-sm);
}
.nx-sidebar-card-title {
  font-size: 1rem;
  font-weight: 800;
  margin: 0 0 0.5rem;
  letter-spacing: -0.02em;
}
.nx-sidebar-card-text {
  font-size: 0.75rem;
  color: var(--nx-muted);
  line-height: 1.5;
  margin: 0 0 1rem;
}
.nx-sidebar-subscribe-btn {
  display: block;
  width: 100%;
  padding: 0.5rem;
  text-align: center;
  background: var(--nx-surface-alt);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-lg);
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--nx-text);
  text-decoration: none;
  transition: all var(--nx-transition-fast);
}
.nx-sidebar-subscribe-btn:hover {
  background: var(--nx-surface);
  color: var(--nx-text);
  text-decoration: none;
}
[data-theme="dark"] .nx-sidebar-subscribe-btn {
  background: var(--nx-border);
  color: #fff;
  border-color: var(--nx-border);
}
[data-theme="dark"] .nx-sidebar-subscribe-btn:hover {
  background: #1e293b;
}

/* Sidebar: Recommended tools / recent posts */
.nx-sidebar-tools {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.nx-sidebar-tools-label {
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--nx-muted);
  padding-left: 0.25rem;
}
.nx-sidebar-tool-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
  transition: all var(--nx-transition-fast);
}
.nx-sidebar-tool-item:hover { color: var(--nx-primary); text-decoration: none; }
.nx-tool-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--nx-radius-lg);
  background: var(--nx-card);
  border: 1px solid var(--nx-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nx-muted);
  flex-shrink: 0;
  transition: all var(--nx-transition-fast);
  box-shadow: var(--nx-shadow-sm);
}
[data-theme="dark"] .nx-tool-icon {
  background: #0d1425;
}
.nx-sidebar-tool-item:hover .nx-tool-icon {
  border-color: rgba(19,91,236,0.5);
  color: var(--nx-primary);
}
.nx-tool-icon .material-symbols-outlined { font-size: 1.25rem; }
.nx-tool-name {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--nx-text-secondary);
  transition: color var(--nx-transition-fast);
}
.nx-sidebar-tool-item:hover .nx-tool-name { color: var(--nx-primary); }
.nx-tool-desc {
  font-size: 0.625rem;
  color: var(--nx-muted);
  margin-top: 0.0625rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 12rem;
}

/* Sidebar: old btn kept for backwards compat */
.nx-sidebar-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.625rem 1.25rem;
  background: var(--nx-primary);
  color: #fff;
  border-radius: var(--nx-radius-lg);
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--nx-transition-fast);
  box-shadow: var(--nx-shadow-primary);
}
.nx-sidebar-btn:hover {
  background: var(--nx-primary-hover);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

/* ===========================================
   BLOG – Single Post Article
   =========================================== */
.nx-post {
  background: var(--nx-card);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-2xl);
  overflow: hidden;
  box-shadow: var(--nx-shadow-sm);
}
.nx-post-hero { overflow: hidden; }
.nx-post-hero img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.nx-post-hero-placeholder {
  aspect-ratio: 16 / 9;
  background: var(--nx-surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-theme="dark"] .nx-post-hero-placeholder { background: #0d1425; }
.nx-post-hero-placeholder .material-symbols-outlined {
  font-size: 4rem;
  color: var(--nx-border);
}
[data-theme="dark"] .nx-post-hero-placeholder .material-symbols-outlined { color: #1e293b; }

.nx-post-body { padding: 2rem; }
.nx-post-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin: 0 0 1.25rem;
}
.nx-post-content {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--nx-text-secondary);
}
.nx-post-content h2, .nx-post-content h3, .nx-post-content h4 {
  color: var(--nx-text);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.nx-post-content p { margin-bottom: 1rem; }
.nx-post-content img {
  max-width: 100%;
  border-radius: var(--nx-radius-lg);
  margin: 1rem 0;
}
.nx-post-content a { color: var(--nx-primary); text-decoration: underline; }
.nx-post-content blockquote {
  border-left: 3px solid var(--nx-primary);
  padding-left: 1.25rem;
  margin: 1.5rem 0;
  color: var(--nx-muted);
  font-style: italic;
}
.nx-post-content pre {
  background: var(--nx-surface-alt);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-lg);
  padding: 1rem;
  overflow-x: auto;
  font-size: 0.875rem;
}
.nx-post-content code {
  background: var(--nx-surface-alt);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius);
  padding: 0.125rem 0.375rem;
  font-size: 0.875em;
}
.nx-post-content pre code {
  background: none;
  border: none;
  padding: 0;
}
.nx-post-footer {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--nx-border);
}
.nx-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--nx-primary);
  text-decoration: none;
  transition: all var(--nx-transition-fast);
}
.nx-back-link .material-symbols-outlined { font-size: 1rem; }
.nx-back-link:hover { gap: 0.5rem; color: var(--nx-primary-hover); }

/* ===========================================
   AD PANELS – Banner ads (inline with posts)
   =========================================== */
.nx-ad-banner {
  background: var(--nx-card);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-2xl);
  overflow: hidden;
  margin-bottom: 2rem;
  box-shadow: var(--nx-shadow-sm);
  position: relative;
  transition: all var(--nx-transition);
  text-align: center;
}
.nx-ad-banner:hover {
  box-shadow: var(--nx-shadow-md);
}
.nx-ad-banner-link { display: block; }
.nx-ad-banner-img {
  display: block;
  width: 100%;
  max-height: 10rem;
  object-fit: contain;
}

.nx-ad-html {
  padding: 1rem;
  font-size: 0.875rem;
  line-height: 1.6;
  overflow: hidden;
}
.nx-ad-html img { max-width: 100%; height: auto; display: block; border-radius: var(--nx-radius-lg); }
.nx-ad-html iframe { max-width: 100%; border: none; }
.nx-ad-html a { color: var(--nx-primary); }
.nx-ad-html script { display: none; }

.nx-ad-label {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 0.5625rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--nx-muted);
  background: var(--nx-card);
  border: 1px solid var(--nx-border);
  padding: 0.125rem 0.5rem;
  border-radius: var(--nx-radius-full);
  opacity: 0.7;
  transition: opacity var(--nx-transition-fast);
}
.nx-sidebar-ad:hover .nx-ad-label,
.nx-ad-banner:hover .nx-ad-label {
  opacity: 1;
}

/* ===========================================
   BLOG – Responsive
   =========================================== */
@media (max-width: 1023px) {
  .nx-blog-layout { padding: 2rem 1rem; }
  .nx-blog-sidebar {
    margin-top: 1rem;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
  }
  .nx-blog-sidebar > * {
    flex: 1 1 280px;
  }
}
@media (max-width: 480px) {
  .nx-blog-hero { padding: 2.5rem 1rem 2rem; }
  .nx-blog-hero h1 { font-size: 1.5rem; }
  .nx-featured-title { font-size: 1.25rem; }
  .nx-featured-post .nx-featured-body { padding: 1.25rem; }
  .nx-blog-cta { padding: 3rem 1rem; }
}