@import url('assets/brand-neural.css');

/* Brand neural — critical layout (must work even if import is delayed) */
.brand.brand-neural {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-decoration: none;
  line-height: 1;
  vertical-align: middle;
}
.brand.brand-neural > .brand-neural-canvas,
.brand.brand-neural > .brand-shimmer,
.brand.brand-neural > .brand-bg-glow {
  position: absolute;
  pointer-events: none;
}
.brand.brand-neural > .brand-neural-canvas {
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
}
.brand.brand-neural > .brand-shimmer {
  z-index: 1;
  inset: 0;
  border-radius: inherit;
}
.brand.brand-neural > .brand-bg-glow {
  z-index: 1;
}
.brand.brand-neural > .brand-label {
  position: relative;
  z-index: 2;
}

/* Profile fields: contact number, SMS OTP, social links */
.input-pill {
  width:100%;
  padding:.65rem .9rem;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.25);
  color:#fff;
  transition:all .2s ease;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.input-pill:focus {
  outline:2px solid rgba(255,189,120,.6);
  outline-offset:2px;
  box-shadow:
    0 8px 22px rgba(55,192,255,.22),
    0 0 16px rgba(255,138,0,.2);
}
.input-pill::placeholder { color: rgba(255,255,255,.55); }

.input-pill--gradient {
  background:linear-gradient(135deg, rgba(255,138,0,.12), rgba(35,196,255,.12));
  border-color:rgba(255,189,120,.3);
}

.social-grid input[type="url"]{
  padding:.65rem .9rem;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.28);
  color:#fff;
  transition:all .2s ease;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.social-grid input[type="url"]:focus{
  outline:2px solid rgba(35,196,255,.5);
  outline-offset:2px;
  box-shadow:0 10px 24px rgba(55,192,255,.22),0 0 20px rgba(255,138,0,.2);
}

/* Global file input gradient (fallback) */
input[type="file"]{
  position:relative;
  min-width:160px;
  padding:.65rem 1rem;
  border-radius:12px;
  border:1px dashed rgba(255,255,255,.25);
  background:rgba(255,255,255,.04);
  color:var(--muted);
  cursor:pointer;
  transition:all .2s ease;
}
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button{
  margin-right:.8rem;
  padding:.55rem 1.1rem;
  border:0;
  border-radius:999px;
  font-weight:700;
  color:#0a1f2e;
  background:var(--nav-grad);
  box-shadow:
    0 6px 18px rgba(55,192,255,.22),
    0 0 18px rgba(255,138,0,.22),
    0 0 0 1px rgba(255,175,96,.28);
  cursor:pointer;
  transition:all .25s ease;
}
input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover{
  filter:brightness(1.08);
  transform:translateY(-1px);
  box-shadow:
    0 10px 22px rgba(55,192,255,.26),
    0 0 24px rgba(255,138,0,.26),
    0 0 0 1px rgba(255,189,120,.4);
}
input[type="file"]::file-selector-button:active,
input[type="file"]::-webkit-file-upload-button:active{
  transform:translateY(0);
}
input[type="file"]:focus-visible{
  outline:2px solid rgba(255,189,120,.6);
  outline-offset:2px;
}
/* ======================================================================
   CYBERAI — SITE-WIDE CSS (Blue-Orange Dark Theme, v1.2.0)
   - Unified blue-orange gradient identity
   - Dark surfaces with animated backgrounds
   - Enhanced orange/blue accents throughout
   ====================================================================== */

/* Fonts — Inter (body) + Montserrat (headings) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&display=swap');

/* Import animations */
@import url('animations.css');

/* dev marker */

/* =============================================================================
   SUBSCRIPTION PLAN PAGES - SHARED ANIMATIONS & UTILITIES
   ============================================================================= */

/* Smooth scroll behavior for anchor links */
html {
  scroll-behavior: smooth;
}

/* Pulse animation for active states */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.02);
  }
}

/* Keyframe animations for plan pages */
@keyframes badgePulse {
  0%, 100% { 
    transform: scale(1); 
    box-shadow: 0 4px 16px rgba(34,197,94,.4); 
  }
  50% { 
    transform: scale(1.03); 
    box-shadow: 0 6px 24px rgba(34,197,94,.6); 
  }
}

@keyframes textGlow {
  0%, 100% { 
    filter: brightness(1) drop-shadow(0 0 20px rgba(55,192,255,.5)); 
  }
  50% { 
    filter: brightness(1.1) drop-shadow(0 0 30px rgba(255,138,0,.6)); 
  }
}

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

@keyframes shimmer {
  0% { 
    background-position: -1000px 0; 
  }
  100% { 
    background-position: 1000px 0; 
  }
}

/* Plan comparison table enhancements */
.comparison-highlight {
  position: relative;
}

.comparison-highlight::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #37c0ff, #ff8a00);
  opacity: 0;
  transition: opacity .3s ease;
}

.comparison-highlight:hover::before {
  opacity: 1;
}

/* Testimonial card effects */
.testimonial-rotation {
  animation: fadeInSlide 0.5s ease;
}

@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Payment form security indicator */
.secure-payment-indicator {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  background: rgba(34,197,94,.1);
  border: 1px solid rgba(34,197,94,.3);
  border-radius: 8px;
  color: #22c55e;
  font-size: .9rem;
  font-weight: 600;
}

/* Loading spinner for form submission */
.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Success checkmark animation */
.checkmark-circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  animation: checkmark-stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark-check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: checkmark-stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes checkmark-stroke {
  100% {
    stroke-dashoffset: 0;
  }
}

/* ROI calculator number counting effect */
.count-up {
  animation: countUp 1s ease-out;
}

