/* Google Sans (Stitch by Google Typography) */
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400;
  src: url('https://fonts.gstatic.com/s/googlesans/v62/4Ua_rENHsxJlGDuGo1OIlJfC6l_24rlCK1Yo_Iqcsih3SAyH6cAwhX9RFD48TE63OOYKtrwEIJllpyw.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 500;
  src: url('https://fonts.gstatic.com/s/googlesans/v62/4Ua_rENHsxJlGDuGo1OIlJfC6l_24rlCK1Yo_Iqcsih3SAyH6cAwhX9RFD48TE63OOYKtrwEIJllpyw.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 700;
  src: url('https://fonts.gstatic.com/s/googlesans/v62/4Ua_rENHsxJlGDuGo1OIlJfC6l_24rlCK1Yo_Iqcsih3SAyH6cAwhX9RFD48TE63OOYKtrwEIJllpyw.ttf') format('truetype');
  font-display: swap;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    scroll-behavior: smooth;
    font-family: 'Google Sans', 'Outfit', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    letter-spacing: -0.015em;
    background-color: #0c0e1b;
    color: #f1f5f9;
  }

  body {
    background-color: #0c0e1b;
    background-image: 
      radial-gradient(ellipse 80% 50% at 50% 16%, rgba(99, 102, 241, 0.28) 0%, rgba(59, 130, 246, 0.16) 38%, rgba(12, 14, 27, 0) 72%),
      radial-gradient(at 100% 30%, rgba(99, 102, 241, 0.05) 0px, transparent 38%),
      linear-gradient(to right, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
    background-attachment: fixed;
    min-height: 100vh;
  }

  /* Custom scrollbar */
  ::-webkit-scrollbar {
    width: 8px;
  }
  ::-webkit-scrollbar-track {
    background: #080b13;
  }
  ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 9999px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(14, 165, 233, 0.4);
  }
}

/* Ambient Hero Bloom (Hostinger-Style Central Clarity & Glow) */
.ambient-hero-bloom {
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%) translateZ(0);
  width: 1000px;
  max-width: 95vw;
  height: 560px;
  border-radius: 9999px;
  background: radial-gradient(ellipse 75% 55% at 50% 38%, rgba(99, 102, 241, 0.46) 0%, rgba(56, 189, 248, 0.3) 35%, rgba(67, 56, 202, 0.12) 65%, transparent 85%);
  filter: blur(80px);
  pointer-events: none;
  opacity: 0.95;
  will-change: transform;
}

#stitch-spotlight {
  background: radial-gradient(750px circle at var(--mouse-x, 50vw) var(--mouse-y, 30vh), rgba(56, 189, 248, 0.18), rgba(129, 140, 248, 0.08) 40%, transparent 70%);
}

/* Utilitario para Carretel / Carousel sin barra visible */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Glassmorphism & Hairline Surfaces */
.glass-card {
  background: rgba(10, 14, 26, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.08);
  transition: all 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}

.glass-card:hover {
  border-color: rgba(56, 189, 248, 0.25);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.12), 0 20px 40px -15px rgba(0, 0, 0, 0.6);
  transform: translateY(-2px);
}

/* Double-Bezel (Doppelrand) Nested Hardware Enclosure */
.double-bezel {
  position: relative;
  padding: 6px;
  border-radius: 2rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 25px 50px -15px rgba(0, 0, 0, 0.7);
  transition: all 0.4s cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
}

