/**
 * ====================================================================================================
 *   NIGAMA CONNECT — LUXURY UI COMPONENT PRIMITIVES
 *   File: css/components.css
 *   Architecture: Tactile Sliced Buttons, Glass Cards, Badges, Modals & Micro-Interactions
 * ====================================================================================================
 */

/* ----------------------------------------------------------------------------------------------------
 * 1. TACTILE SLICED & MAGNETIC ACTION BUTTONS
 * ---------------------------------------------------------------------------------------------------- */
.nc-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.875rem 1.75rem;
  border-radius: var(--nc-radius-full);
  font-family: var(--nc-font-display);
  font-size: var(--nc-fs-body);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--nc-dur-fast) var(--nc-ease-spring),
              box-shadow var(--nc-dur-base) ease,
              background var(--nc-dur-base) ease,
              border-color var(--nc-dur-base) ease;
  white-space: nowrap;
  min-height: 48px;
}

.nc-btn:active {
  transform: scale(0.96) !important;
}

/* Primary Sliced Cyan Button */
.nc-btn-primary {
  width: auto;
  background: linear-gradient(135deg, var(--nc-brand-primary) 0%, var(--nc-brand-primary-hover) 100%);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 16px -2px var(--nc-brand-primary-glow);
}

.nc-btn-primary:hover {
  background: linear-gradient(135deg, #22B5EC 0%, var(--nc-brand-primary) 100%);
  box-shadow: 0 8px 28px -4px var(--nc-brand-primary-glow), 0 0 16px rgba(15, 163, 217, 0.4);
  transform: translateY(-2px);
}

/* Sliced Button Effect (Cut-corner Shimmer) */
.nc-btn-sliced {
  clip-path: polygon(12px 0%, calc(100% - 12px) 0%, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0% calc(100% - 12px), 0% 12px);
  border-radius: 4px;
}

/* Shimmer Light Sweep on Hover */
.nc-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(25deg);
  pointer-events: none;
  transition: none;
}

.nc-btn:hover::after {
  left: 140%;
  transition: left 0.75s ease-in-out;
}

/* Secondary Emerald Button */
.nc-btn-secondary {
  background: linear-gradient(135deg, var(--nc-brand-secondary) 0%, var(--nc-brand-secondary-hover) 100%);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 16px -2px var(--nc-brand-secondary-glow);
}

.nc-btn-secondary:hover {
  background: linear-gradient(135deg, var(--nc-brand-secondary-light) 0%, var(--nc-brand-secondary) 100%);
  box-shadow: 0 8px 28px -4px var(--nc-brand-secondary-glow);
  transform: translateY(-2px);
}

/* Frosted Glass Button */
.nc-btn-glass {
  background: var(--nc-surface-glass);
  color: var(--nc-text-primary);
  border: 1px solid var(--nc-border-glass);
  backdrop-filter: var(--nc-blur-dock);
  -webkit-backdrop-filter: var(--nc-blur-dock);
}

.nc-btn-glass:hover {
  background: var(--nc-surface-glass-active);
  border-color: var(--nc-border-glow-primary);
  color: var(--nc-brand-primary);
  box-shadow: var(--nc-shadow-glow);
  transform: translateY(-2px);
}

/* Outline Button Variant */
.nc-btn-outline {
  background: transparent;
  color: var(--nc-text-primary);
  border: 1.5px solid var(--nc-border-subtle);
  backdrop-filter: var(--nc-blur-dock);
  -webkit-backdrop-filter: var(--nc-blur-dock);
}

.nc-btn-outline:hover {
  background: var(--nc-surface-hover);
  border-color: var(--nc-brand-primary);
  color: var(--nc-brand-primary);
  box-shadow: 0 4px 16px -2px var(--nc-brand-primary-glow);
  transform: translateY(-2px);
}

[data-theme="light"] .nc-btn-outline {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #0F172A !important;
}

[data-theme="light"] .nc-btn-outline:hover {
  border-color: #0284C7 !important;
  color: #0284C7 !important;
  background: #F0F9FF !important;
}

/* Small Button Variant */
.nc-btn-sm {
  padding: 0.5rem 1.125rem;
  font-size: var(--nc-fs-small);
  min-height: 38px;
}

/* Large Hero Button Variant */
.nc-btn-lg {
  padding: 1.125rem 2.25rem;
  font-size: 1.125rem;
  min-height: 54px;
}