@keyframes countUp {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Responsive utilities for plan pages */
@media (max-width: 1024px) {
  .plan-hero {
    padding: 3rem 1.5rem;
  }
  
  .plan-name {
    font-size: 3rem !important;
  }
  
  .plan-price {
    font-size: 3.5rem !important;
  }
}

@media (max-width: 640px) {
  .plan-hero {
    padding: 2rem 1rem;
  }
  
  .plan-name {
    font-size: 2.2rem !important;
  }
  
  .plan-price {
    font-size: 2.8rem !important;
  }
  
  .plan-cta-primary {
    padding: 1rem 2rem !important;
    font-size: 1.1rem !important;
  }
  
  .section-title {
    font-size: 2rem !important;
  }
  
  .checkout-form-section {
    padding: 2rem 1.5rem !important;
  }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus visible for keyboard navigation */
.plan-cta-primary:focus-visible,
.form-input:focus-visible,
.payment-method:focus-visible {
  outline: 3px solid rgba(55,192,255,.8);
  outline-offset: 3px;
}

/* Print styles for plan pages */
@media print {
  .plan-hero,
  .checkout-form-section,
  .trust-badges {
    display: none;
  }
  
  .comparison-table,
  .features-grid,
  .faq-grid {
    page-break-inside: avoid;
  }
}

/* Reset + base */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  background:#062237 !important;
  background-color:#062237 !important;
  min-height:100vh;
  width:100%;
  overflow-x:hidden;
}
html,body{
  margin:0;
  padding:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;
  background:#062237 !important;
  background-color:#062237 !important;
  min-height:100vh;
  width:100%;
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}

/* ======================================================================
   BLUE-ORANGE DARK THEME (Site-wide - Enhanced)
   ====================================================================== */
:root{
  /* Blue-Orange Identity - DARKER, MORE SATURATED */
  --blue-900:#062237;
  --blue-800:#09324b;
  --blue-700:#0c3f61;
  --blue-600:#13517a;
  --orange-500:#ff8a00;
  --orange-600:#ff6b00;
  --cyan-accent:#37c0ff;
  --nav-grad:linear-gradient(120deg, #f99f36 0%, #f7a94f 14%, #1c8dee 48%, #23c4ff 68%, #f08d29 100%);
  --nav-grad-hover:linear-gradient(120deg, #ffb45c 0%, #ffa53a 18%, #23c4ff 50%, #1c8dee 68%, #f08d29 100%);
  --btn-grad:linear-gradient(135deg, #0b2a45 0%, #1383ff 45%, #23c4ff 100%);
  --btn-grad-hover:linear-gradient(135deg, #1383ff 0%, #23c4ff 55%, #45d7ff 100%);

  /* Surfaces & Backgrounds - DARKER */
  --bg: linear-gradient(180deg, #09324b, #062237);
  --surface:#0a2739;
  --panel:#0c2e44;
  --border:#1b4a63;
  --text:#eaf3f9;
  --muted:#a6c0d3;

  /* Shadows & Effects - ENHANCED */
  --shadow-sm:0 4px 12px rgba(0,0,0,.25);
  --shadow-md:0 8px 24px rgba(0,0,0,.35);
  --shadow-lg:0 10px 40px rgba(0,0,0,.5);
  --shadow-glow:0 0 20px rgba(255,138,0,.3), 0 0 40px rgba(55,192,255,.2);

  /* Spacing & Radius */
  --radius:12px;
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-12:3rem;

  /* Gradients */
  --grad-orange-blue:linear-gradient(135deg, var(--orange-500) 0%, var(--cyan-accent) 100%);
  --grad-blue-orange:linear-gradient(135deg, var(--cyan-accent) 0%, var(--orange-500) 100%);

  /* OVERRIDE OLD LIGHT BLUE THEME VARIABLES */
  --brand-50:#eaf3f9;
  --brand-100:#a6c0d3;
  --brand-200:#13517a;
  --brand-300:#0c3f61;
  --brand-400:#ff8a00;
  --brand-500:#ff8a00;
  --brand-600:#37c0ff;
  --brand-700:#0c3f61;
  --brand-800:#09324b;
  --brand-900:#062237;
  --accent:#37c0ff;
  --accent-50:#eaf3f9;
  --accent-100:#a6c0d3;
  --accent-200:#13517a;
  --accent-300:#0c3f61;
  --accent-400:#37c0ff;
  --accent-500:#37c0ff;
  --accent-600:#37c0ff;
  --accent-700:#0c3f61;
  --accent-800:#09324b;
  --accent-900:#062237;
  --accent-ghost:rgba(55,192,255,.1);
  --focus:#37c0ff;
  /* Icon utilities */
  --icon-size:20px;
  --icon-glow:0 0 18px rgba(55,192,255,.35),0 0 24px rgba(255,138,0,.28);
}

/* ----------------------------------------------------------
   Icon utility classes (SVG mask + gradient fill + glow)
   ---------------------------------------------------------- */
.icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: 10px;
  background: linear-gradient(135deg, #37c0ff 0%, #ff8a00 100%);
  box-shadow: var(--icon-glow);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
.icon.pulse {
  animation: iconPulse 2.4s ease-in-out infinite;
}
@keyframes iconPulse {
  0%,100% { box-shadow: var(--icon-glow); transform: scale(1); }
  50% { box-shadow: 0 0 26px rgba(55,192,255,.55),0 0 32px rgba(255,138,0,.45); transform: scale(1.05); }
}
.icon-rocket   { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 3l7 7-2.5 2.5-2.5-2.5-4 4 2.5 2.5L12 19l-7-7 3-3-2-2 2-2 2 2 3-3z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 3l7 7-2.5 2.5-2.5-2.5-4 4 2.5 2.5L12 19l-7-7 3-3-2-2 2-2 2 2 3-3z'/%3E%3C/svg%3E"); }
.icon-bolt     { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 2L4 14h6l-1 8 9-12h-6z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 2L4 14h6l-1 8 9-12h-6z'/%3E%3C/svg%3E"); }
.icon-shield   { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2l8 3v7c0 4.5-3.1 8.4-8 10-4.9-1.6-8-5.5-8-10V5l8-3z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2l8 3v7c0 4.5-3.1 8.4-8 10-4.9-1.6-8-5.5-8-10V5l8-3z'/%3E%3C/svg%3E"); }
.icon-book     { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4h9c1.1 0 2 .9 2 2v12c-.5-.6-1.2-1-2-1H4v-13zm0 0h9c1.1 0 2 .9 2 2v12c-.5-.6-1.2-1-2-1H4v-13zM4 4h9c1.1 0 2 .9 2 2v12c-.5-.6-1.2-1-2-1H4v-13z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4h9c1.1 0 2 .9 2 2v12c-.5-.6-1.2-1-2-1H4v-13zm0 0h9c1.1 0 2 .9 2 2v12c-.5-.6-1.2-1-2-1H4v-13zM4 4h9c1.1 0 2 .9 2 2v12c-.5-.6-1.2-1-2-1H4v-13z'/%3E%3C/svg%3E"); }
.icon-chat     { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4h16v10H7l-3 3V4z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4h16v10H7l-3 3V4z'/%3E%3C/svg%3E"); }

/* Animated gradient mesh background - ENHANCED ORANGE/BLUE BALANCE */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 150% 130% at 0% 0%, rgba(255,138,0,.45), transparent 60%),
    radial-gradient(ellipse 130% 110% at 100% 100%, rgba(55,192,255,.38), transparent 62%),
    radial-gradient(ellipse 120% 100% at 50% 50%, rgba(255,107,0,.25), transparent 70%),
    linear-gradient(180deg, #09324b 0%, #062237 50%, #0a1f2e 100%);
  background-size: 100% 100%;
  filter: saturate(1.2);
  will-change: auto;
}

/* breatheGradient animation removed to keep gradients fully static */

/* Animated grid overlay */
body {
  background: #062237 !important;
  background-color: #062237 !important;
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

body > *:not(::before):not(::after) {
  position: relative;
  z-index: 1;
}

/* Ensure all interactive elements are above background effects */
input, select, textarea, button, a, label {
  position: relative;
  z-index: auto;
}

main {
  position: relative;
  z-index: 2;
}

/* Grid pattern overlay - STATIC for stability */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(55,192,255,.02) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(90deg, rgba(255,138,0,.015) 0 1px, transparent 1px 60px);
  mix-blend-mode: overlay;
  opacity: 0.4;
}

/* Layout & type */
main{flex:1 0 auto}

h1,h2,h3,h4,h5,h6{
  font-family:'Montserrat','Inter',system-ui,sans-serif;
  line-height:1.25;
  margin:0 0 var(--space-4);
  color:var(--text);
}
h1{font-size:clamp(1.8rem,1.2rem + 2.2vw,2.5rem)}
h2{font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem)}
h3{font-size:clamp(1.2rem,1rem + 1vw,1.5rem)}

p{margin:0 0 var(--space-4);color:var(--muted)}
/* Enhanced Link Styles - CyberAI Theme */
a{
  color:var(--cyan-accent);
  text-decoration:none;
  transition:all .25s ease;
  position:relative;
}
a:hover{
  color:var(--orange-500);
}
a:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
  border-radius:4px;
}
/* Inline text links with animated underline */
p a, li a, .text-link{
  background:linear-gradient(90deg, var(--cyan-accent), var(--orange-500));
  background-size:0% 2px;
  background-position:0 100%;
  background-repeat:no-repeat;
  padding-bottom:2px;
  transition:all .3s ease;
}
p a:hover, li a:hover, .text-link:hover{
  background-size:100% 2px;
  color:var(--orange-500);
}
/* Gradient text link variant */
.link-gradient{
  background:linear-gradient(135deg, var(--cyan-accent), var(--orange-500));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  font-weight:600;
  transition:all .25s ease;
}
.link-gradient:hover{
  filter:brightness(1.2);
  transform:translateY(-1px);
}
/* Button-style link */
.link-btn{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.5rem 1rem;
  background:linear-gradient(135deg, rgba(55,192,255,.1), rgba(255,138,0,.1));
  border:1px solid rgba(55,192,255,.25);
  border-radius:8px;
  color:rgba(255,255,255,.9) !important;
  font-weight:500;
  transition:all .25s ease;
}
.link-btn:hover{
  background:linear-gradient(135deg, rgba(55,192,255,.2), rgba(255,138,0,.2));
  border-color:rgba(255,138,0,.4);
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(55,192,255,.2);
}
.link-btn svg{
  width:16px;
  height:16px;
  transition:transform .25s ease;
}
.link-btn:hover svg{
  transform:translateX(3px);
}
.text-center{text-align:center}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ======================================================================
   Header + Topbar (Dark theme with blue-orange glow)
   ====================================================================== */
header{position:relative;z-index:10050;background:transparent;border:0;box-shadow:none;overflow:visible}

.topbar{
  position:sticky; top:0; z-index:9999; width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:clamp(10px, 1.2vw, 16px);
  padding:10px clamp(14px, 2.2vw, 22px);
  max-width:100%;
  box-sizing:border-box;
  overflow:visible;
}
.brand{justify-self:start;}
.topbar nav{
  justify-self:center;
  width:max-content;
  max-width:min(100%, calc(100vw - 280px));
  display:flex;
  align-items:center;
  justify-content:center;
  overflow-x:auto;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:0;
  margin:0;
}
.topbar nav::-webkit-scrollbar{display:none;}
.topbar .actions{
  justify-self:end;
  flex:0 0 auto;
  margin-left:0;
  margin-right:-4px;
  flex-shrink:0;
}
.topbar{
  background:rgba(10,39,57,.85);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:2px solid rgba(27,74,99,.8);
  box-shadow:
    0 4px 16px rgba(0,0,0,.4),
    0 2px 8px rgba(0,0,0,.3),
    0 0 0 1px rgba(255,138,0,0.15),
    inset 0 1px 0 rgba(55,192,255,.08);
  transition:all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  will-change:transform, box-shadow;
}
.topbar::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 0%), rgba(55,192,255,.08), transparent 60%);
  opacity:0;
  transition:opacity .5s ease;
  pointer-events:none;
}
.topbar:hover::before{
  opacity:1;
}
.topbar:hover{
  box-shadow:
    0 6px 24px rgba(0,0,0,.5),
    0 4px 12px rgba(0,0,0,.4),
    0 0 0 1px rgba(255,138,0,0.3),
    inset 0 1px 0 rgba(55,192,255,.12);
  transform:translateY(-1px);
}

.topbar .actions{
  display:flex;
  align-items:center;
  gap:10px;
  padding-left:clamp(8px, 1.5vw, 16px);
}
.topbar .actions a{
  margin:0;
}

/* Brand — neural capsule styles live in assets/brand-neural.css */
.brand {
  justify-self: start;
}

/* Legacy: pages may still use bare .brand > span without .brand-label */
.brand > span:not(.brand-label):not(.brand-bg-glow):not(.brand-shimmer) {
  background: linear-gradient(135deg, var(--cyan-accent), var(--orange-500) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 900;
  font-size: 1.15em;
  letter-spacing: 0.06em;
}

/* centered nav pills - ENHANCED with ORANGE/BLUE gradient theme */
.nav-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:clamp(8px, 1.2vw, 14px);
  flex-wrap:nowrap;
  margin-bottom:0;
  padding-bottom:0;
}
.nav-list li{
  flex:0 0 auto;
  margin:0;
  padding:0;
}
@media (max-width: 900px) {
  .topbar{
    grid-template-columns:minmax(0,1fr) auto auto;
  }
  .topbar nav{
    grid-column:1 / -1;
    justify-self:stretch;
    max-width:100%;
  }
  .topbar nav .nav-list{
    justify-content:flex-start;
  }
}
.btn-nav{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 16px;
  border-radius:999px;
  border:2px solid rgba(255,138,0,.25);
  background:
    linear-gradient(135deg, rgba(255,138,0,.12) 0%, rgba(55,192,255,.12) 100%),
    rgba(12,46,68,.6);
  box-shadow:
    0 2px 8px rgba(255,138,0,.15),
    0 1px 4px rgba(55,192,255,.1),
    inset 0 -2px 0 rgba(255,138,0,.08);
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
  line-height:1;
  color:rgba(234,243,249,.85);
  transition:all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  will-change:transform, box-shadow;
  text-decoration:none;
  white-space:nowrap;
  font-size:clamp(10px, 1.05vw, 12px);
  box-sizing:border-box;
}
.btn-nav::before{
  content:'';
  position:absolute;
  top:50%;left:50%;
  width:0;height:0;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,138,0,0.3) 0%, transparent 70%);
  transform:translate(-50%, -50%);
  transition:width 0.6s ease, height 0.6s ease;
}
.btn-nav:hover{
  background:
    linear-gradient(135deg, rgba(255,138,0,.2) 0%, rgba(55,192,255,.2) 100%),
    rgba(12,46,68,.8);
  border-color:rgba(255,138,0,.4);
  transform:translateY(-2px);
  box-shadow:
    0 4px 12px rgba(255,138,0,.3),
    0 2px 8px rgba(55,192,255,.15);
  color:rgba(234,243,249,1);
}
.btn-nav:hover::before{
  width:300px;
  height:300px;
}
.btn-nav.active{
  background:linear-gradient(135deg, var(--orange-500) 0%, var(--cyan-accent) 100%);
  color:#062237 !important;
  border-color:var(--orange-500);
  box-shadow:
    0 4px 16px rgba(255,138,0,.5),
    0 2px 8px rgba(55,192,255,.3);
  animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.btn-nav:focus-visible{
  outline:2px solid rgba(255,138,0,0.6);
  outline-offset:2px;
}


/* ======================================================================
   Buttons - Blue-Orange Gradient Theme
   ====================================================================== */
.btn,
.upload-inline .btn{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:0;
  border-radius:12px;
  padding:.9rem 1.25rem;
  line-height:1.2;
  font-weight:800;
  color:#0a1f2e;
  text-shadow:0 1px 2px rgba(255,255,255,.35);
  background:var(--btn-grad);
  box-shadow:
    0 10px 28px rgba(55,192,255,.18),
    0 0 24px rgba(12,80,140,.3),
    0 0 0 1px rgba(35,196,255,.28);
  transition:all 0.32s cubic-bezier(0.4, 0.0, 0.2, 1);
  will-change:transform, box-shadow;
  text-decoration:none;
  width:100%;
  text-align:center;
  animation:btnPulse 7s ease-in-out infinite;
}
.btn.btn-outline{
  color:#ffffff;
  border:1px solid rgba(255,255,255,.3);
}
.btn::before{
  content:'';
  position:absolute;
  top:0;left:-100%;
  width:100%;height:100%;
  background:linear-gradient(90deg, transparent, rgba(55,192,255,.25), transparent);
  transition:left 0.6s ease;
}
.btn:hover{
  background:var(--btn-grad-hover);
  transform:translateY(-2px);
  box-shadow:
    0 14px 32px rgba(55,192,255,.24),
    0 0 32px rgba(12,80,140,.32),
    0 0 0 1px rgba(80,210,255,.4);
}
.btn:hover::before{
  left:100%;
}
.btn:active{
  transform:translateY(0);
  box-shadow:
    0 2px 8px rgba(255,138,0,.3),
    0 1px 4px rgba(55,192,255,.2);
}
.btn:focus-visible{
  outline:3px solid rgba(255,138,0,.5);
  outline-offset:2px;
}
.btn:disabled,
.btn[aria-disabled="true"]{
  filter:saturate(.6) brightness(.9);
  cursor:not-allowed;
  box-shadow:none;
}
@keyframes btnPulse{
  0%,100%{
    box-shadow:
      0 10px 30px rgba(55,192,255,.22),
      0 0 26px rgba(255,138,0,.24),
      0 0 0 1px rgba(255,175,96,.35);
  }
  50%{
    box-shadow:
      0 14px 36px rgba(55,192,255,.28),
      0 0 34px rgba(255,138,0,.28),
      0 0 0 1px rgba(255,189,120,.45);
  }
}
.btn-outline{
  background:transparent;
  color:var(--cyan-accent);
  border:2px solid var(--cyan-accent);
  box-shadow:0 2px 8px rgba(55,192,255,.15);
}
.btn-outline:hover{
  color:var(--orange-500);
  background:rgba(255,138,0,.1);
  border-color:var(--orange-500);
  box-shadow:0 4px 14px rgba(255,138,0,.3);
}
.btn-ghost{
  background:rgba(255,255,255,.06);
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.22);
  text-shadow:0 1px 2px rgba(0,0,0,.4);
  width:100%;
  text-align:center;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn-ghost:hover{
  background:rgba(255,255,255,.08);
  color:#ffffff;
  border-color:rgba(255,138,0,.32);
}
.btn-ghost:focus-visible{
  outline:3px solid rgba(55,192,255,.45);
  outline-offset:2px;
}
.btn-small{
  font-size:.875rem;
  padding:.45rem .8rem;
}
.btn-pill{
  border-radius:999px;
}
.btn-primary,
.btn.btn-primary,
.btn.primary{
  border:none;
  color:#ffffff;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
  background:var(--btn-grad);
}
.btn-primary:hover,
.btn.btn-primary:hover,
.btn.primary:hover{
  filter:brightness(1.08);
  box-shadow:
    0 14px 32px rgba(55,192,255,.24),
    0 0 32px rgba(12,80,140,.32),
    0 0 0 1px rgba(80,210,255,.4);
}

/* Utility for markup that uses `btn primary` (space) */
.btn.primary{
  color:#ffffff;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}

/* Upload inline form controls (catalog) */
.upload-inline{
  display:flex;
  gap:.5rem;
  align-items:center;
  flex-wrap:wrap;
}
.upload-inline input[type="file"],
.avatar-upload input[type="file"]{
  position:relative;
  padding:.65rem 1rem;
  border-radius:12px;
  border:1px dashed rgba(255,255,255,.25);
  background:rgba(255,255,255,.04);
  color:var(--muted);
  cursor:pointer;
  transition:all .2s ease;
}
.upload-inline input[type="file"]::file-selector-button,
.avatar-upload input[type="file"]::file-selector-button{
  margin-right:.8rem;
  padding:.55rem 1.1rem;
  border:0;
  border-radius:999px;
  font-weight:700;
  color:#0a1f2e;
  background:var(--nav-grad);
  box-shadow:
    0 6px 18px rgba(55,192,255,.22),
    0 0 18px rgba(255,138,0,.22),
    0 0 0 1px rgba(255,175,96,.28);
  cursor:pointer;
  transition:all .25s ease;
}
.upload-inline input[type="file"]::file-selector-button:hover,
.avatar-upload input[type="file"]::file-selector-button:hover{
  filter:brightness(1.08);
  transform:translateY(-1px);
  box-shadow:
    0 10px 22px rgba(55,192,255,.26),
    0 0 24px rgba(255,138,0,.26),
    0 0 0 1px rgba(255,189,120,.4);
}
.upload-inline input[type="file"]::file-selector-button:active,
.avatar-upload input[type="file"]::file-selector-button:active{
  transform:translateY(0);
}
.upload-inline input[type="file"]:focus-visible,
.avatar-upload input[type="file"]:focus-visible{
  outline:2px solid rgba(255,189,120,.6);
  outline-offset:2px;
}


/* ======================================================================
   Buttons - ENHANCED
   ====================================================================== */
.btn{
  position:relative;
  overflow:hidden;
  display:inline-block;
  border:0;
  border-radius:12px;
  padding:.75rem 1.35rem;
  font-weight:800;
  color:#fff;
  letter-spacing:.03em;
  text-transform:none;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,214,130,0.5), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(255,138,0,0.55), transparent 55%),
    linear-gradient(135deg, #FFA726 0%, #FF8A00 45%, #FF6B00 100%);
  box-shadow:
    0 0 0 1px rgba(255,214,130,0.35),
    0 8px 22px rgba(0,0,0,.45),
    0 0 32px rgba(255,138,0,.55);
  transition:transform 0.18s ease-out, box-shadow 0.18s ease-out, background-position 0.18s ease-out;
  will-change:transform, box-shadow, background-position;
  background-size:150% 150%;
}
.btn::before{
  content:'';
  position:absolute;
  top:-1px;left:-40%;
  width:40%;height:calc(100% + 2px);
  background:linear-gradient(90deg, transparent, rgba(55,192,255,.25), transparent);
  opacity:0;
  transform:skewX(-18deg);
  transition:transform 0.55s ease, opacity 0.55s ease;
}
.btn:hover{
  background-position:100% 0;
  transform:translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(255,214,130,0.5),
    0 12px 30px rgba(0,0,0,.5),
    0 0 40px rgba(255,138,0,.6);
}
.btn:hover::before{
  opacity:1;
  transform:translateX(260%) skewX(-18deg);
}
.btn:active{
  transform:translateY(0);
  box-shadow:
    0 0 0 1px rgba(255,214,130,0.35),
    0 4px 14px rgba(0,0,0,.4),
    0 0 20px rgba(255,138,0,.4);
}
.btn:focus-visible{
  outline:3px solid rgba(255,167,38,.5);
  outline-offset:2px;
}
.btn-outline{
  background:transparent;
  color:var(--brand-600);
  border:2px solid var(--brand-600);
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.btn-outline:hover{
  color:#fff;
  background:var(--brand-600);
  border-color:var(--brand-600);
  box-shadow:0 4px 14px rgba(47,128,237,.3);
}
.btn-ghost{
  background:transparent;
  color:var(--brand-600);
}
.btn-ghost:hover{
  background:rgba(47,128,237,.1);
}
.btn-small{
  font-size:.875rem;
  padding:.45rem .8rem;
}

/* ======================================================================
   Hero & Sections - ENHANCED
   ====================================================================== */
.hero{
  /* Let the global mesh handle most of the background so this section
     doesn’t look like a bright, boxy band */
  background:transparent;
  padding:22px 0;
  position:relative;
}

/* Remove the generic section card styling from the hero wrapper so only
   the inner card shows, not a big rectangular slab */
section.hero{
  max-width:100%;
  margin:var(--space-8) auto;
  padding:22px 0;
  background:transparent;
  box-shadow:none;
  border:0;
}
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 50%, rgba(59,130,246,0.04), rgba(6,34,55,0) 60%),
    radial-gradient(circle at 80% 50%, rgba(255,167,38,0.04), rgba(6,34,55,0) 60%);
  pointer-events:none;
}
.hero-inner{
  max-width:900px;
  width:100%;
  margin:0 auto;
  text-align:center;
  background:
    linear-gradient(135deg, rgba(255,138,0,0.08) 0%, transparent 50%, rgba(55,192,255,0.08) 100%),
    rgba(10,46,65,0.65) !important;
  backdrop-filter:blur(24px) saturate(140%);
  -webkit-backdrop-filter:blur(24px) saturate(140%);
  border:2px solid;
  border-image: linear-gradient(135deg, rgba(255,138,0,.5) 0%, rgba(55,192,255,.5) 100%) 1;
  border-radius:14px;
  box-shadow:
    0 10px 40px rgba(0,0,0,.5), 
    0 4px 16px rgba(0,0,0,.3), 
    0 0 60px rgba(255,138,0,.15),
    0 0 40px rgba(55,192,255,.1);
  padding:28px 26px;
  animation:fadeUp 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);
  position:relative;
  flex-shrink:0;
  min-height:fit-content;
}

/* heroGlow animation removed for fully static hero card */
.hero-sub{color:var(--muted);margin:4px 0 14px}
.hero-ctas{display:flex;gap:12px;justify-content:center;align-items:center;margin-bottom:10px}
.trust-badges{
  display:flex;
  gap:18px;
  justify-content:center;
  margin:8px 0 0;
  padding:0;
  list-style:none;
}
.trust-badges li{
  position:relative;
  padding-left:18px;
  color:var(--muted);
  font-weight:600;
  animation:fadeUp 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.trust-badges li:nth-child(1){animation-delay:0.1s;opacity:0;animation-fill-mode:forwards;}
.trust-badges li:nth-child(2){animation-delay:0.2s;opacity:0;animation-fill-mode:forwards;}
.trust-badges li:nth-child(3){animation-delay:0.3s;opacity:0;animation-fill-mode:forwards;}
.trust-badges li::before{
  content:"✦";
  position:absolute;
  left:0;
  top:0;
  color:#FFA726;
  font-weight:900;
}

section{
  max-width:1150px;
  width:100%;
  margin:var(--space-8) auto;
  padding:var(--space-6);
  background:
    linear-gradient(135deg, rgba(255,138,0,0.06) 0%, transparent 50%, rgba(55,192,255,0.06) 100%),
    rgba(10,46,65,0.50) !important;
  backdrop-filter:blur(24px) saturate(140%);
  -webkit-backdrop-filter:blur(24px) saturate(140%);
  border:1px solid;
  border-image: linear-gradient(135deg, rgba(255,138,0,.35) 0%, rgba(55,192,255,.35) 100%) 1;
  border-radius:var(--radius);
  box-shadow:
    0 8px 32px rgba(0,0,0,.4), 
    0 0 40px rgba(255,138,0,.08),
    0 0 60px rgba(55,192,255,.08);
  transition:all 0.3s ease;
  flex-shrink:0;
  min-height:fit-content;
}

/* sectionGlow animation removed to avoid perceived collapsing or pulsing */

/* Make the “AI Automation for Employers” section feel less like a flat box
   and more like floating cards over the global gradient */
#for-employers{
  background:transparent;
  border:0;
  box-shadow:none;
  padding-top:var(--space-6);
  padding-bottom:var(--space-6);
}

#for-employers .cta-panel{
  position:relative;
  background:
    radial-gradient(ellipse 130% 120% at 0% 0%, rgba(255,138,0,.28), transparent 60%),
    radial-gradient(ellipse 130% 120% at 100% 100%, rgba(55,192,255,.24), transparent 60%),
    rgba(10,46,65,0.85);
  background-size:100% 100%;
  border-radius:18px;
  border:2px solid;
  border-image: linear-gradient(135deg, rgba(255,138,0,.5) 0%, rgba(55,192,255,.5) 100%) 1;
  box-shadow:
    0 18px 48px rgba(0,0,0,.65),
    0 0 40px rgba(255,138,0,.15),
    0 0 50px rgba(55,192,255,.12);
  padding:var(--space-6);
  overflow:hidden;
  flex-shrink:0;
  min-height:fit-content;
}

/* ctaPanelPulse animation removed for static CTA panel */
.card{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(135deg, rgba(255,138,0,0.05) 0%, transparent 50%, rgba(55,192,255,0.05) 100%),
    rgba(10,46,65,0.50) !important;
  backdrop-filter:blur(20px) saturate(130%);
  -webkit-backdrop-filter:blur(20px) saturate(130%);
  border:1px solid rgba(55,192,255,.25);
  border-radius:var(--radius);
  box-shadow:
    0 4px 16px rgba(0,0,0,.3), 
    0 0 30px rgba(255,138,0,.06),
    0 0 40px rgba(55,192,255,.06);
  padding:var(--space-5);
  transition:all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
  will-change:transform, box-shadow, border-color;
}
.card::before{
  content:'';
  position:absolute;
  top:50%;left:50%;
  width:0;height:0;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,138,0,0.12) 0%, transparent 70%);
  transform:translate(-50%, -50%);
  transition:width 0.6s ease, height 0.6s ease;
  opacity:0;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:
    0 12px 48px rgba(0,0,0,.3),
    0 0 50px rgba(255,138,0,.18), 
    0 0 60px rgba(55,192,255,.18);
  border-image: linear-gradient(135deg, rgba(255,138,0,.55) 0%, rgba(55,192,255,.55) 100%) 1;
}
.card:hover::before{
  width:500px;
  height:500px;
  opacity:1;
}
/* cardGlow animation removed */
@media (prefers-color-scheme:dark){
  .hero-inner{
    background:rgba(15,23,42,0.95);
  }
}

