/* wg:design-vars:start */
:root{--wg-surface:#090909;--wg-surface-alt:#1b1b1b;--wg-surface-inverse:#f8f8f8;--wg-ink:#f8f8f8;--wg-ink-muted:#d4d4d4;--wg-ink-inverse:#1b1b1b;--wg-primary:#f67271;--wg-primary-hover:#ffc3bf;--wg-primary-soft:#3a0005;--wg-accent:#47b6ae;--wg-accent-soft:#00201e;--wg-link:#ffc3bf;--wg-link-inverse:#810016;--wg-line:#2e2e2e;--wg-line-inverse:#e4e4e4;--wg-primary-on:#090909;--wg-accent-on:#090909;--wg-font-display:'Bitter', Georgia, 'Times New Roman', serif;--wg-font-body:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;--wg-radius-ui:8px;--wg-radius-card:12px;--wg-shadow-card:0 1px 2px rgba(0,0,0,.08), 0 4px 14px rgba(0,0,0,.06);--wg-section:6rem}
/* wg:design-vars:end */
/* ==========================================================================
   Virelto Tech — custom finishing touches
   ========================================================================== */

/* ---- Decorative: dotted/grid backgrounds ---- */
.bg-dot-grid {
  background-image: radial-gradient(var(--wg-line) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: 0 0;
}

.bg-grid-lines {
  background-image:
    linear-gradient(to right, var(--wg-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--wg-line) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ---- Mono-style small labels ---- */
.mono-label {
  font-family: var(--wg-font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 600;
}

/* ---- Soft glow behind key visuals ---- */
.glow-visual {
  position: relative;
  isolation: isolate;
}

.glow-visual::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -1;
  background: radial-gradient(circle at 50% 40%, var(--wg-primary-soft) 0%, transparent 70%);
  filter: blur(28px);
  opacity: 0.7;
  pointer-events: none;
}

.glow-visual-accent::before {
  background: radial-gradient(circle at 50% 40%, var(--wg-accent-soft) 0%, transparent 70%);
}

/* ==========================================================================
   Sticky header + scrolled state
   ========================================================================== */
#site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: box-shadow 0.3s ease, background-color 0.3s ease, padding 0.3s ease;
}

#site-header.is-scrolled {
  box-shadow: var(--wg-shadow-card);
}

#site-header .header-inner {
  transition: padding 0.3s ease;
}

#site-header.is-scrolled .header-inner {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

/* ==========================================================================
   Cookie banner — opacity/visibility fade only
   ========================================================================== */
#cookie-banner {
  transition: opacity 0.4s ease, visibility 0.4s ease;
  opacity: 0;
  visibility: hidden;
}

#cookie-banner:not(.hidden) {
  opacity: 1;
  visibility: visible;
}

#cookie-banner.hidden {
  opacity: 0;
  visibility: hidden;
}

/* ==========================================================================
   Forms — focus and error states
   ========================================================================== */
input,
textarea,
select {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--wg-primary);
  box-shadow: 0 0 0 3px var(--wg-primary-soft);
}

input.error,
textarea.error,
select.error {
  border-color: #fca5a5;
  box-shadow: 0 0 0 3px rgba(252, 165, 165, 0.15);
}

.error-message {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.82rem;
  font-weight: 500;
}

.form-success {
  font-size: 0.9rem;
  font-weight: 500;
}

/* ==========================================================================
   Keyframes & subtle animations
   ========================================================================== */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fade-in-up 0.6s ease both;
}

@keyframes pulse-glow {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

.animate-pulse-glow {
  animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-spin-slow {
  animation: spin-slow 12s linear infinite;
}

/* Accordion content transition */
.accordion-content {
  transition: opacity 0.25s ease;
}

.accordion-header i {
  transition: transform 0.25s ease;
}

.accordion-header[aria-expanded="true"] i {
  transform: rotate(180deg);
}

/* Back to top button */
#back-to-top {
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

#back-to-top:hover {
  transform: translateY(-3px);
}

/* Nav link underline interaction */
.nav-link {
  position: relative;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background-color: var(--wg-primary);
  transition: width 0.25s ease;
}

.nav-link:hover::after,
.nav-link.is-active::after {
  width: 100%;
}

/* Card hover lift (informational, non-selectable cards keep cursor-default) */
.card-hover {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card-hover:hover {
  transform: translateY(-4px);
}

/* ==========================================================================
   Print rules
   ========================================================================== */
@media print {
  #site-header,
  #cookie-banner,
  #back-to-top,
  #mobile-menu,
  footer .social-links {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
  }

  a {
    text-decoration: underline;
  }

  .section {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
}