/* ----------------------------------------------------------------------------------------------------
 * 2. CATEGORY PILLS & BADGES
 * ---------------------------------------------------------------------------------------------------- */
.nc-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 1rem;
  border-radius: var(--nc-radius-full);
  font-family: var(--nc-font-display);
  font-size: var(--nc-fs-tiny);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--nc-surface-glass);
  border: 1px solid var(--nc-border-glass);
  backdrop-filter: var(--nc-blur-card);
  -webkit-backdrop-filter: var(--nc-blur-card);
}

.nc-badge-cyan {
  color: var(--nc-brand-primary);
  border-color: var(--nc-border-glow-primary);
  background: rgba(15, 163, 217, 0.1);
}

.nc-badge-emerald {
  color: var(--nc-brand-secondary);
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.1);
}

.nc-badge-gold {
  color: var(--nc-brand-gold);
  border-color: var(--nc-border-glow-gold);
  background: rgba(245, 158, 11, 0.1);
}

.nc-badge-orange {
  color: var(--nc-brand-accent);
  border-color: rgba(255, 162, 77, 0.35);
  background: rgba(255, 162, 77, 0.1);
}

/* ----------------------------------------------------------------------------------------------------
 * 3. LUXURY GLASS CARDS & SPATIAL SURFACES
 * ---------------------------------------------------------------------------------------------------- */
.nc-glass-card {
  position: relative;
  background: var(--nc-surface-card);
  border: 1px solid var(--nc-border-glass);
  border-radius: var(--nc-radius-xl);
  padding: 2rem;
  backdrop-filter: var(--nc-blur-card);
  -webkit-backdrop-filter: var(--nc-blur-card);
  box-shadow: var(--nc-shadow-md);
  transition: transform var(--nc-dur-base) var(--nc-ease-spring),
              border-color var(--nc-dur-base) ease,
              box-shadow var(--nc-dur-base) ease;
  overflow: hidden;
}

.nc-glass-card:hover {
  border-color: var(--nc-border-glow-primary);
  box-shadow: var(--nc-shadow-lg), var(--nc-shadow-glow);
}

/* Luminous Specular Border Sheen */
.nc-specular-border {
  position: relative;
}

.nc-specular-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 50%, rgba(15, 163, 217, 0.3) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* 3D Tilt Card Base Container */
.nc-tilt-card {
  transform-style: preserve-3d;
  will-change: transform;
}

/* ----------------------------------------------------------------------------------------------------
 * 4. FORM INPUTS & INTERACTION CONTROLS
 * ---------------------------------------------------------------------------------------------------- */
.nc-input-group {
  position: relative;
  margin-bottom: 1.25rem;
  width: 100%;
}

.nc-input-label {
  display: block;
  font-family: var(--nc-font-display);
  font-size: var(--nc-fs-small);
  font-weight: 600;
  color: var(--nc-text-secondary);
  margin-bottom: 0.5rem;
}

.nc-input {
  width: 100%;
  padding: 0.9375rem 1.25rem;
  background: var(--nc-surface-card);
  border: 1px solid var(--nc-border-glass);
  border-radius: var(--nc-radius-md);
  color: var(--nc-text-primary);
  font-family: var(--nc-font-sans);
  font-size: 1rem;
  transition: border-color var(--nc-dur-fast) ease, box-shadow var(--nc-dur-fast) ease;
  min-height: 48px;
}

.nc-input:focus {
  border-color: var(--nc-brand-primary);
  box-shadow: 0 0 0 3px var(--nc-brand-primary-glow-subtle);
  background: var(--nc-surface-card-hover);
}

.nc-input::placeholder {
  color: var(--nc-text-muted);
}

.nc-input-feedback {
  font-size: var(--nc-fs-tiny);
  margin-top: 0.375rem;
  display: none;
}

.nc-input-feedback.is-error {
  display: block;
  color: #EF4444;
}

.nc-input-feedback.is-success {
  display: block;
  color: var(--nc-brand-secondary);
}

/* ----------------------------------------------------------------------------------------------------
 * 5. 3D SPATIAL MODAL OVERLAYS
 * ---------------------------------------------------------------------------------------------------- */