.double-bezel::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: radial-gradient(350px circle at var(--card-x, 50%) var(--card-y, 50%), rgba(56, 189, 248, 0.45), rgba(129, 140, 248, 0.2) 30%, transparent 65%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.double-bezel:hover::before {
  opacity: 1;
}

.double-bezel:hover {
  box-shadow: 0 30px 60px -15px rgba(0, 240, 255, 0.08), 0 20px 40px -15px rgba(0, 0, 0, 0.7);
  transform: translateY(-2px);
}

.double-bezel-inner {
  position: relative;
  z-index: 1;
  border-radius: calc(2rem - 6px);
  background: linear-gradient(180deg, rgba(26, 30, 44, 0.9) 0%, rgba(18, 22, 33, 0.96) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.08);
  padding: 1.5rem;
}

/* Button-in-Button Capsule Interaction */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  border-radius: 9999px;
  font-weight: 700;
  transition: all 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.btn-pill:hover {
  transform: scale(1.02);
}

.btn-pill:active {
  transform: scale(0.98);
}

.btn-icon-bubble {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.btn-pill:hover .btn-icon-bubble {
  transform: translateX(2px) scale(1.05);
}

/* Subtle Neon Ambient Glows */
.ambient-glow-cyan {
  background: radial-gradient(circle, rgba(0, 240, 255, 0.1) 0%, rgba(0, 240, 255, 0) 70%);
}

.ambient-glow-emerald {
  background: radial-gradient(circle, rgba(5, 241, 144, 0.08) 0%, rgba(5, 241, 144, 0) 70%);
}

.ambient-glow-purple {
  background: radial-gradient(circle, rgba(168, 85, 247, 0.09) 0%, rgba(168, 85, 247, 0) 70%);
}

.ambient-glow-amber {
  background: radial-gradient(circle, rgba(251, 191, 36, 0.08) 0%, rgba(251, 191, 36, 0) 70%);
}

/* Neon Text Gradients */
.gradient-text-cyan {
  background: linear-gradient(135deg, #ffffff 20%, #38bdf8 65%, #00f0ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text-purple {
  background: linear-gradient(135deg, #ffffff 20%, #c084fc 65%, #a855f7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text-gold {
  background: linear-gradient(135deg, #ffffff 20%, #fbbf24 65%, #f59e0b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Micro Hairlines */
.hairline {
  border-color: rgba(255, 255, 255, 0.06);
}

.hairline-hover:hover {
  border-color: rgba(255, 255, 255, 0.16);
}

/* Código para ocultar contenedores de marcas de agua */
[class*="es-badge-container"], 
[class*="eapps-widget-toolbar"] {
    display: none !important;
}

/* ==========================================================================
   CALIBRATED DUAL-MODE STYLING SYSTEM (LIGHT & DARK ACCORDING TO LUXURY DESIGN)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. MODO CLARO (THEME-LIGHT)
   -------------------------------------------------------------------------- */
html.theme-light{
  background-color: #f8fafc;
  color: #0f172a;
}

html.theme-light body{
  background-color: #f8fafc;
  background-image: 
    radial-gradient(ellipse 80% 50% at 50% 16%, rgba(186, 230, 253, 0.45) 0%, rgba(224, 242, 254, 0.2) 38%, transparent 72%),
    linear-gradient(to right, rgba(15, 23, 42, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.035) 1px, transparent 1px);
  background-size: 100% 100%, 40px 40px, 40px 40px;
  background-attachment: fixed;
  color: #0f172a;
}

html.theme-light .ambient-hero-bloom{
  background: radial-gradient(ellipse 78% 55% at 50% 38%, rgba(186, 230, 253, 0.85) 0%, rgba(199, 210, 254, 0.6) 35%, rgba(224, 242, 254, 0.25) 65%, transparent 85%);
  filter: blur(65px);
  opacity: 0.95;
}

html.theme-light #stitch-spotlight{
  background: radial-gradient(750px circle at var(--mouse-x, 50vw) var(--mouse-y, 30vh), rgba(2, 132, 199, 0.14), rgba(99, 102, 241, 0.06) 40%, transparent 70%) !important;
}

/* Typography en Modo Claro */
html.theme-light h1,
html.theme-light h2,
html.theme-light h3,
html.theme-light h4,
html.theme-light .text-white{
  color: #0f172a !important;
}

html.theme-light .text-slate-100,
html.theme-light .text-slate-200{
  color: #1e293b !important;
}

html.theme-light .text-slate-300{
  color: #334155 !important;
}

html.theme-light .text-slate-400{
  color: #64748b !important;
}

html.theme-light .text-slate-500{
  color: #94a3b8 !important;
}

html.theme-light .text-sky-400{
  color: #0284c7 !important;
}

html.theme-light .text-emerald-400{
  color: #059669 !important;
}

html.theme-light .text-amber-400{
  color: #d97706 !important;
}

/* Hardware Double-Bezel Frames en Modo Claro */
html.theme-light .double-bezel{
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 20px 45px -15px rgba(15, 23, 42, 0.08), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
}

html.theme-light .double-bezel-inner{
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 1), 0 4px 14px -3px rgba(15, 23, 42, 0.04);
}

/* Logo Adaptativo según Tema (Modo Claro vs Modo Oscuro) */
.logo-dark {
  display: block;
}
.logo-light {
  display: none;
}

html.theme-light .logo-dark{
  display: none !important;
}
html.theme-light .logo-light{
  display: block !important;
}

html.theme-dark .logo-dark {
  display: block !important;
}
html.theme-dark .logo-light {
  display: none !important;
}

/* Floating Island Navbar en Claro */
html.theme-light header > div.rounded-full{
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
  box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.1) !important;
}

html.theme-light header nav a{
  color: #334155;
}

html.theme-light header nav a:hover{
  background: rgba(15, 23, 42, 0.06) !important;
  color: #0f172a !important;
}

/* Topbar en Claro */
html.theme-light .bg-slate-950\/80,
html.theme-light .bg-\[\#141722\]\/80{
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  color: #475569 !important;
}

/* Bordes y Divisores en Claro */
html.theme-light .border-white\/5,
html.theme-light .border-white\/10,
html.theme-light .border-white\/15{
  border-color: rgba(15, 23, 42, 0.08) !important;
}

/* Chips, Cajas de Selección y Superficies en Claro */
html.theme-light .bg-slate-900,
html.theme-light .bg-slate-950,
html.theme-light .bg-black\/40,
html.theme-light .bg-black\/50{
  background-color: #f1f5f9 !important;
  border-color: rgba(15, 23, 42, 0.09) !important;
}

/* Badges Tintados en Claro */
html.theme-light .bg-sky-500\/10{
  background-color: rgba(2, 132, 199, 0.08) !important;
  border-color: rgba(2, 132, 199, 0.2) !important;
}
html.theme-light .bg-emerald-500\/10{
  background-color: rgba(5, 150, 105, 0.08) !important;
  border-color: rgba(5, 150, 105, 0.2) !important;
}
html.theme-light .bg-amber-500\/10{
  background-color: rgba(217, 119, 6, 0.08) !important;
  border-color: rgba(217, 119, 6, 0.2) !important;
}

/* ==========================================================================
   BOTONES PREMIUM: MODO CLARO
   ========================================================================== */

/* 1. Botón Principal Hero: Azul Eléctrico Ejecutivo con Alto Contraste */
html.theme-light #hero-btn-connect{
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 25px -4px rgba(2, 132, 199, 0.38), 0 4px 10px -2px rgba(2, 132, 199, 0.2) !important;
}

html.theme-light #hero-btn-connect .btn-icon-bubble{
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
}

html.theme-light #hero-btn-connect:hover{
  background: linear-gradient(135deg, #0369a1 0%, #075985 100%) !important;
  box-shadow: 0 14px 28px -4px rgba(2, 132, 199, 0.45) !important;
}

/* 2. Botón WhatsApp Hero: Carbón Apple de Alta Gama con Icono Esmeralda */
html.theme-light .btn-pill.bg-slate-900\/90{
  background: #0f172a !important;
  color: #ffffff !important;
  border: 1px solid #1e293b !important;
  box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.15) !important;
}