/* Services page section utilities */
.section-alt {
  background: linear-gradient(135deg, rgba(6,182,212,0.04) 0%, rgba(245,158,11,0.02) 100%) !important;
}
.section-narrow {
  max-width: 800px;
  margin: 0 auto;
}
.card-highlight {
  background: linear-gradient(135deg, rgba(55,192,255,.08), rgba(255,138,0,.06)) !important;
  border-color: rgba(255,138,0,.4) !important;
}

/* Compliance badges for hero / trust sections */
.compliance-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.compliance-pill {
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 999px;
  background: rgba(55,192,255,.12);
  border: 1px solid rgba(55,192,255,.3);
  color: var(--accent);
  white-space: nowrap;
}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.text-center{text-align:center}
.muted{color:var(--muted);font-size:.9rem;margin-top:.75rem}

/* ======================================================================
   DASHBOARD ICON STYLES
   Advanced animated icons for dashboard stats cards
   ====================================================================== */
.dashboard-icon-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Invisible wrapper (no “square frame”) */
  /* Keep a consistent box so all icons align */
  width: 140px;
  height: 140px;
  padding: 0;
  margin-bottom: 0.85rem;
  border-radius: 999px;
  background: transparent;
  backdrop-filter: none;
  position: relative;
  overflow: visible;
  animation: iconFloatGentle 3s ease-in-out infinite;
  will-change: transform;
  transform: translateZ(0);
  perspective: 1000px;
  transition: all 0.3s ease;
  box-shadow: none;
  line-height: 0;
}