.nc-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(2, 6, 23, 0.85);
  backdrop-filter: var(--nc-blur-modal);
  -webkit-backdrop-filter: var(--nc-blur-modal);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--nc-dur-base) ease, visibility var(--nc-dur-base) ease;
}

.nc-modal-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

.nc-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 640px;
  background: var(--nc-surface-elevated);
  border: 1px solid var(--nc-border-glass-strong);
  border-radius: var(--nc-radius-xl);
  padding: 2.25rem;
  box-shadow: var(--nc-shadow-lg), 0 0 60px -10px var(--nc-brand-primary-glow);
  transform: perspective(1000px) translateY(30px) rotateX(4deg) scale(0.96);
  transition: transform var(--nc-dur-base) var(--nc-ease-spring);
  max-height: 90vh;
  overflow-y: auto;
}

.nc-modal-overlay.is-visible .nc-modal-dialog {
  transform: perspective(1000px) translateY(0) rotateX(0) scale(1);
}

.nc-modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--nc-surface-card);
  border: 1px solid var(--nc-border-glass);
  color: var(--nc-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color var(--nc-dur-fast) ease, background var(--nc-dur-fast) ease, transform var(--nc-dur-fast) ease;
}

.nc-modal-close:hover {
  color: var(--nc-text-primary);
  background: var(--nc-brand-primary);
  transform: rotate(90deg);
}

/* ----------------------------------------------------------------------------------------------------
 * 6. READING PROGRESS BAR & LIVE SYSTEM STATUS
 * ---------------------------------------------------------------------------------------------------- */
#nc-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform-origin: left;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--nc-brand-primary), var(--nc-brand-secondary-light));
  z-index: 10001;
  pointer-events: none;
  box-shadow: 0 0 10px var(--nc-brand-primary);
  will-change: transform;
}

/* Live Operational Status Indicator */
.nc-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--nc-font-display);
  font-size: var(--nc-fs-small);
  font-weight: 600;
  color: var(--nc-text-secondary);
}

.nc-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--nc-brand-secondary);
  box-shadow: 0 0 0 rgba(16, 185, 129, 0.4);
  animation: nc-pulse-status 2s infinite cubic-bezier(0.66, 0, 0, 1);
}

@keyframes nc-pulse-status {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Back-to-Top Floating Button */
#nc-back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 1.5rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--nc-surface-glass);
  border: 1px solid var(--nc-border-glass);
  color: var(--nc-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 990;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: opacity var(--nc-dur-base) ease, visibility var(--nc-dur-base) ease, transform var(--nc-dur-base) var(--nc-ease-spring);
  backdrop-filter: var(--nc-blur-dock);
  -webkit-backdrop-filter: var(--nc-blur-dock);
  box-shadow: var(--nc-shadow-md);
}

#nc-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#nc-back-to-top:hover {
  background: var(--nc-brand-primary);
  color: #FFFFFF;
  border-color: var(--nc-brand-primary);
  transform: translateY(-3px);
  box-shadow: var(--nc-shadow-glow);
}

[data-theme="light"] #nc-back-to-top {
  background: #FFFFFF;
  border: 1px solid rgba(15, 23, 42, 0.15);
  color: #0F172A;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] #nc-back-to-top:hover {
  background: var(--nc-brand-primary);
  color: #FFFFFF;
  border-color: var(--nc-brand-primary);
}

/* ----------------------------------------------------------------------------------------------------
 * 6b. UNIVERSAL LUXURY FOOTER BASE STYLING (DISTINCT SEPARATION FROM PAGE BODY)
 * ---------------------------------------------------------------------------------------------------- */
.nc-footer {
  position: relative;
  background: 
    radial-gradient(circle at 20% 0%, rgba(15, 163, 217, 0.15) 0%, transparent 45%),
    radial-gradient(circle at 80% 100%, rgba(16, 185, 129, 0.08) 0%, transparent 45%),
    radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, #02050D 0%, #010307 100%) !important;
  background-size: auto, auto, 24px 24px, auto !important;
  border-top: 1px solid rgba(0, 240, 255, 0.3) !important;
  box-shadow: 0 -20px 50px -10px rgba(0, 0, 0, 0.85), inset 0 25px 40px -15px rgba(0, 0, 0, 0.9) !important;
  overflow: hidden;
}

.nc-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 96%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(15, 163, 217, 0.4) 15%, #00F0FF 50%, rgba(16, 185, 129, 0.4) 85%, transparent 100%);
  opacity: 0.9;
  filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.7));
}