html.theme-light .btn-pill.bg-slate-900\/90:hover{
  background: #1e293b !important;
}

/* 3. Botones Principales WhatsApp (Navbar CTA, Flotante, Enviar ID): Verde Esmeralda Oficial */
html.theme-light .bg-emerald-500{
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.35) !important;
}

html.theme-light .bg-emerald-500:hover{
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
}

html.theme-light .bg-emerald-500 .btn-icon-bubble{
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
}

/* Botón Pedir Soporte Navbar (Alta especificidad en ambos temas) */
#nav-btn-support,
html.theme-light #nav-btn-support,
html.theme-dark #nav-btn-support {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px -2px rgba(16, 185, 129, 0.45) !important;
}

#nav-btn-support span,
#nav-btn-support i,
html.theme-light #nav-btn-support span,
html.theme-light #nav-btn-support i,
html.theme-dark #nav-btn-support span,
html.theme-dark #nav-btn-support i {
  color: #ffffff !important;
}

#nav-btn-support .btn-icon-bubble {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
}

#nav-btn-support:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  box-shadow: 0 6px 18px -2px rgba(16, 185, 129, 0.55) !important;
}

/* Botón Pedir en Barra de Búsqueda de Software */
#software-search-btn,
html.theme-light #software-search-btn,
html.theme-dark #software-search-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px -2px rgba(16, 185, 129, 0.4) !important;
}

#software-search-btn span,
#software-search-btn i,
html.theme-light #software-search-btn span,
html.theme-light #software-search-btn i,
html.theme-dark #software-search-btn span,
html.theme-dark #software-search-btn i {
  color: #ffffff !important;
}

#software-search-btn:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  box-shadow: 0 6px 16px -2px rgba(16, 185, 129, 0.5) !important;
}

/* 4. Botones de Tarjetas de Software ("Pedir Instalación"): Carbón con Hover Azul */
html.theme-light .software-card button{
  background: #0f172a !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.15) !important;
}

html.theme-light .software-card button:hover{
  background: #0284c7 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px -4px rgba(2, 132, 199, 0.4) !important;
}