.dashboard-icon-container:hover {
  animation: iconHoverBoost 0.6s ease forwards;
  transform: scale(1.10) translateY(-6px);
}

.dashboard-icon {
  width: 122px;
  height: 122px;
  display: block;
  transition: all 0.3s ease;
  will-change: filter, transform;
  filter:
    drop-shadow(0 0 18px rgba(55,192,255,0.18))
    drop-shadow(0 0 28px rgba(168,85,247,0.14))
    drop-shadow(0 0 34px rgba(255,138,0,0.12));
}

/* Fire icon specific styling */
.icon-fire-animated .dashboard-icon {
  animation: iconFireFlicker 1.5s ease-in-out infinite;
  transform: translateY(0px);
}

.icon-fire-animated {
  background: transparent;
}

.icon-fire-animated::before {
  content: '';
  position: absolute;
  inset: -28px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,138,0,0.4) 0%, rgba(255,85,0,0.2) 40%, transparent 70%);
  opacity: 0.75;
  animation: iconParticleEmanate 2s ease-out infinite, iconGlowBreath 2.5s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
  filter: blur(14px);
}

/* Trophy icon specific styling */
.icon-trophy-animated .dashboard-icon {
  animation: iconAchievementShimmer 2.5s ease-in-out infinite;
  /* Visually re-center trophy inside its viewBox */
  transform: translateY(8px);
}

.icon-trophy-animated {
  background: transparent;
}

.icon-trophy-animated::before {
  content: '';
  position: absolute;
  inset: -28px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,204,0,0.4) 0%, rgba(168,85,247,0.3) 40%, transparent 70%);
  opacity: 0.75;
  animation: iconParticleEmanate 2.3s ease-out infinite, iconGlowBreath 2.5s ease-in-out infinite;
  animation-delay: 0s, 0.3s;
  pointer-events: none;
  z-index: -1;
  filter: blur(14px);
}

/* Graduation cap icon specific styling */
.icon-cap-animated .dashboard-icon {
  animation: iconCapGlowCycle 3s ease-in-out infinite;
  /* Visually re-center cap inside its viewBox */
  transform: translateY(6px);
}

.icon-cap-animated {
  background: transparent;
}

.icon-cap-animated::before {
  content: '';
  position: absolute;
  inset: -28px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(55,192,255,0.4) 0%, rgba(255,138,0,0.2) 40%, transparent 70%);
  opacity: 0.75;
  animation: iconParticleEmanate 2.6s ease-out infinite, iconGlowBreath 2.5s ease-in-out infinite;
  animation-delay: 0s, 0.6s;
  pointer-events: none;
  z-index: -1;
  filter: blur(14px);
}

/* Dashboard card entrance animations */
.dashboard-card-streak {
  animation: dashboardCardEntrance 0.6s ease-out;
}

.dashboard-card-achievements {
  animation: dashboardCardEntrance 0.6s ease-out 0.1s backwards;
}

.dashboard-card-discounts {
  animation: dashboardCardEntrance 0.6s ease-out 0.2s backwards;
}

/* Prevent circular glow from clipping: give icon container headroom */
.dashboard-card-streak .dashboard-icon-container,
.dashboard-card-achievements .dashboard-icon-container{
  margin-top: 6px;
}
.dashboard-card-discounts .dashboard-icon-container{
  margin-top: 10px;
}

/* Cards: extra top padding for full glow + float; no clipping */
#dashboard-stats{
  overflow: visible;
}
.dashboard-card-streak,
.dashboard-card-achievements,
.dashboard-card-discounts{
  padding-top: calc(var(--space-5) + 48px);
  /* .card sets overflow:hidden; allow icon glows to render fully */
  overflow: visible;
}

/* The float animation moves icons upward; reduce lift for the discounts card */
.dashboard-card-discounts .dashboard-icon-container{
  animation-timing-function: ease-in-out;
}
.dashboard-card-discounts .dashboard-icon-container{
  /* Override the global float by using a smaller lift */
  animation-name: iconFloatSmall;
}

@keyframes iconFloatSmall {
  0%, 100% { transform: translateY(0) scale(1); }
  /* No upward lift (prevents top-edge clipping) */
  50%      { transform: translateY(0) scale(1.01); }
}

/* Mobile responsive adjustments */
@media (max-width: 680px) {
  .dashboard-icon-container {
    margin-bottom: 0.7rem;
    width: 90px;
    height: 90px;
  }
  
  .dashboard-icon {
    width: 66px;
    height: 66px;
  }
  .icon-trophy-animated .dashboard-icon { transform: translateY(5px); }
  .icon-cap-animated .dashboard-icon { transform: translateY(4px); }
  .dashboard-card-discounts .dashboard-icon-container{ margin-top: 6px; }
  .dashboard-card-streak,
  .dashboard-card-achievements,
  .dashboard-card-discounts{
    padding-top: calc(var(--space-5) + 16px);
  }
  
  /* Optimize animations for mobile performance */
  .dashboard-icon-container::before {
    display: none; /* Remove particle effects on very small screens */
  }
  
  .dashboard-icon-container:hover {
    animation: none; /* Disable hover boost on touch devices */
    transform: scale(1);
  }
}

/* Tablet adjustments */
@media (max-width: 1000px) and (min-width: 681px) {
  .dashboard-icon-container {
    margin-bottom: 0.8rem;
    width: 120px;
    height: 120px;
  }
  
  .dashboard-icon {
    width: 104px;
    height: 104px;
  }
  .icon-trophy-animated .dashboard-icon { transform: translateY(7px); }
  .icon-cap-animated .dashboard-icon { transform: translateY(5px); }
  .dashboard-card-discounts .dashboard-icon-container{ margin-top: 8px; }
  .dashboard-card-streak,
  .dashboard-card-achievements,
  .dashboard-card-discounts{
    padding-top: calc(var(--space-5) + 20px);
  }
}

/* Reduced motion support for accessibility */
@media (prefers-reduced-motion: reduce) {
  .dashboard-icon-container,
  .dashboard-icon,
  .icon-fire-animated .dashboard-icon,
  .icon-trophy-animated .dashboard-icon,
  .icon-cap-animated .dashboard-icon {
    animation: none !important;
  }
  
  .dashboard-icon-container::before {
    animation: none !important;
  }
  
  .dashboard-card-streak,
  .dashboard-card-achievements,
  .dashboard-card-discounts {
    animation: none !important;
  }
}

/* comparison table */
table.compare{width:100%;border-collapse:collapse}
table.compare th,table.compare td{padding:.75rem;border-top:1px solid var(--border)}
table.compare thead th{border-top:0}
table.compare td.c{text-align:center}

/* Forms */
form{display:grid;gap:var(--space-4)}
label{font-weight:600;color:var(--text)}
input[type="text"],input[type="email"],input[type="password"],input[type="search"],textarea,select{width:100%;padding:.75rem .85rem;border:2px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);transition:border-color .15s,box-shadow .2s}
textarea{min-height:120px;resize:vertical}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--brand-600);box-shadow:0 0 0 4px rgba(47,128,237,.2)}

/* Footer - Enhanced CyberAI Theme */
footer{
  margin-top:var(--space-8);
  background:linear-gradient(180deg, rgba(15,23,42,.95) 0%, rgba(10,15,25,1) 100%);
  color:#d7e2ef;
  text-align:center;
  padding:var(--space-6) var(--space-4);
  border-top:1px solid rgba(55,192,255,.15);
  position:relative;
  overflow:hidden;
}
footer::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(90deg, transparent, #37c0ff, #ff8a00, #a855f7, transparent);
  animation:footerGlowLine 4s ease-in-out infinite;
}
@keyframes footerGlowLine{
  0%,100%{opacity:.4;background-position:0% 50%}
  50%{opacity:1;background-position:100% 50%}
}
footer p{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:.5rem;
  margin:0;
  padding:.5rem;
}
footer a{
  color:rgba(255,255,255,.75)!important;
  text-decoration:none!important;
  padding:.4rem .7rem;
  border-radius:6px;
  transition:all .25s ease;
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.3rem;
}
footer a::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(55,192,255,.12), rgba(255,138,0,.12));
  border-radius:6px;
  opacity:0;
  transition:opacity .25s ease;
}
footer a:hover{
  color:#fff!important;
  text-decoration:none!important;
  transform:translateY(-2px);
}
footer a:hover::before{
  opacity:1;
}
footer a span{
  position:relative;
  z-index:1;
}

