/* QuickSecure "Pop" theme
   Deep-space dark layer over the existing teal/orange palette.
   Loaded after each page's own <style> block so equal-specificity rules win. */

:root {
  /* Brand palette (unchanged hues, pushed brighter for glow on dark) */
  --primary: #0FC2C6;
  --secondary: #0A9396;
  --accent: #94D2BD;
  --warning: #EE9B00;
  --glow-teal: #2EF2E0;
  --glow-orange: #FFB020;

  /* Dark surfaces */
  --space-950: #00080C;
  --space-900: #001219;
  --space-800: #04202A;
  --glass: rgba(10, 40, 52, 0.45);
  --glass-strong: rgba(8, 32, 42, 0.72);
  --glass-border: rgba(148, 210, 189, 0.16);
  --glass-border-hot: rgba(46, 242, 224, 0.55);

  /* Remap the variables the page styles already use for text/lines */
  --neutral: #EAF6F4;
  --gray-50: rgba(255, 255, 255, 0.03);
  --gray-100: rgba(255, 255, 255, 0.06);
  --gray-200: rgba(148, 210, 189, 0.16);
  --gray-300: rgba(148, 210, 189, 0.28);
  --gray-400: #6F8D95;
  --gray-500: #86A3AA;
  --gray-600: #A7C0C5;
  --gray-900: #EAF6F4;

  color-scheme: dark;
}

html { background: var(--space-950); }

body {
  background: transparent;
  color: var(--neutral);
}

/* Animated starfield canvas (js/cosmos.js) sits behind everything. The
   nebula glows live here rather than on <html> with background-attachment:
   fixed, which repaints the whole viewport on every scroll. */
#cosmos {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1200px 700px at 85% -10%, rgba(10, 147, 150, 0.28), transparent 60%),
    radial-gradient(900px 600px at -10% 30%, rgba(0, 95, 115, 0.35), transparent 60%),
    radial-gradient(800px 500px at 70% 110%, rgba(238, 155, 0, 0.10), transparent 60%);
}

main, footer { position: relative; }