html.theme-light .software-card button .btn-icon-bubble{
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

/* 5. Selector de Sistema Operativo (Windows vs Mac) en Claro */
html.theme-light #tab-os-windows,
html.theme-light #modal-tab-os-windows{
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

html.theme-light #tab-os-mac,
html.theme-light #modal-tab-os-mac{
  background: transparent !important;
  color: #64748b !important;
}

/* 6. Tarjetas de Descarga Directa AnyDesk & TeamViewer en Claro */
html.theme-light a[href*="anydesk.com"]{
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important;
  border: 1px solid #fecaca !important;
}
html.theme-light a[href*="anydesk.com"] span.text-white{
  color: #991b1b !important;
}
html.theme-light a[href*="anydesk.com"] span.text-red-300{
  color: #b91c1c !important;
}

html.theme-light a[href*="teamviewer.com"]{
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
  border: 1px solid #bae6fd !important;
}
html.theme-light a[href*="teamviewer.com"] span.text-white{
  color: #0369a1 !important;
}
html.theme-light a[href*="teamviewer.com"] span.text-blue-300{
  color: #0284c7 !important;
}

/* 7. Pills de Filtro en Catálogo de Software en Claro */
html.theme-light .software-filter-btn[data-filter="all"]{
  background: #0f172a !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.18) !important;
}

html.theme-light .software-filter-btn:not([data-filter="all"]){
  background: #ffffff !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
}

html.theme-light .software-filter-btn:not([data-filter="all"]):hover{
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

/* 8. Botón Selector de Tema en Topbar */
html.theme-light #theme-toggle-btn{
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #1e293b !important;
}

/* Inputs y Selects en Claro */
html.theme-light input,
html.theme-light select{
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

html.theme-light input::placeholder{
  color: #94a3b8 !important;
}

/* FAQ Accordion en Claro */
html.theme-light .faq-item{
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 4px 12px -3px rgba(15, 23, 42, 0.04) !important;
}

html.theme-light .faq-trigger span{
  color: #0f172a !important;
}

html.theme-light .faq-content{
  border-color: rgba(15, 23, 42, 0.06) !important;
  color: #475569 !important;
}

/* Footer en Claro */
html.theme-light footer{
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #64748b !important;
}

html.theme-light footer a{
  color: #475569 !important;
}

/* Modal Popup en Claro */
html.theme-light #remote-modal-backdrop{
  background: rgba(15, 23, 42, 0.6) !important;
  backdrop-filter: blur(8px) !important;
}

html.theme-light #close-remote-modal{
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #475569 !important;
}

/* --------------------------------------------------------------------------
   2. MODO OSCURO (THEME-DARK)
   -------------------------------------------------------------------------- */
html.theme-dark {
  background-color: #0c0e1b;
  color: #f1f5f9;
}

html.theme-dark body {
  background-color: #0c0e1b;
  background-image: 
    radial-gradient(ellipse 80% 50% at 50% 16%, rgba(99, 102, 241, 0.28) 0%, rgba(59, 130, 246, 0.16) 38%, rgba(12, 14, 27, 0) 72%),
    radial-gradient(at 100% 30%, rgba(99, 102, 241, 0.05) 0px, transparent 38%),
    linear-gradient(to right, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
  background-attachment: fixed;
  color: #f1f5f9;
}

html.theme-dark .ambient-hero-bloom {
  background: radial-gradient(ellipse 75% 55% at 50% 38%, rgba(99, 102, 241, 0.46) 0%, rgba(56, 189, 248, 0.3) 35%, rgba(67, 56, 202, 0.12) 65%, transparent 85%);
  filter: blur(80px);
  opacity: 0.95;
}

html.theme-dark .double-bezel {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

html.theme-dark .double-bezel-inner {
  background: linear-gradient(180deg, rgba(26, 30, 44, 0.9) 0%, rgba(18, 22, 33, 0.96) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

html.theme-dark #hero-btn-connect {
  background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%) !important;
  color: #020617 !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 25px -4px rgba(56, 189, 248, 0.4) !important;
}

html.theme-dark #hero-btn-connect:hover {
  background: linear-gradient(135deg, #7dd3fc 0%, #38bdf8 100%) !important;
  box-shadow: 0 14px 28px -4px rgba(56, 189, 248, 0.5) !important;
}

html.theme-dark #hero-btn-connect .btn-icon-bubble {
  background: rgba(2, 6, 23, 0.25) !important;
  color: #020617 !important;
}

html.theme-dark .btn-pill.bg-slate-900\/90 {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.4) !important;
}

html.theme-dark .btn-pill.bg-slate-900\/90:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

html.theme-dark .software-card button {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html.theme-dark .software-card button:hover {
  background: #38bdf8 !important;
  color: #020617 !important;
}

html.theme-dark #theme-toggle-btn {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}