/* Footer component layout (used by site-footer.php) */
.cyber-footer{
  position:relative;
  margin-top:var(--space-8);
  background:linear-gradient(180deg, rgba(15,23,42,.95) 0%, rgba(10,15,25,1) 100%);
  padding:clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 3vw, 2rem);
  border-top:2px solid transparent;
  background-image:
    linear-gradient(180deg, rgba(15,23,42,.95) 0%, rgba(10,15,25,1) 100%),
    linear-gradient(90deg, #37c0ff 0%, #ff8a00 50%, #a855f7 100%);
  background-origin:border-box;
  background-clip:padding-box, border-box;
  z-index:1;
}
.cyber-footer::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(90deg, #37c0ff 0%, #ff8a00 50%, #a855f7 100%);
  animation:footerGradientBorder 3s ease-in-out infinite;
  z-index:2;
}
@keyframes footerGradientBorder{
  0%,100%{ opacity:.8; filter:brightness(1); }
  50%{ opacity:1; filter:brightness(1.2); }
}
.cyber-footer .footer-inner{
  max-width:min(1200px, 95vw);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(1rem, 2vw, 1.25rem);
  position:relative;
  z-index:1;
}
.cyber-footer .footer-brand{
  display:flex;
  align-items:center;
  gap:.75rem;
}
.cyber-footer .footer-logo{
  width:clamp(32px, 4vw, 40px);
  height:clamp(32px, 4vw, 40px);
  filter:drop-shadow(0 0 12px rgba(55,192,255,.18));
  animation:footerLogoPulse 2.5s ease-in-out infinite;
}
@keyframes footerLogoPulse{
  0%,100%{ 
    filter:drop-shadow(0 0 12px rgba(55,192,255,.18));
    transform:scale(1);
  }
  50%{ 
    filter:drop-shadow(0 0 18px rgba(55,192,255,.3));
    transform:scale(1.05);
  }
}
.cyber-footer .footer-brand-text{
  font-size:clamp(1rem, 2.5vw, 1.35rem);
  font-weight:800;
  background:linear-gradient(135deg, #37c0ff, #ff8a00);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.cyber-footer .footer-links{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:.5rem;
}
.cyber-footer .footer-link{
  display:inline-flex;
  align-items:center;
  gap:clamp(.35rem, 1vw, .45rem);
  padding:clamp(.5rem, 1.2vw, .55rem) clamp(.7rem, 1.5vw, .85rem);
  min-height:44px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.18);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:rgba(255,255,255,.78)!important;
  text-decoration:none!important;
  font-size:clamp(.85rem, 1.1vw, .95rem);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease, color .25s ease;
  position:relative;
  overflow:hidden;
}
.cyber-footer .footer-link::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(55,192,255,.16), rgba(255,138,0,.14));
  opacity:0;
  transition:opacity .25s ease;
}
.cyber-footer .footer-link:hover{
  transform:translateY(-2px);
  border-color:rgba(55,192,255,.22);
  box-shadow:0 10px 26px rgba(0,0,0,.35), 0 0 18px rgba(55,192,255,.12);
  color:#fff!important;
}
.cyber-footer .footer-link:hover::before{ opacity:1; }
.cyber-footer .footer-link-icon{
  width:clamp(14px, 1.8vw, 16px);
  height:clamp(14px, 1.8vw, 16px);
  flex-shrink:0;
  position:relative;
  z-index:1;
  transition:transform .25s ease, color .25s ease;
}
.cyber-footer .footer-link:hover .footer-link-icon{
  color:#37c0ff;
  transform:translateY(-1px);
}
.cyber-footer .footer-link span{ position:relative; z-index:1; }
.cyber-footer .footer-divider{
  display:inline-flex;
  align-items:center;
  width:2px;
  height:18px;
  color:rgba(255,255,255,.22);
}
.cyber-footer .footer-divider svg{ width:100%; height:100%; }

/* Footer SVG micro-animations — Neural Hex Sigil */
.cyf-outer-ring{
  animation:cyfDashRotate 12s linear infinite;
  transform-origin:center;
}
.cyf-node{
  animation:cyfNodeBeat 1.8s ease-in-out infinite;
  transform-origin:center;
}
.cyf-node-1{ animation-delay:0s; }
.cyf-node-2{ animation-delay:.45s; }
.cyf-node-3{ animation-delay:.9s; }
.cyf-node-4{ animation-delay:1.35s; }
.cyf-node-5{ animation-delay:1.8s; }
.cyf-node-6{ animation-delay:2.25s; }
.cyf-edge{
  animation:cyfEdgeShimmer 3s ease-in-out infinite;
  opacity:.25;
}
.cyf-edge-1{ animation-delay:0s; }
.cyf-edge-2{ animation-delay:.5s; }
.cyf-edge-3{ animation-delay:1s; }
.cyf-edge-4{ animation-delay:1.5s; }
.cyf-edge-5{ animation-delay:2s; }
.cyf-edge-6{ animation-delay:2.5s; }
.cyf-edge-cross{
  animation:cyfCrossFlicker 2.4s ease-in-out infinite;
  opacity:.1;
}
.cyf-cross-1{ animation-delay:0s; }
.cyf-cross-2{ animation-delay:.8s; }
.cyf-cross-3{ animation-delay:1.6s; }
.cyf-core{
  animation:cyfCorePulse 2s ease-in-out infinite;
  transform-origin:center;
}
.cyf-core-inner{
  animation:cyfCorePulse 2s ease-in-out infinite;
  animation-delay:.3s;
  transform-origin:center;
}
@keyframes cyfDashRotate{
  0%{ transform:rotate(0deg); }
  100%{ transform:rotate(360deg); }
}
@keyframes cyfNodeBeat{
  0%,100%{ opacity:.5; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.45); }
}
@keyframes cyfCorePulse{
  0%,100%{ opacity:.7; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.4); }
}
@keyframes cyfCrossFlicker{
  0%,100%{ opacity:.1; }
  33%{ opacity:.45; }
  66%{ opacity:.2; }
}
@keyframes cyfEdgeShimmer{
  0%,100%{ opacity:.2; }
  50%{ opacity:.45; }
}
@keyframes cyfEdgeShimmerHover{
  0%,100%{ opacity:.45; }
  50%{ opacity:.82; }
}
@keyframes cyfCrossFlickerHover{
  0%,100%{ opacity:.3; }
  50%{ opacity:.68; }
}

/* Neural Hex Sigil — hover interactivity */
.cyber-footer .footer-brand{
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
  will-change:transform;
}
.cyber-footer .footer-brand:hover{
  transform:scale(1.07);
}
.cyber-footer .footer-brand:hover .cyf-outer-ring{
  animation-duration:4s;
}
.cyber-footer .footer-brand:hover .cyf-node{
  animation-duration:.7s;
}
.cyber-footer .footer-brand:hover .cyf-edge{
  animation:cyfEdgeShimmerHover 1s ease-in-out infinite;
}
.cyber-footer .footer-brand:hover .cyf-edge-cross{
  animation:cyfCrossFlickerHover 1s ease-in-out infinite;
}
.cyber-footer .footer-brand:hover .cyf-core,
.cyber-footer .footer-brand:hover .cyf-core-inner{
  animation-duration:.7s;
}

/* Enhanced Footer Icon Animations */
.footer-copyright-icon{
  animation:copyrightRotate 8s linear infinite, copyrightPulse 3s ease-in-out infinite;
  transform-origin:center;
}
.copyright-circle{
  filter:drop-shadow(0 0 4px rgba(55,192,255,.4));
}
.copyright-c{
  filter:drop-shadow(0 0 3px rgba(255,138,0,.3));
}
.footer-link-copyright:hover .footer-copyright-icon{
  animation:copyrightRotate 4s linear infinite, copyrightPulseHover 1.5s ease-in-out infinite;
  transform:scale(1.15);
  filter:drop-shadow(0 0 12px rgba(55,192,255,.8)) drop-shadow(0 0 20px rgba(255,138,0,.6));
}

@keyframes copyrightRotate{
  0%{ transform:rotate(0deg); }
  100%{ transform:rotate(360deg); }
}
@keyframes copyrightPulse{
  0%,100%{ opacity:0.85; filter:drop-shadow(0 0 4px rgba(55,192,255,.4)); }
  50%{ opacity:1; filter:drop-shadow(0 0 8px rgba(55,192,255,.6)); }
}
@keyframes copyrightPulseHover{
  0%,100%{ opacity:0.9; }
  50%{ opacity:1; }
}

/* Terms of Service Icon Animations */
.footer-terms-icon{
  animation:termsEntrance 0.6s ease-out;
  transform-style:preserve-3d;
}
.terms-doc{
  filter:drop-shadow(0 0 3px rgba(55,192,255,.3));
}
.terms-shimmer{
  animation:termsShimmer 4s ease-in-out infinite;
}
.terms-line-1{
  animation:termsLineAppear 0.8s ease-out 0.2s both;
}
.terms-line-2{
  animation:termsLineAppear 0.8s ease-out 0.4s both;
}
.terms-line-3{
  animation:termsLineAppear 0.8s ease-out 0.6s both;
}
.footer-link-terms:hover .footer-terms-icon{
  transform:scale(1.1) rotateY(15deg);
  filter:drop-shadow(0 0 10px rgba(55,192,255,.6)) drop-shadow(0 0 16px rgba(255,138,0,.4));
}
.footer-link-terms:hover .terms-shimmer{
  animation:termsShimmerHover 2s ease-in-out infinite;
}

@keyframes termsEntrance{
  0%{ opacity:0; transform:scale(0.8) translateY(10px); }
  100%{ opacity:1; transform:scale(1) translateY(0); }
}
@keyframes termsShimmer{
  0%{ fill-opacity:0; x:6; }
  50%{ fill-opacity:0.15; x:8; }
  100%{ fill-opacity:0; x:18; }
}
@keyframes termsShimmerHover{
  0%{ fill-opacity:0; x:6; }
  50%{ fill-opacity:0.25; x:10; }
  100%{ fill-opacity:0; x:18; }
}
@keyframes termsLineAppear{
  0%{ opacity:0; stroke-dasharray:10; stroke-dashoffset:10; }
  100%{ opacity:1; stroke-dasharray:10; stroke-dashoffset:0; }
}

/* Privacy Policy Icon Animations */
.footer-privacy-icon{
  animation:privacyEntrance 0.6s ease-out;
}
.privacy-shield{
  animation:privacyShieldPulse 2.5s ease-in-out infinite;
  transform-origin:center;
  filter:drop-shadow(0 0 4px rgba(55,192,255,.4));
}
.privacy-check{
  animation:privacyCheckDraw 1s ease-out 0.3s both;
}
.privacy-dot-1{
  animation:privacyDotPulse 2s ease-in-out infinite 0s;
}
.privacy-dot-2{
  animation:privacyDotPulse 2s ease-in-out infinite 0.5s;
}
.footer-link-privacy:hover .footer-privacy-icon{
  transform:scale(1.1);
  filter:drop-shadow(0 0 12px rgba(55,192,255,.8)) drop-shadow(0 0 20px rgba(168,85,247,.6));
}
.footer-link-privacy:hover .privacy-shield{
  animation:privacyShieldPulseHover 1.5s ease-in-out infinite;
}
.footer-link-privacy:hover .privacy-check{
  stroke-dashoffset:0;
  animation:privacyCheckDrawHover 0.6s ease-out;
}

@keyframes privacyEntrance{
  0%{ opacity:0; transform:scale(0.8) translateY(10px); }
  100%{ opacity:1; transform:scale(1) translateY(0); }
}
@keyframes privacyShieldPulse{
  0%,100%{ transform:scale(1); filter:drop-shadow(0 0 4px rgba(55,192,255,.4)); }
  50%{ transform:scale(1.05); filter:drop-shadow(0 0 8px rgba(55,192,255,.6)); }
}
@keyframes privacyShieldPulseHover{
  0%,100%{ transform:scale(1); filter:drop-shadow(0 0 8px rgba(55,192,255,.6)); }
  50%{ transform:scale(1.08); filter:drop-shadow(0 0 12px rgba(55,192,255,.8)); }
}
@keyframes privacyCheckDraw{
  0%{ stroke-dashoffset:8; opacity:0; }
  100%{ stroke-dashoffset:0; opacity:1; }
}
@keyframes privacyCheckDrawHover{
  0%{ stroke-dashoffset:8; }
  100%{ stroke-dashoffset:0; }
}
@keyframes privacyDotPulse{
  0%,100%{ opacity:0.4; transform:scale(1); }
  50%{ opacity:0.8; transform:scale(1.3); }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce){
  .footer-copyright-icon,
  .footer-terms-icon,
  .footer-privacy-icon,
  .terms-shimmer,
  .privacy-shield,
  .privacy-check,
  .privacy-dot-1,
  .privacy-dot-2,
  .cyf-outer-ring,
  .cyf-node,
  .cyf-edge,
  .cyf-edge-cross,
  .cyf-core,
  .cyf-core-inner,
  .cyf-data-dot{
    animation:none!important;
  }
  .cyf-data-dot *{ animation:none!important; }
  .cyber-footer .footer-brand{ transition:none!important; }
  .cyber-footer .footer-brand:hover{ transform:none!important; }
  .footer-link-copyright:hover .footer-copyright-icon,
  .footer-link-terms:hover .footer-terms-icon,
  .footer-link-privacy:hover .footer-privacy-icon{
    transform:scale(1.05);
    animation:none!important;
  }
}