::selection { background: rgba(46, 242, 224, 0.35); color: #fff; }

/* Typography: light, oversized, airy — like the reference */
h1, h2 {
  font-weight: 300;
  letter-spacing: -0.02em;
  color: #F4FBFA;
}
h1 { font-size: clamp(2.4rem, 5.5vw, 4.4rem); line-height: 1.05; }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
h3, h4 { color: #F4FBFA; font-weight: 600; }
p { color: var(--gray-600); }
strong { color: #F4FBFA; }

.highlight,
.hero-content .highlight {
  background: linear-gradient(100deg, var(--glow-teal) 0%, var(--accent) 45%, var(--glow-orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 500;
  filter: drop-shadow(0 0 22px rgba(46, 242, 224, 0.35));
}

/* Navigation: floating glass pill */
.navbar {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  padding-top: 0.9rem;
}
.nav-container {
  max-width: 1160px;
  background: rgba(4, 22, 30, 0.55);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 0.55rem 0.6rem 0.55rem 1.4rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.navbar.scrolled { box-shadow: none; }
.navbar.scrolled .nav-container { background: rgba(2, 14, 20, 0.82); }
.logo-image { height: 32px; }
.logo-text, .logo { color: #F4FBFA; font-size: 1.35rem; }
.nav-link { color: rgba(234, 246, 244, 0.78); font-size: 0.95rem; }
.nav-link:hover, .nav-link.active { color: #fff; }
.nav-link::after { background: linear-gradient(90deg, var(--glow-teal), var(--glow-orange)); box-shadow: 0 0 10px var(--glow-teal); }
.nav-menu .btn { padding: 0.6rem 1.3rem; border-radius: 999px; }
.mobile-menu-toggle { color: #F4FBFA; }

/* Buttons */
.btn { border-radius: 999px; }
.btn-primary {
  background: linear-gradient(120deg, var(--glow-teal) 0%, var(--primary) 45%, var(--secondary) 100%);
  color: #001219;
  box-shadow: 0 0 0 1px rgba(46, 242, 224, 0.4), 0 8px 30px rgba(46, 242, 224, 0.35);
}
.btn-primary:hover {
  box-shadow: 0 0 0 1px rgba(46, 242, 224, 0.7), 0 10px 44px rgba(46, 242, 224, 0.55);
}
.btn-secondary {
  background: rgba(255, 255, 255, 0.04);
  color: #F4FBFA;
  border: 1px solid rgba(234, 246, 244, 0.28);
}
.btn-secondary:hover {
  background: rgba(238, 155, 0, 0.12);
  border-color: var(--glow-orange);
  color: #fff;
  box-shadow: 0 0 28px rgba(255, 176, 32, 0.3);
}

/* Section labels as glowing chips */
.label,
.section-header .label {
  display: inline-block;
  background: rgba(46, 242, 224, 0.08);
  color: var(--glow-teal);
  border: 1px solid rgba(46, 242, 224, 0.35);
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 0 18px rgba(46, 242, 224, 0.15);
}

/* Every page hero / section background goes transparent so the cosmos shows through */
.hero, .features, .cta, .stats,
.about-hero, .mission-section, .values-section, .team-section, .timeline-section,
.contact-hero, .contact-section, .office-section, .faq-section,
.features-hero, .feature-detail, .feature-detail:nth-child(even),
.pricing-hero, .pricing-section, .comparison-section {
  background: transparent;
}
.hero::before { display: none; }

/* Inline-styled light sections in the markup */
section[style*="background"],
section[style*="background: white"],
section[style*="#f8fafc"] {
  background: transparent !important;
}

/* Hero */
.hero { padding: 10rem 2rem 6rem; min-height: 92vh; display: flex; align-items: center; }
.hero-container { width: 100%; }
.hero-content p { color: var(--gray-600); }
.hero-image { aspect-ratio: 1 / 1; max-width: 560px; justify-self: center; width: 100%; }
.hero-orb { width: 100%; height: 100%; display: block; }

/* Glass cards (shared + per-page) */
.feature-card, .capability-card, .value-card, .team-card, .timeline-content,
.contact-card, .contact-form-container, .office-card, .faq-item,
.pricing-card, .comparison-table, .cta-container, .mission-image,
.feature-detail-image,
div[style*="background: white"] {
  background: linear-gradient(160deg, rgba(10, 42, 54, 0.9) 0%, rgba(3, 16, 22, 0.92) 100%) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  position: relative;
}

.feature-card, .capability-card, .value-card, .team-card, .contact-card,
.office-card, .pricing-card {
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.feature-card:hover, .capability-card:hover, .value-card:hover, .team-card:hover,
.contact-card:hover, .office-card:hover, .pricing-card:hover {
  border-color: var(--glass-border-hot) !important;
  box-shadow:
    0 0 0 1px rgba(46, 242, 224, 0.25),
    0 20px 60px rgba(0, 0, 0, 0.45),
    0 0 50px rgba(46, 242, 224, 0.18) !important;
}

/* Cursor-follow spotlight on cards (position set by cosmos.js) */
.feature-card::before, .capability-card::before, .value-card::before,
.pricing-card::before, .contact-card::before, .office-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(46, 242, 224, 0.13), transparent 45%);
}
.feature-card:hover::before, .capability-card:hover::before, .value-card:hover::before,
.pricing-card:hover::before, .contact-card:hover::before, .office-card:hover::before {
  opacity: 1;
}

.feature-icon, .value-icon, .contact-card-icon, .office-icon {
  background: radial-gradient(circle at 30% 30%, rgba(46, 242, 224, 0.35), rgba(10, 147, 150, 0.08) 70%) !important;
  border: 1px solid rgba(46, 242, 224, 0.35);
  box-shadow: 0 0 24px rgba(46, 242, 224, 0.25), inset 0 0 12px rgba(46, 242, 224, 0.15);
  color: #F4FBFA;
}
/* Step 2 keeps its orange identity */
.feature-icon[style*="238, 155, 0"] {
  background: radial-gradient(circle at 30% 30%, rgba(255, 176, 32, 0.45), rgba(202, 103, 2, 0.08) 70%) !important;
  border-color: rgba(255, 176, 32, 0.5);
  box-shadow: 0 0 24px rgba(255, 176, 32, 0.3);
}

/* Stats: glass strip of thin, glowing numbers */
.stats { padding: 4rem 2rem; }
.stats-container {
  background: rgba(4, 22, 30, 0.88);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  gap: 0;
}
.stat-item { padding: 0.5rem 1.5rem; text-align: left; border-left: 1px solid var(--glass-border); }
.stat-item:first-child { border-left: 0; }
.stat-item h3 {
  font-weight: 200;
  font-size: clamp(2.6rem, 5vw, 4rem);
  color: #F4FBFA;
  text-shadow: 0 0 30px rgba(46, 242, 224, 0.55);
  margin-bottom: 0.25rem;
}
.stat-item p { color: var(--gray-600); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.12em; }

/* CTA */
.cta-container {
  border-radius: 28px;
  overflow: hidden;
}
.cta-container::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -60%;
  width: 120%;
  height: 100%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(46, 242, 224, 0.25), transparent 60%);
  pointer-events: none;
}
.cta-container > * { position: relative; z-index: 1; }

/* Pricing specifics */
.pricing-card.featured {
  border-color: rgba(255, 176, 32, 0.6) !important;
  box-shadow: 0 0 0 1px rgba(255, 176, 32, 0.35), 0 0 60px rgba(255, 176, 32, 0.18), 0 20px 50px rgba(0, 0, 0, 0.4) !important;
}
.pricing-badge {
  background: linear-gradient(120deg, var(--glow-orange), #CA6702) !important;
  color: #001219 !important;
  box-shadow: 0 0 20px rgba(255, 176, 32, 0.5);
}
.price .amount { font-weight: 300; text-shadow: 0 0 24px rgba(46, 242, 224, 0.4); }
.toggle-switch { background: rgba(255, 255, 255, 0.12); }
.toggle-switch.active { background: var(--primary); box-shadow: 0 0 16px rgba(46, 242, 224, 0.5); }
.comparison-table th { background: rgba(46, 242, 224, 0.08) !important; }
.comparison-table td, .comparison-table th { border-color: var(--glass-border) !important; }

/* Forms */
.form-group input, .form-group select, .form-group textarea {
  background: rgba(0, 10, 14, 0.55);
  color: #F4FBFA;
  border: 1px solid var(--glass-border);
}
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--gray-400); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--glow-teal);
  box-shadow: 0 0 0 3px rgba(46, 242, 224, 0.15), 0 0 20px rgba(46, 242, 224, 0.2);
  outline: none;
}
.form-group select option { background: var(--space-900); }

/* Timeline (about) */
.timeline::before { background: linear-gradient(var(--glow-teal), var(--glow-orange)) !important; box-shadow: 0 0 12px rgba(46, 242, 224, 0.5); }
.timeline-dot { border-color: var(--space-900) !important; box-shadow: 0 0 0 4px var(--primary), 0 0 20px var(--glow-teal) !important; }

/* Legal pages */
.legal-content th { background: rgba(46, 242, 224, 0.08) !important; }
.legal-content a { color: var(--glow-teal); }

/* Inline SVG illustrations: flip light fills to glass */
.hero-image svg [fill="#ffffff"],
.feature-detail-image svg [fill="#ffffff"],
.mission-image svg [fill="#ffffff"],
.feature-detail-image svg [fill="white"],
.mission-image svg [fill="white"] { fill: rgba(10, 40, 52, 0.7); }
.feature-detail-image svg [fill="#f8fafc"],
.mission-image svg [fill="#f8fafc"] { fill: rgba(46, 242, 224, 0.06); }
.feature-detail-image svg [fill="#FFF8EC"] { fill: rgba(255, 176, 32, 0.08); stroke: rgba(255, 176, 32, 0.5); }
.feature-detail-image svg [fill="#e2e8f0"] { fill: rgba(148, 210, 189, 0.15); }
.feature-detail-image svg, .mission-image svg { filter: drop-shadow(0 0 24px rgba(46, 242, 224, 0.2)); }
.feature-detail-image svg text, .mission-image svg text { fill: #EAF6F4; }

/* Footer */
.footer {
  background: linear-gradient(180deg, transparent 0%, rgba(0, 6, 9, 0.9) 30%);
  border-top: 1px solid var(--glass-border);
}
.footer-brand h3 { color: var(--glow-teal); }
.footer-links a:hover { color: var(--glow-teal); }

/* Cookie consent banner: glass panel to match the cards */
.cookie-banner {
  background: linear-gradient(160deg, rgba(10, 42, 54, 0.96) 0%, rgba(3, 16, 22, 0.97) 100%);
  color: var(--neutral);
  border: 1px solid var(--glass-border-hot);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 40px rgba(46, 242, 224, 0.12);
}
.cookie-banner-text { color: var(--gray-600); }
.cookie-banner-text a { color: var(--glow-teal); }
.cookie-banner .btn:focus-visible,
.cookie-banner a:focus-visible,
.footer a:focus-visible { outline-color: var(--glow-teal); }
.footer-bottom a:hover { color: var(--glow-teal); }

/* Scroll reveal: a touch more drama than the default */
@keyframes popIn {
  from { opacity: 0; transform: translateY(28px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.fade-in-up { animation: popIn 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

/* Mobile */
/* Below desktop the hero stacks, so tuck the globe behind the copy
   instead of giving it a full screen of its own */
@media (max-width: 968px) {
  .hero { min-height: 0; padding: 7.5rem 1.5rem 3rem; }
  .hero-image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(620px, 140vw);
    max-width: none;
    transform: translate(-50%, -50%);
    opacity: 0.7;
    z-index: 0;
    pointer-events: none;
  }
  .hero-content { position: relative; z-index: 1; }
  .hero-content h1, .hero-content p { text-shadow: 0 2px 18px rgba(0, 8, 12, 0.9); }
}
@media (max-width: 768px) {
  .navbar { padding: 0.6rem 0.75rem 0; }
  .nav-container { padding: 0.45rem 0.6rem 0.45rem 1rem; }
  .nav-menu {
    top: 76px;
    background: rgba(2, 14, 20, 0.96);
    border-top: 1px solid var(--glass-border);
  }
  .stat-item { border-left: 0; border-top: 1px solid var(--glass-border); padding: 1.25rem 0.5rem; text-align: center; }
  .stat-item:first-child { border-top: 0; }
}

/* Lite mode (phones / low-spec hardware, set by cosmos.js): the nav is the
   only blurred surface, so drop that too. */
.fx-lite .nav-container {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(3, 18, 25, 0.92);
}

@media (prefers-reduced-motion: reduce) {
  .fade-in-up { animation: none; }
  .feature-card, .pricing-card { transition: none; }
}