[data-theme="light"] .nc-footer {
  background: 
    radial-gradient(circle at 20% 0%, rgba(15, 163, 217, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 80% 100%, rgba(16, 185, 129, 0.06) 0%, transparent 45%),
    radial-gradient(rgba(15, 23, 42, 0.05) 1px, transparent 1px),
    linear-gradient(180deg, #DCE5EE 0%, #D0DBE6 100%) !important;
  background-size: auto, auto, 24px 24px, auto !important;
  border-top: 2px solid rgba(15, 23, 42, 0.15) !important;
  box-shadow: 0 -15px 35px rgba(0, 0, 0, 0.08), inset 0 15px 30px -10px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .nc-footer::before {
  background: linear-gradient(90deg, transparent 0%, rgba(2, 132, 199, 0.4) 20%, #0284C7 50%, rgba(5, 150, 105, 0.4) 80%, transparent 100%);
  filter: drop-shadow(0 0 6px rgba(2, 132, 199, 0.4));
}

/* ----------------------------------------------------------------------------------------------------
 * 7. UNIVERSAL CURVED EDGES FOR NIGAMA CONNECT LOGO ACROSS ALL SCREENS
 * ---------------------------------------------------------------------------------------------------- */
.nc-brand-logo-wrap,
.nc-brand-logo-img,
.nc-mobile-logo,
.brand-badge,
.brand-badge img,
.nc-footer-brand-col .nc-brand-logo-wrap,
.nc-footer-brand-col .nc-brand-logo-img,
img[src*="applogo"],
img[src*="AppLogo"],
img[src*="TreeLogo"],
.nc-brand-logo-wrap img {
  border-radius: 14px !important;
}

/* ----------------------------------------------------------------------------------------------------
 * 8. SUB-TABS NAVIGATION BAR (USER GUIDE & APP STUDIO TOGGLING)
 * ---------------------------------------------------------------------------------------------------- */
.nc-guide-subtab-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  background: rgba(11, 21, 40, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--nc-radius-full);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5);
  margin: 0 auto;
}

.nc-guide-subtab-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  border-radius: var(--nc-radius-full);
  border: 1px solid transparent;
  background: transparent;
  color: var(--nc-text-secondary);
  font-family: var(--nc-font-display);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.nc-guide-subtab-btn:hover {
  color: var(--nc-text-primary);
  background: rgba(255, 255, 255, 0.08);
}

.nc-guide-subtab-btn.is-active {
  background: linear-gradient(135deg, rgba(15, 163, 217, 0.25), rgba(16, 185, 129, 0.2));
  color: #38BDF8;
  border-color: rgba(56, 189, 248, 0.5);
  box-shadow: 0 0 20px rgba(15, 163, 217, 0.35);
}

[data-theme="light"] .nc-guide-subtab-bar {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(15, 23, 42, 0.1);
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .nc-guide-subtab-btn {
  color: #475569;
}

[data-theme="light"] .nc-guide-subtab-btn.is-active {
  background: #FFFFFF;
  color: #0284C7;
  border-color: #0284C7;
  box-shadow: 0 4px 15px rgba(2, 132, 199, 0.2);
}

/* User Request: Hide Interactive App Studio tab option and dropdown links without removing underlying code */
#btn-tab-studio,
.nc-guide-subtab-bar,
.nc-nav-dropdown-menu a[href*="app-screens-showcase"],
.nc-nav-dropdown-menu a[href*="studio"],
.nc-drawer-nav a[href*="app-screens-showcase"],
.nc-drawer-nav a[href*="studio"] {
  display: none !important;
}

/* ----------------------------------------------------------------------------------------------------
 * UNIVERSAL SUBPAGE NON-WHITE CANVAS & CELESTIAL AMBIENCE
 * Explicitly excludes the home page (index.html), covering user-guide, support, security, terms, privacy, download
 * ---------------------------------------------------------------------------------------------------- */
.nc-subpage-atmosphere {
  display: none !important;
}

/* Light Theme: Universal Subpage Body - Rich Non-White Celestial Slate Canvas */
[data-theme="light"] body.nc-subpage-body,
[data-theme="light"] body:has(.nc-guide-section),
[data-theme="light"] body:has(.nc-support-section),
[data-theme="light"] body:has(.nc-security-section),
[data-theme="light"] body:has(.nc-legal-section),
[data-theme="light"] body:has(#nc-download-page-email-form),
html.nc-theme-light body.nc-subpage-body {
  background-color: #DFE8F2 !important;
  background-image: 
    radial-gradient(ellipse 90% 45% at 50% 0%, rgba(14, 165, 233, 0.26) 0%, transparent 65%),
    radial-gradient(circle at 92% 16%, rgba(16, 185, 129, 0.20) 0%, transparent 45%),
    radial-gradient(circle at 8% 22%, rgba(245, 158, 11, 0.16) 0%, transparent 45%),
    radial-gradient(circle at 88% 65%, rgba(139, 92, 246, 0.16) 0%, transparent 50%),
    radial-gradient(circle at 12% 75%, rgba(14, 165, 233, 0.20) 0%, transparent 50%),
    radial-gradient(circle at 50% 90%, rgba(16, 185, 129, 0.14) 0%, transparent 55%),
    linear-gradient(180deg, #DCE6F1 0%, #E3ECF5 25%, #DEE8F2 60%, #D5E1ED 100%) !important;
  /* background-attachment:fixed removed — forces full repaints on every scroll px on iOS/Android */
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* Dark Theme: Universal Subpage Body - Deep Cosmic Space Canvas */
body.nc-subpage-body,
[data-theme="dark"] body.nc-subpage-body {
  background-color: #020617 !important;
  background-image: 
    radial-gradient(ellipse 90% 45% at 50% 0%, rgba(15, 163, 217, 0.24) 0%, transparent 65%),
    radial-gradient(circle at 88% 18%, rgba(16, 185, 129, 0.16) 0%, transparent 45%),
    radial-gradient(circle at 12% 24%, rgba(245, 158, 11, 0.10) 0%, transparent 45%),
    radial-gradient(circle at 82% 68%, rgba(139, 92, 246, 0.14) 0%, transparent 50%),
    radial-gradient(circle at 18% 78%, rgba(15, 163, 217, 0.16) 0%, transparent 50%),
    linear-gradient(180deg, #071122 0%, #020617 35%, #040D1E 70%, #020617 100%) !important;
  /* background-attachment:fixed removed — forces full repaints on every scroll px on iOS/Android */
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* Ensure all subpage main containers and sections are strictly transparent */
main#main-content,
.nc-guide-section,
.nc-support-section,
.nc-security-section,
.nc-legal-section {
  background: transparent !important;
  background-color: transparent !important;
  position: relative;
}

[data-theme="light"] main#main-content,
[data-theme="light"] .nc-guide-section,
[data-theme="light"] .nc-support-section,
[data-theme="light"] .nc-security-section,
[data-theme="light"] .nc-legal-section {
  background: transparent !important;
  background-color: transparent !important;
}

/* Light Theme Frosted Glass Translucency for Subpage Cards */
[data-theme="light"] .nc-glass-card,
[data-theme="light"] .nc-guide-chapter-card,
[data-theme="light"] .nc-guide-sidebar,
[data-theme="light"] .nc-support-form-card,
[data-theme="light"] .nc-legal-card,
[data-theme="light"] .nc-legal-controls-bar,
[data-theme="light"] .nc-security-card {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1.5px solid rgba(15, 23, 42, 0.10) !important;
  box-shadow: 0 12px 36px -8px rgba(15, 23, 42, 0.08), 0 0 25px rgba(15, 163, 217, 0.05) !important;
}

[data-theme="light"] .nc-guide-search-input {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1.5px solid rgba(15, 163, 217, 0.40) !important;
  box-shadow: 0 4px 20px rgba(15, 163, 217, 0.10) !important;
}

/* ----------------------------------------------------------------------------------------------------
 * 12. HIGH-FPS GPU COMPOSITING & CONTENT-VISIBILITY ACCELERATION
 * ---------------------------------------------------------------------------------------------------- */
.nc-section:not(#nc-hero):not(.nc-hero-section) {
  content-visibility: auto;
  contain-intrinsic-size: 0 700px;
}

.nc-phone-mockup,
.nc-glass-card,
.nc-tilt-card,
.nc-reminder-item,
.nc-testimonial-card,
.nc-store-card,
.nc-mobile-gen-card,
.nc-inapp-bottom-nav {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

@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;
  }
}