@media (max-width: 600px){
  .cyber-footer{
    padding:clamp(1rem, 3vw, 1.5rem) clamp(.75rem, 2.5vw, 1rem);
  }
  .cyber-footer .footer-links{
    flex-direction:column;
    gap:clamp(.4rem, 1.5vw, .5rem);
    width:100%;
  }
  .cyber-footer .footer-link{
    width:100%;
    justify-content:center;
    min-height:44px;
  }
  .cyber-footer .footer-divider{ display:none; }
  .cyber-footer .footer-brand{
    flex-direction:column;
    gap:.5rem;
    text-align:center;
  }
}

/* Responsive */
@media (max-width:1000px){
  .grid-3,.cards{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  section{padding:var(--space-5);margin:var(--space-6) auto}
  .grid-3,.cards{grid-template-columns:1fr}
  .hero-inner{padding:22px 18px}
  .hero-ctas{flex-wrap:wrap}
  .trust-badges{flex-direction:column;gap:6px}
}

/* Container */
.profile-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Trigger styling (match your theme) */
.profile-trigger {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(55,192,255,.08);
  border: 1px solid rgba(55,192,255,.15);
  padding: .5rem .75rem;
  border-radius: 999px;
  cursor: pointer;
}

/* Popover (hidden by default) */
.profile-popover {
  position: absolute;
  right: 0;
  top: calc(100% + .5rem);
  min-width: 220px;
  background: #0f172a;            /* your dark card */
  border: 1px solid rgba(55,192,255,.12);
  border-radius: .75rem;
  box-shadow: 0 20px 40px rgba(0,0,0,.35);
  padding: .5rem;
  display: grid;
  gap: .25rem;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
  z-index: 50;
}

/* Items */
.profile-popover a,
.profile-popover button {
  text-align: left;
  color: #e5e7eb;
  background: transparent;
  border: 0;
  padding: .6rem .75rem;
  border-radius: .5rem;
  font: inherit;
}
.profile-popover a:hover,
.profile-popover button:hover {
  background: rgba(55,192,255,.05);
}

/* OPEN STATES  — show on hover and keyboard focus */
.profile-menu:hover .profile-popover,
.profile-menu:focus-within .profile-popover,
.profile-menu[data-open="true"] .profile-popover {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Optional: gentle hover delay so it doesn’t flicker when passing by */
@media (hover: hover) {
  .profile-menu .profile-popover { transition-delay: 60ms; }
}

/* Motion respect */
@media (prefers-reduced-motion: reduce) {
  .profile-popover { transition: none; }
}

/* Small avatar */
.avatar { width: 28px; height: 28px; border-radius: 999px; object-fit: cover; }
.chev { width: 16px; height: 16px; opacity: .8; }

/* === THEME SYSTEM (must be last) ===================================== */
/* Base defaults (blue-like) used before theme classes are applied */
:root{
  --accent:       #3aa6ff;
  --accent-700:   #1f8df2;
  --accent-900:   #1167c4;
  --accent-ghost: rgba(58,166,255,.18);
  --ring:         rgba(58,166,255,.45);

  /* Bind brand colors used by legacy rules to the accent */
  --brand-600: var(--accent-700);
  --brand-400: var(--accent);
}

/* ======================================================================
   EXPANDED THEME SYSTEM - 10 Unique Gradient Themes
   Each theme has distinct colors, gradients, and glow effects
   ====================================================================== */

/* 1. Cyber Blue (default) - Orange/Cyan gradient */
.theme-blue, .theme-cyber {
  --accent:#37c0ff; --accent-700:#1f9de0; --accent-900:#1167c4;
  --accent-ghost:rgba(55,192,255,.18); --ring:rgba(55,192,255,.45);
  --brand-600: var(--accent-700); --brand-400: var(--accent);
  --grad-primary: linear-gradient(135deg, #37c0ff, #ff8a00);
  --grad-secondary: linear-gradient(135deg, #ff8a00, #37c0ff);
  --glow-color: rgba(55,192,255,0.4);
  --glow-secondary: rgba(255,138,0,0.3);
}

/* 2. Crimson Fire - Red/Orange gradient */
.theme-crimson {
  --accent:#ff3366; --accent-700:#e62958; --accent-900:#cc1f4a;
  --accent-ghost:rgba(255,51,102,.18); --ring:rgba(255,51,102,.45);
  --brand-600: var(--accent-700); --brand-400: var(--accent);
  --grad-primary: linear-gradient(135deg, #ff3366, #ff9933);
  --grad-secondary: linear-gradient(135deg, #ff9933, #ff3366);
  --glow-color: rgba(255,51,102,0.4);
  --glow-secondary: rgba(255,153,51,0.3);
}

/* 3. Emerald Matrix - Green/Cyan gradient */
.theme-emerald {
  --accent:#00ff88; --accent-700:#00d973; --accent-900:#00b35f;
  --accent-ghost:rgba(0,255,136,.18); --ring:rgba(0,255,136,.45);
  --brand-600: var(--accent-700); --brand-400: var(--accent);
  --grad-primary: linear-gradient(135deg, #00ff88, #00ccff);
  --grad-secondary: linear-gradient(135deg, #00ccff, #00ff88);
  --glow-color: rgba(0,255,136,0.4);
  --glow-secondary: rgba(0,204,255,0.3);
}

/* 4. Royal Purple - Purple/Pink gradient */
.theme-purple, .theme-royal {
  --accent:#9d4edd; --accent-700:#7b2cbf; --accent-900:#5a189a;
  --accent-ghost:rgba(157,78,221,.18); --ring:rgba(157,78,221,.45);
  --brand-600: var(--accent-700); --brand-400: var(--accent);
  --grad-primary: linear-gradient(135deg, #9d4edd, #ff006e);
  --grad-secondary: linear-gradient(135deg, #ff006e, #9d4edd);
  --glow-color: rgba(157,78,221,0.4);
  --glow-secondary: rgba(255,0,110,0.3);
}

/* 5. Solar Flare - Yellow/Orange gradient */
.theme-solar {
  --accent:#ffaa00; --accent-700:#ff8800; --accent-900:#ff6600;
  --accent-ghost:rgba(255,170,0,.18); --ring:rgba(255,170,0,.45);
  --brand-600: var(--accent-700); --brand-400: var(--accent);
  --grad-primary: linear-gradient(135deg, #ffaa00, #ff3d00);
  --grad-secondary: linear-gradient(135deg, #ff3d00, #ffaa00);
  --glow-color: rgba(255,170,0,0.4);
  --glow-secondary: rgba(255,61,0,0.3);
}

/* 6. Arctic Frost - Cyan/Purple gradient */
.theme-arctic {
  --accent:#00d4ff; --accent-700:#00b3e6; --accent-900:#0092cc;
  --accent-ghost:rgba(0,212,255,.18); --ring:rgba(0,212,255,.45);
  --brand-600: var(--accent-700); --brand-400: var(--accent);
  --grad-primary: linear-gradient(135deg, #00d4ff, #7b2cbf);
  --grad-secondary: linear-gradient(135deg, #7b2cbf, #00d4ff);
  --glow-color: rgba(0,212,255,0.4);
  --glow-secondary: rgba(123,44,191,0.3);
}

/* 7. Neon Pink - Pink/Orange gradient */
.theme-neon {
  --accent:#ff0080; --accent-700:#e6006f; --accent-900:#cc005e;
  --accent-ghost:rgba(255,0,128,.18); --ring:rgba(255,0,128,.45);
  --brand-600: var(--accent-700); --brand-400: var(--accent);
  --grad-primary: linear-gradient(135deg, #ff0080, #ff8c00);
  --grad-secondary: linear-gradient(135deg, #ff8c00, #ff0080);
  --glow-color: rgba(255,0,128,0.4);
  --glow-secondary: rgba(255,140,0,0.3);
}

/* 8. Deep Ocean - Blue gradient */
.theme-ocean {
  --accent:#0077b6; --accent-700:#005f8f; --accent-900:#004768;
  --accent-ghost:rgba(0,119,182,.18); --ring:rgba(0,119,182,.45);
  --brand-600: var(--accent-700); --brand-400: var(--accent);
  --grad-primary: linear-gradient(135deg, #0077b6, #00b4d8);
  --grad-secondary: linear-gradient(135deg, #00b4d8, #0077b6);
  --glow-color: rgba(0,119,182,0.4);
  --glow-secondary: rgba(0,180,216,0.3);
}

/* 9. Forest Twilight - Green gradient */
.theme-forest {
  --accent:#2d6a4f; --accent-700:#1b4332; --accent-900:#081c15;
  --accent-ghost:rgba(45,106,79,.18); --ring:rgba(45,106,79,.45);
  --brand-600: var(--accent-700); --brand-400: var(--accent);
  --grad-primary: linear-gradient(135deg, #2d6a4f, #52b788);
  --grad-secondary: linear-gradient(135deg, #52b788, #2d6a4f);
  --glow-color: rgba(45,106,79,0.4);
  --glow-secondary: rgba(82,183,136,0.3);
}

/* 10. Midnight Violet - Deep purple gradient */
.theme-midnight {
  --accent:#5a189a; --accent-700:#3c096c; --accent-900:#240046;
  --accent-ghost:rgba(90,24,154,.18); --ring:rgba(90,24,154,.45);
  --brand-600: var(--accent-700); --brand-400: var(--accent);
  --grad-primary: linear-gradient(135deg, #5a189a, #9d4edd);
  --grad-secondary: linear-gradient(135deg, #9d4edd, #5a189a);
  --glow-color: rgba(90,24,154,0.4);
  --glow-secondary: rgba(157,78,221,0.3);
}

/* Legacy theme aliases for backwards compatibility */
.theme-red { 
  --accent:#ff5a64; --accent-700:#e04650; --accent-900:#b32831;
  --accent-ghost:rgba(255,90,100,.18); --ring:rgba(255,90,100,.45);
  --brand-600: var(--accent-700); --brand-400: var(--accent);
  --grad-primary: linear-gradient(135deg, #ff5a64, #ff9966);
  --glow-color: rgba(255,90,100,0.4);
}
.theme-green {
  --accent:#23d18b; --accent-700:#18b575; --accent-900:#0f8b59;
  --accent-ghost:rgba(35,209,139,.18); --ring:rgba(35,209,139,.45);
  --brand-600: var(--accent-700); --brand-400: var(--accent);
  --grad-primary: linear-gradient(135deg, #23d18b, #1fb66a);
  --glow-color: rgba(35,209,139,0.4);
}

/* Accent overrides for components */
.btn{ background:var(--accent); border-color:var(--accent); }
.btn:hover{ background:var(--accent-700); border-color:var(--accent-700); }
.btn:active{ background:var(--accent-900); border-color:var(--accent-900); }

.btn-outline{ color:var(--accent); border-color:var(--accent); }
.btn-outline:hover{ background:var(--accent-ghost); border-color:var(--accent-700); color:var(--accent-700); }

.btn-ghost{ color:var(--accent); }
.btn-ghost:hover{ background:var(--accent-ghost); color:var(--accent-700); }

a, .link{ color:var(--accent); }
a:hover, .link:hover{ color:var(--accent-700); }
/* Theme-aware inline link underlines */
p a, li a, .text-link{
  background-image:linear-gradient(90deg, var(--accent), var(--accent-700));
}
.link-gradient{
  background:linear-gradient(135deg, var(--accent), var(--accent-700));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.link-btn{
  background:var(--accent-ghost);
  border-color:var(--accent);
}
.link-btn:hover{
  border-color:var(--accent-700);
  box-shadow:0 4px 12px var(--glow-color);
}

/* nav pills - use orange theme from above, not overriding here */

/* focus ring + progress + little arrows */
:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }
.progress > span{ background:var(--accent); }
.right-arrow{ color:var(--accent); }

/* ---- High-contrast buttons on dark cards (e.g., hero) ---- */
.hero .btn        { color:#fff !important; text-shadow:0 1px 0 rgba(0,0,0,.35); }
.hero .btn-outline{
  color:#fff !important;
  border-color:rgba(55,192,255,.65) !important;
  background:transparent;
}
.hero .btn-outline:hover{
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color:#fff !important;
}
.hero .btn-ghost{
  color:#fff !important;
  background:transparent;
}
.hero .btn-ghost:hover{
  background: rgba(55,192,255,.08) !important;
  color:#fff !important;
}

/* Slightly bolder small buttons for readability */
.btn, .btn-small { font-weight:800; letter-spacing:.01em; }

/* ======================================================================
   THEME-SPECIFIC BACKGROUND GRADIENTS
   Each theme customizes the body::before radial gradients
   ====================================================================== */

/* Cyber Blue - default orange/cyan */
.theme-blue body::before, .theme-cyber body::before {
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(255,138,0,.30), transparent 65%),
    radial-gradient(1000px 700px at 80% -10%, rgba(55,192,255,.35), transparent 60%),
    radial-gradient(800px 600px at 10% 90%, rgba(255,107,0,.22), transparent 60%),
    radial-gradient(1000px 800px at 110% 90%, rgba(55,192,255,.28), transparent 60%),
    linear-gradient(180deg, #09324b, #062237);
}

/* Crimson Fire */
.theme-crimson body::before {
  background:
    radial-gradient(1200px 700px at 30% 20%, rgba(255,51,102,.35), transparent 65%),
    radial-gradient(1000px 700px at 70% 10%, rgba(255,153,51,.32), transparent 60%),
    radial-gradient(800px 600px at 15% 85%, rgba(255,51,102,.25), transparent 60%),
    radial-gradient(1000px 800px at 100% 80%, rgba(255,153,51,.28), transparent 60%),
    linear-gradient(180deg, #2b1520, #1a0d13);
}

/* Emerald Matrix */
.theme-emerald body::before {
  background:
    radial-gradient(1200px 700px at 25% 15%, rgba(0,255,136,.30), transparent 65%),
    radial-gradient(1000px 700px at 75% 5%, rgba(0,204,255,.32), transparent 60%),
    radial-gradient(800px 600px at 10% 88%, rgba(0,255,136,.22), transparent 60%),
    radial-gradient(1000px 800px at 105% 85%, rgba(0,204,255,.26), transparent 60%),
    linear-gradient(180deg, #0a2e2a, #051815);
}

/* Royal Purple */
.theme-purple body::before, .theme-royal body::before {
  background:
    radial-gradient(1200px 700px at 22% 12%, rgba(157,78,221,.32), transparent 65%),
    radial-gradient(1000px 700px at 78% 8%, rgba(255,0,110,.30), transparent 60%),
    radial-gradient(800px 600px at 12% 92%, rgba(157,78,221,.24), transparent 60%),
    radial-gradient(1000px 800px at 108% 88%, rgba(255,0,110,.26), transparent 60%),
    linear-gradient(180deg, #1e0a2e, #0f0518);
}

/* Solar Flare */
.theme-solar body::before {
  background:
    radial-gradient(1200px 700px at 28% 18%, rgba(255,170,0,.35), transparent 65%),
    radial-gradient(1000px 700px at 72% 12%, rgba(255,61,0,.33), transparent 60%),
    radial-gradient(800px 600px at 18% 82%, rgba(255,170,0,.26), transparent 60%),
    radial-gradient(1000px 800px at 102% 78%, rgba(255,61,0,.28), transparent 60%),
    linear-gradient(180deg, #2e1f0a, #1a1205);
}

/* Arctic Frost */
.theme-arctic body::before {
  background:
    radial-gradient(1200px 700px at 18% 8%, rgba(0,212,255,.32), transparent 65%),
    radial-gradient(1000px 700px at 82% 12%, rgba(123,44,191,.30), transparent 60%),
    radial-gradient(800px 600px at 8% 92%, rgba(0,212,255,.24), transparent 60%),
    radial-gradient(1000px 800px at 112% 88%, rgba(123,44,191,.26), transparent 60%),
    linear-gradient(180deg, #0a1f2e, #05101a);
}

/* Neon Pink */
.theme-neon body::before {
  background:
    radial-gradient(1200px 700px at 32% 22%, rgba(255,0,128,.34), transparent 65%),
    radial-gradient(1000px 700px at 68% 18%, rgba(255,140,0,.32), transparent 60%),
    radial-gradient(800px 600px at 22% 78%, rgba(255,0,128,.26), transparent 60%),
    radial-gradient(1000px 800px at 98% 72%, rgba(255,140,0,.28), transparent 60%),
    linear-gradient(180deg, #2e0a1f, #1a0512);
}

/* Deep Ocean */
.theme-ocean body::before {
  background:
    radial-gradient(1200px 700px at 15% 10%, rgba(0,119,182,.32), transparent 65%),
    radial-gradient(1000px 700px at 85% 15%, rgba(0,180,216,.30), transparent 60%),
    radial-gradient(800px 600px at 5% 90%, rgba(0,119,182,.24), transparent 60%),
    radial-gradient(1000px 800px at 115% 85%, rgba(0,180,216,.26), transparent 60%),
    linear-gradient(180deg, #0a1f2e, #051218);
}

/* Forest Twilight */
.theme-forest body::before {
  background:
    radial-gradient(1200px 700px at 20% 15%, rgba(45,106,79,.30), transparent 65%),
    radial-gradient(1000px 700px at 80% 10%, rgba(82,183,136,.28), transparent 60%),
    radial-gradient(800px 600px at 10% 85%, rgba(45,106,79,.22), transparent 60%),
    radial-gradient(1000px 800px at 110% 80%, rgba(82,183,136,.24), transparent 60%),
    linear-gradient(180deg, #0f1f1a, #081210);
}

/* Midnight Violet */
.theme-midnight body::before {
  background:
    radial-gradient(1200px 700px at 25% 12%, rgba(90,24,154,.33), transparent 65%),
    radial-gradient(1000px 700px at 75% 8%, rgba(157,78,221,.31), transparent 60%),
    radial-gradient(800px 600px at 15% 88%, rgba(90,24,154,.25), transparent 60%),
    radial-gradient(1000px 800px at 105% 82%, rgba(157,78,221,.27), transparent 60%),
    linear-gradient(180deg, #1a0a2e, #0d0518);
}

/* Make nav-pill hover/active use orange theme, not generic accent */

/* Optional: lighten cards very slightly so the accent pops on dark mode */
@media (prefers-color-scheme:dark){
  section, .card, .hero-inner{
    background: var(--surface);
  }
}

/* Ensure outline buttons stay outline even with theme .btn overrides */
.btn.btn-outline{
  background: transparent !important;
  color: var(--accent) !important;
  border: 2px solid var(--accent) !important;
}
.btn.btn-outline:hover{
  background: var(--accent-ghost) !important;
  color: var(--accent-700) !important;
  border-color: var(--accent-700) !important;
}

/* Make button text never clip and keep good contrast */
.btn, .btn-outline, .btn-ghost, .btn-small{
  line-height: 1.1;
  white-space: nowrap;
}

/* Solid buttons on dark cards: always white text */
.course-section .btn{
  color: #fff;
}

/* Enhanced Course Cards with Orange Accents */
.course-section{
  position:relative;
  overflow:hidden;
  transition:all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
  border:2px solid rgba(255,167,38,.2);
  will-change:transform, box-shadow;
}
.course-section::before{
  content:'';
  position:absolute;
  top:50%;left:50%;
  width:0;height:0;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,167,38,0.12) 0%, transparent 70%);
  transform:translate(-50%, -50%);
  transition:width 0.6s ease, height 0.6s ease;
  opacity:0;
  pointer-events:none;
  z-index:0;
}
.course-section:hover::before{
  width:600px;
  height:600px;
  opacity:1;
}
.course-section:hover{
  transform:translateY(-8px) scale(1.01);
  box-shadow:0 20px 40px rgba(255,167,38,.3), 0 0 0 2px rgba(255,167,38,.5);
  border-color:rgba(255,167,38,.6);
}
.course-section > *{
  position:relative;
  z-index:1;
}

/* Badge Animations */
.badge-new{
  background:linear-gradient(135deg, #10b981 0%, #059669 100%);
  color:#fff;
  padding:.25rem .6rem;
  border-radius:6px;
  font-size:.75rem;
  font-weight:700;
  animation:pulse 2s ease-in-out infinite;
  box-shadow:0 2px 8px rgba(16,185,129,.3);
}

/* Level Chip Enhanced */
.chip-level{
  padding:.3rem .7rem;
  border-radius:6px;
  font-size:.75rem;
  font-weight:700;
  background:linear-gradient(135deg, rgba(255,167,38,.15) 0%, rgba(255,138,0,.15) 100%);
  border:1px solid rgba(255,167,38,.3);
  color:rgba(255,167,38,.95);
}

/* Details <summary> arrow + text contrast on dark */
details.progress-form summary{
  color: var(--accent);
  font-weight: 600;
}

/* Legacy light-mode button styles — keep but scope so they don't override
   the new gradient buttons used across the dark theme. */
body.light-mode .btn {
  background: var(--brand);
  color: #fff;
  border: none;
  padding: .6rem 1.2rem;
  border-radius: .4rem;
  font-weight: 600;
  transition: background 0.3s, color 0.3s;
}

body.light-mode .btn-outline {
  background: transparent;
  border: 2px solid var(--brand);
  color: var(--brand);
}

body.light-mode .btn-ghost {
  background: transparent;
  color: var(--brand);
  opacity: 0.85;
}

/* Optional dark-mode override for legacy light mode, not used by current theme */
body.light-mode.dark-mode .btn {
  background: #2196F3;
  color: #fff;
}

body.light-mode.dark-mode .btn-outline {
  border-color: #90CAF9;
  color: #90CAF9;
}

body.light-mode.dark-mode .btn-ghost {
  color: #BBDEFB;
}


.curriculum { margin-top: 10px; }
.module-block { margin: 14px 0 20px; }
.module-header {
  margin: 18px 0 8px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  border-left: 4px solid var(--accent);
  padding-left: .6rem;
}

.module-sub { color: var(--muted); font-weight: 500; margin-left: .25rem; }
.lesson-list { list-style: none; padding: 0; margin: 0; }
.lesson-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .5rem;
  align-items: center;
  padding: .65rem .75rem;
  border: 1px solid var(--border);
  border-radius: .6rem;
  background: var(--surface);
  margin: .45rem 0;
}
  
.lesson-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.duration-badge {
  font-size: .9rem;
  color: var(--muted);
  margin-left: .75rem;
  white-space: nowrap;
}

/* === Brand glyph as dropdown trigger === */
/* NOTE: Enhanced .avatar-btn styles are defined earlier in this file (line ~1082) */
/* The following are only for specific use cases that don't use the enhanced version */

.avatar-btn:not(.profile-orb-trigger) .brand-glyph {
  width: 28px; height: 28px;
  display: block; object-fit: contain;
  border-radius: 6px; /* optional */
}

/* DO NOT override ::after - it's used for energy wave animations in enhanced version */

/* Optional: focus outline for a11y */
.avatar-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* === Use brand glyph instead of tiny “caret” on nav items with dropdowns === */
/* If your nav items use .has-dropdown or aria-haspopup, use either selector */
.btn-nav.has-dropdown::after,
.btn-nav[aria-haspopup="true"]::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  background: url("assets/brand-glyph.png") no-repeat center / contain;
  vertical-align: -2px;
  opacity: 0.9;           /* tweak to taste */
}

/* If your CSS rotates the caret on open, disable that for the glyph */
.btn-nav[aria-expanded="true"]::after {
  transform: none !important;
}

/* Optional: dark-mode polish (if you invert icons normally, skip for PNG) */
@media (prefers-color-scheme: dark) {
  /* Enhanced .avatar-btn already has proper background - no override needed */
  .btn-nav.has-dropdown::after,
  .btn-nav[aria-haspopup="true"]::after {
    opacity: 1;
  }
}

/* Optional: smaller brand glyph on narrow screens */
@media (max-width: 640px) {
  .profile-orb-trigger.avatar-btn {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
  }
  .profile-neural-canvas {
    width: 50px;
    height: 50px;
  }
.avatar-btn:not(.profile-orb-trigger) img.brand-logo,
.avatar-btn:not(.profile-orb-trigger) img { 
    width: 64px !important; 
    height: 64px !important; 
    max-width: 64px !important;
    max-height: 64px !important;
  }
}

/* ----- Subnav chips: higher contrast + clearer affordance ----- */
.subnav{
  display:flex;
  justify-content:center;
  gap:.6rem;
  flex-wrap:wrap;
  margin:12px auto 18px;
  padding:6px 10px;
}

.subnav .chip{
  --chip-bg: rgba(255,167,38,0.1);
  --chip-border: rgba(255,167,38,0.3);
  --chip-text: #FFA726;

  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:.5rem 1rem;
  border:2px solid var(--chip-border);
  border-radius:999px;

  background:var(--chip-bg);
  color:var(--chip-text);
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.2px;
  text-decoration:none;

  box-shadow:0 2px 8px rgba(0,0,0,.18), inset 0 0 0 1px rgba(55,192,255,.03);
  transition:all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  will-change:transform;
}

.subnav .chip::before{
  content:'';
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  background:linear-gradient(135deg, rgba(255,167,38,0.3) 0%, rgba(255,138,0,0.3) 100%);
  background-size:200% 200%;
  opacity:0;
  transition:opacity 0.3s ease;
  animation:gradientShift 3s ease infinite;
}

.subnav .chip:hover{
  background:linear-gradient(135deg, #FFA726 0%, #FF8A00 100%);
  color:#fff;
  border-color:#FF8A00;
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(255,138,0,.3), 0 4px 12px rgba(0,0,0,.15);
}

.subnav .chip:hover::before{
  opacity:1;
}

.subnav .chip:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px rgba(255,167,38,.2),
    0 0 0 6px rgba(255,167,38,.4);
}

.subnav .chip.is-active{
  background:linear-gradient(135deg, #FFA726 0%, #FF8A00 100%);
  color:#fff;
  border-color:#FF8A00;
  animation:bounce 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* ======================================================================
   Custom Scrollbar Styling
   ====================================================================== */
::-webkit-scrollbar{
  width:12px;
  height:12px;
}
::-webkit-scrollbar-track{
  background:rgba(0,0,0,.05);
  border-radius:10px;
}
::-webkit-scrollbar-thumb{
  background:linear-gradient(135deg, #FFA726 0%, #FF8A00 100%);
  border-radius:10px;
  border:2px solid rgba(55,192,255,.08);
}
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(135deg, #FFB74D 0%, #FFA726 100%);
}
@media (prefers-color-scheme:dark){
  ::-webkit-scrollbar-track{
    background:rgba(0,0,0,.3);
  }
}

/* ======================================================================
   Logo Animation (Enhanced with glow effects - CONTAINED & OPTIMIZED)
   ====================================================================== */
.brand-logo{
  width:64px !important;
  height:64px !important;
  border-radius:14px;
  box-shadow:
    0 0 28px rgba(55,192,255,.7),
    0 0 48px rgba(168,85,247,.5),
    0 0 24px rgba(255,138,0,.5),
    0 10px 28px rgba(0,0,0,.4);
  transition:all .4s cubic-bezier(.2,.8,.2,1);
  filter:brightness(1.1) saturate(1.2);
  position:relative;
  will-change:transform;
  backface-visibility:hidden;
  transform-origin:center center;
  contain: layout style paint; /* Better rendering performance */
}
.logo-animated{
  animation:logoFloatContained 3s ease-in-out infinite, logoPulse 2s ease-in-out infinite;
}
.brand:hover .brand-logo,
.brand-logo:hover{
  transform:rotate(-5deg) scale(1.08);
  box-shadow:
    0 0 40px rgba(55,192,255,.9),
    0 0 65px rgba(168,85,247,.7),
    0 0 35px rgba(255,138,0,.7),
    0 12px 30px rgba(0,0,0,.5);
  filter:brightness(1.2) saturate(1.3);
}

/* Subtle float animation - fully contained */
@keyframes logoFloatContained{
  0%,100%{transform:translateY(0) rotate(0deg) scale(1)}
  50%{transform:translateY(-3px) rotate(1deg) scale(1.02)}
}
@keyframes logoPulse{
  0%,100%{
    box-shadow:
      0 0 24px rgba(55,192,255,.6),
      0 0 40px rgba(168,85,247,.4),
      0 0 20px rgba(255,138,0,.4),
      0 8px 24px rgba(0,0,0,.4);
  }
  50%{
    box-shadow:
      0 0 35px rgba(55,192,255,.8),
      0 0 55px rgba(168,85,247,.6),
      0 0 30px rgba(255,138,0,.6),
      0 8px 24px rgba(0,0,0,.4);
  }
}

/* ======================================================================
   Scroll to Top Button (Sitewide)
   ====================================================================== */
.scroll-to-top{
  position:fixed !important;
  bottom:24px !important;
  left:24px !important;
  width:52px !important;
  height:52px !important;
  background:linear-gradient(135deg, var(--accent), var(--orange-500)) !important;
  border:none !important;
  border-radius:50% !important;
  color:#062237 !important;
  cursor:pointer !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow:
    0 8px 24px rgba(55,192,255,0.4),
    0 4px 12px rgba(255,138,0,0.3) !important;
  transition:all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
  z-index:99998 !important;
  opacity:0;
  transform:translateY(20px) scale(0.8);
  pointer-events:none;
  /* Explicitly prevent white color inheritance */
  --button-color: #062237 !important;
  --svg-stroke-color: #062237 !important;
}
/* Force dark arrow - override any global SVG styles */
.scroll-to-top,
.scroll-to-top svg,
.scroll-to-top svg path,
button.scroll-to-top,
button.scroll-to-top svg,
button.scroll-to-top svg path,
#scrollToTop,
#scrollToTop svg,
#scrollToTop svg path{
  --svg-stroke: #062237 !important;
  --svg-fill: none !important;
  --svg-color: #062237 !important;
}
.scroll-to-top.visible{
  opacity:1 !important;
  transform:translateY(0) scale(1) !important;
  pointer-events:auto !important;
}
.scroll-to-top:hover{
  transform:translateY(-4px) scale(1.05);
  box-shadow:
    0 12px 32px rgba(55,192,255,0.5),
    0 6px 16px rgba(255,138,0,0.4);
}
.scroll-to-top:active{
  transform:translateY(-2px) scale(1);
}
/* Force dark arrow - highest specificity to override any global styles */
.scroll-to-top svg,
.scroll-to-top svg *,
.scroll-to-top svg path,
button.scroll-to-top svg,
button.scroll-to-top svg *,
button.scroll-to-top svg path,
#scrollToTop svg,
#scrollToTop svg *,
#scrollToTop svg path,
button#scrollToTop svg,
button#scrollToTop svg *,
button#scrollToTop svg path{
  width:24px !important;
  height:24px !important;
  stroke:#062237 !important;
  fill:none !important;
  color:#062237 !important;
  stroke-width:2.5 !important;
}
.scroll-to-top svg path,
button.scroll-to-top svg path,
#scrollToTop svg path,
button#scrollToTop svg path{
  stroke:#062237 !important;
  fill:none !important;
  color:#062237 !important;
  stroke-width:2.5 !important;
}
.scroll-to-top *,
button.scroll-to-top *,
#scrollToTop *,
button#scrollToTop *{
  color:#062237 !important;
}
/* Prevent white color inheritance */
.scroll-to-top,
button.scroll-to-top,
#scrollToTop,
button#scrollToTop{
  color:#062237 !important;
}
.scroll-to-top svg,
button.scroll-to-top svg,
#scrollToTop svg,
button#scrollToTop svg{
  color:#062237 !important;
  stroke:#062237 !important;
}
/* Ensure scroll button is never affected by any button color rules */
button.scroll-to-top,
button#scrollToTop {
  color: #062237 !important;
}
button.scroll-to-top *,
button#scrollToTop * {
  color: #062237 !important;
}
/* Maximum specificity - override any global SVG or color rules */
button.scroll-to-top[id="scrollToTop"] svg,
button.scroll-to-top[id="scrollToTop"] svg *,
button.scroll-to-top[id="scrollToTop"] svg path,
button#scrollToTop[class="scroll-to-top"] svg,
button#scrollToTop[class="scroll-to-top"] svg *,
button#scrollToTop[class="scroll-to-top"] svg path,
body button.scroll-to-top svg,
body button.scroll-to-top svg *,
body button.scroll-to-top svg path,
html body button.scroll-to-top svg,
html body button.scroll-to-top svg *,
html body button.scroll-to-top svg path{
  stroke:#062237 !important;
  fill:none !important;
  color:#062237 !important;
  stroke-width:2.5 !important;
  --svg-stroke:#062237 !important;
  --svg-color:#062237 !important;
}
/* Explicitly prevent white color inheritance from any source */
.scroll-to-top,
.scroll-to-top *,
.scroll-to-top svg,
.scroll-to-top svg *,
.scroll-to-top svg path,
button.scroll-to-top,
button.scroll-to-top *,
button.scroll-to-top svg,
button.scroll-to-top svg *,
button.scroll-to-top svg path,
#scrollToTop,
#scrollToTop *,
#scrollToTop svg,
#scrollToTop svg *,
#scrollToTop svg path,
button#scrollToTop,
button#scrollToTop *,
button#scrollToTop svg,
button#scrollToTop svg *,
button#scrollToTop svg path{
  stroke: #062237 !important;
  color: #062237 !important;
  fill: none !important;
}
/* Override any potential currentColor inheritance */
.scroll-to-top svg[stroke],
.scroll-to-top svg path[stroke],
button.scroll-to-top svg[stroke],
button.scroll-to-top svg path[stroke],
#scrollToTop svg[stroke],
#scrollToTop svg path[stroke]{
  stroke: #062237 !important;
  color: #062237 !important;
}
/* Nuclear option - prevent white color from any source with maximum specificity */
html body button.scroll-to-top[id="scrollToTop"][aria-label="Scroll to top"] svg,
html body button.scroll-to-top[id="scrollToTop"][aria-label="Scroll to top"] svg *,
html body button.scroll-to-top[id="scrollToTop"][aria-label="Scroll to top"] svg path,
html body button#scrollToTop.scroll-to-top[aria-label="Scroll to top"] svg,
html body button#scrollToTop.scroll-to-top[aria-label="Scroll to top"] svg *,
html body button#scrollToTop.scroll-to-top[aria-label="Scroll to top"] svg path{
  stroke: #062237 !important;
  color: #062237 !important;
  fill: none !important;
  stroke-width: 2.5 !important;
}
/* Prevent white color specifically */
.scroll-to-top svg,
.scroll-to-top svg *,
.scroll-to-top svg path{
  stroke: #062237 !important;
  color: #062237 !important;
  fill: none !important;
}
.scroll-to-top svg[stroke="currentColor"],
.scroll-to-top svg path[stroke="currentColor"]{
  stroke: #062237 !important;
}
@media (max-width: 767px){
  .scroll-to-top{
    bottom:16px;
    left:16px;
    width:48px;
    height:48px;
  }
}