/* =========================================================
   CODERN
   FOOTER SYSTEM
   ---------------------------------------------------------
   Converted from old ART360Labs Footer.jsx

   Includes:
   - Footer background
   - Decorative glows
   - Final CTA
   - CTA buttons
   - Trust points
   - Brand section
   - Quick links
   - Services
   - Contact information
   - Bottom legal bar
   - Responsive layouts
   - Reduced motion support
========================================================= */


/* =========================================================
   FOOTER ROOT
========================================================= */

.site-footer {
  position: relative;
  width: 100%;
  overflow: hidden;

  border-top: 1px solid rgba(255, 255, 255, 0.10);

  background:
    radial-gradient(
      circle at 20% 0%,
      rgba(124, 58, 237, 0.08),
      transparent 32%
    ),
    radial-gradient(
      circle at 80% 100%,
      rgba(6, 182, 212, 0.06),
      transparent 32%
    ),
    #0a0e27;

  color: var(--text-primary, #ffffff);

  isolation: isolate;

  z-index: var(--z-base, 1);
}


/* =========================================================
   FOOTER BACKGROUND GLOW
========================================================= */

.footer-background-glow {
  position: absolute;
  inset: 0;

  overflow: hidden;

  pointer-events: none;

  z-index: 0;
}

.footer-glow {
  position: absolute;

  width: 20rem;
  height: 20rem;

  border-radius: 50%;

  filter: blur(70px);

  opacity: 0.7;

  pointer-events: none;
}

.footer-glow-primary {
  top: -10rem;
  left: 25%;

  background: rgba(124, 58, 237, 0.10);
}

.footer-glow-secondary {
  right: 25%;
  bottom: -8rem;

  background: rgba(6, 182, 212, 0.10);
}


/* =========================================================
   FOOTER CONTENT
========================================================= */

.footer-content {
  position: relative;
  z-index: 2;
}


/* =========================================================
   CONTAINER
========================================================= */

.footer-container {
  width: min(
    calc(100% - 2rem),
    1280px
  );

  margin-inline: auto;
}


/* =========================================================
   FINAL CTA SECTION
========================================================= */

.footer-cta-section {
  padding: 4rem 0 0;
}

.footer-cta {
  position: relative;

  overflow: hidden;

  padding: 3.5rem;

  text-align: center;

  border: 1px solid rgba(124, 58, 237, 0.20);

  border-radius: 1.5rem;

  background:
    linear-gradient(
      135deg,
      rgba(124, 58, 237, 0.10),
      rgba(255, 255, 255, 0.03),
      rgba(6, 182, 212, 0.10)
    );

  box-shadow:
    0 0 60px rgba(0, 212, 255, 0.08);
}


/* =========================================================
   CTA DECORATIVE GLOWS
========================================================= */

.footer-cta-glow {
  position: absolute;

  width: 15rem;
  height: 15rem;

  border-radius: 50%;

  filter: blur(65px);

  pointer-events: none;

  z-index: 0;
}

.footer-cta-glow-right {
  top: -5rem;
  right: -5rem;

  background: rgba(124, 58, 237, 0.10);
}

.footer-cta-glow-left {
  left: -5rem;
  bottom: -5rem;

  background: rgba(6, 182, 212, 0.10);
}


/* =========================================================
   CTA CONTENT
========================================================= */

.footer-cta-content {
  position: relative;

  z-index: 2;

  max-width: 900px;

  margin-inline: auto;
}


/* =========================================================
   AVAILABILITY BADGE
========================================================= */

.footer-availability-badge {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 0.5rem;

  margin-bottom: 1.25rem;

  padding: 0.5rem 1rem;

  border: 1px solid rgba(124, 58, 237, 0.20);

  border-radius: 999px;

  background: rgba(124, 58, 237, 0.10);

  color: var(
    --brand-primary,
    #7c3aed
  );

  font-size: 0.875rem;

  font-weight: 500;

  line-height: 1.25;
}


/* =========================================================
   AVAILABILITY DOT
========================================================= */

.footer-availability-dot {
  position: relative;

  display: inline-flex;

  width: 0.5rem;
  height: 0.5rem;

  flex: 0 0 auto;
}

.footer-availability-dot::before,
.footer-availability-dot::after,
.footer-availability-dot span {
  position: absolute;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  border-radius: 50%;

  background: #4ade80;

  content: "";
}

.footer-availability-dot::before {
  opacity: 0.25;

  animation:
    footer-ping 1.8s
    cubic-bezier(0, 0, 0.2, 1)
    infinite;
}

.footer-availability-dot::after {
  opacity: 0.55;

  animation:
    footer-ping 1.8s
    cubic-bezier(0, 0, 0.2, 1)
    infinite;

  animation-delay: 0.15s;
}

.footer-availability-dot span {
  position: relative;

  width: 0.5rem;
  height: 0.5rem;

  z-index: 2;
}


/* =========================================================
   CTA TITLE
========================================================= */

.footer-cta-title {
  max-width: 900px;

  margin: 0 auto;

  color: #ffffff;

  font-size: clamp(
    2rem,
    5vw,
    3.125rem
  );

  font-weight: 700;

  line-height: 1.15;

  letter-spacing: -0.035em;
}


/* =========================================================
   GRADIENT TEXT
========================================================= */

.footer-cta-title .gradient-text,
.footer-brand-name.gradient-text {
  background:
    linear-gradient(
      90deg,
      var(--brand-primary, #7c3aed),
      var(--brand-secondary, #06b6d4)
    );

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;

  color: transparent;
}


/* =========================================================
   CTA DESCRIPTION
========================================================= */

.footer-cta-description {
  max-width: 680px;

  margin: 1.25rem auto 0;

  color: rgba(255, 255, 255, 0.70);

  font-size: 1rem;

  line-height: 1.75;
}


/* =========================================================
   CTA ACTIONS
========================================================= */

.footer-cta-actions {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 1rem;

  margin-top: 2rem;
}


/* =========================================================
   PRIMARY CTA
========================================================= */

.footer-cta-primary,
.footer-cta-secondary {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 3.25rem;

  padding: 0.75rem 1.75rem;

  border-radius: 0.625rem;

  font-family: inherit;

  font-size: 1rem;

  font-weight: 600;

  line-height: 1;

  cursor: pointer;

  transition:
    transform 0.3s ease,
    background-color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    color 0.3s ease;
}

.footer-cta-primary {
  border: 1px solid
    var(--brand-primary, #7c3aed);

  background:
    var(--brand-primary, #7c3aed);

  color: #ffffff;

  box-shadow:
    0 10px 30px
    rgba(124, 58, 237, 0.20);
}

.footer-cta-primary:hover {
  background:
    var(--brand-primary-dark, #5b21b6);

  transform: translateY(-2px);

  box-shadow:
    0 14px 36px
    rgba(124, 58, 237, 0.28);
}

.footer-cta-primary:active,
.footer-cta-secondary:active {
  transform: scale(0.97);
}


/* =========================================================
   CTA ARROW
========================================================= */

.footer-cta-arrow {
  margin-left: 0.5rem;

  font-size: 1.25rem;

  transition:
    transform 0.3s ease;
}

.footer-cta-primary:hover
.footer-cta-arrow {
  transform: translateX(0.25rem);
}


/* =========================================================
   SECONDARY CTA
========================================================= */

.footer-cta-secondary {
  border: 1px solid rgba(255, 255, 255, 0.15);

  background: rgba(255, 255, 255, 0.05);

  color: #ffffff;
}

.footer-cta-secondary:hover {
  border-color: rgba(255, 255, 255, 0.22);

  background: rgba(255, 255, 255, 0.10);

  transform: translateY(-2px);
}


/* =========================================================
   WHATSAPP ICON
========================================================= */

.footer-whatsapp-icon {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  margin-right: 0.5rem;

  color:
    var(--brand-primary, #7c3aed);
}


/* =========================================================
   TRUST POINTS
========================================================= */

.footer-trust-points {
  display: flex;

  flex-wrap: wrap;

  align-items: center;
  justify-content: center;

  gap: 0.75rem 1.5rem;

  margin-top: 1.75rem;
}

.footer-trust-point {
  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  color: rgba(255, 255, 255, 0.50);

  font-size: 0.875rem;

  line-height: 1.4;
}

.footer-check-icon {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: 1rem;
  height: 1rem;

  color:
    var(--brand-primary, #7c3aed);

  font-size: 0.8rem;

  font-weight: 700;
}


/* =========================================================
   MAIN FOOTER
========================================================= */

.footer-main {
  padding-top: 5rem;
  padding-bottom: 2rem;
}


/* =========================================================
   FOOTER GRID
========================================================= */

.footer-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.5fr)
    minmax(0, 1fr)
    minmax(0, 1.2fr)
    minmax(0, 1.2fr);

  gap: 3rem;
}


/* =========================================================
   FOOTER BRAND
========================================================= */

.footer-brand {
  min-width: 0;
}

.footer-brand-link {
  display: inline-flex;

  align-items: center;

  gap: 0.75rem;

  padding: 0;

  border: 0;

  background: transparent;

  color: inherit;

  cursor: pointer;
}

.footer-logo-image {
  display: block;

  width: auto;
  height: 2.5rem;

  object-fit: contain;

  transition:
    transform 0.3s ease;
}

.footer-brand-link:hover
.footer-logo-image {
  transform: scale(1.05);
}

.footer-brand-name {
  font-size: 1.875rem;

  font-weight: 700;

  line-height: 1.2;
}


/* =========================================================
   BRAND DESCRIPTION
========================================================= */

.footer-brand-description {
  max-width: 25rem;

  margin-top: 1.25rem;

  color: rgba(255, 255, 255, 0.60);

  font-size: 0.9375rem;

  line-height: 1.75;
}


/* =========================================================
   FOOTER STATUS
========================================================= */

.footer-status {
  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  margin-top: 1.5rem;

  padding: 0.5rem 1rem;

  border: 1px solid rgba(255, 255, 255, 0.10);

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.03);

  color: rgba(255, 255, 255, 0.60);

  font-size: 0.875rem;
}

.footer-status-dot {
  width: 0.5rem;
  height: 0.5rem;

  flex: 0 0 auto;

  border-radius: 50%;

  background: #4ade80;

  animation:
    footer-pulse 2s ease-in-out infinite;
}


/* =========================================================
   FOOTER COLUMN
========================================================= */

.footer-column {
  min-width: 0;
}

.footer-column-title {
  margin: 0 0 1.25rem;

  color: #ffffff;

  font-size: 1.125rem;

  font-weight: 600;

  line-height: 1.4;
}


/* =========================================================
   QUICK LINKS
========================================================= */

.footer-links {
  display: flex;

  flex-direction: column;

  gap: 0.75rem;

  margin: 0;

  padding: 0;

  list-style: none;
}

.footer-links li {
  margin: 0;
  padding: 0;
}

.footer-links button {
  display: inline-flex;

  padding: 0;

  border: 0;

  background: transparent;

  color: rgba(255, 255, 255, 0.60);

  font: inherit;

  font-size: 0.875rem;

  line-height: 1.5;

  cursor: pointer;

  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.footer-links button:hover {
  color:
    var(--brand-primary, #7c3aed);

  transform: translateX(2px);
}


/* =========================================================
   SERVICES
========================================================= */

.footer-services {
  display: flex;

  flex-direction: column;

  gap: 0.75rem;

  margin: 0;

  padding: 0;

  list-style: none;
}

.footer-services li {
  margin: 0;
  padding: 0;
}

.footer-services button {
  display: flex;

  align-items: center;

  gap: 0.5rem;

  width: 100%;

  padding: 0;

  border: 0;

  background: transparent;

  color: rgba(255, 255, 255, 0.60);

  font: inherit;

  font-size: 0.875rem;

  line-height: 1.5;

  text-align: left;

  cursor: pointer;

  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.footer-services button:hover {
  color:
    var(--brand-primary, #7c3aed);

  transform: translateX(2px);
}

.footer-service-icon {
  flex: 0 0 auto;

  color:
    var(--brand-primary, #7c3aed);

  font-size: 0.75rem;

  opacity: 0.70;

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.footer-services button:hover
.footer-service-icon {
  opacity: 1;

  transform: scale(1.1);
}


/* =========================================================
   CONTACT
========================================================= */

.footer-contact-list {
  display: flex;

  flex-direction: column;

  gap: 1.25rem;
}

.footer-contact-item {
  display: flex;

  align-items: flex-start;

  gap: 0.75rem;

  min-width: 0;

  color: inherit;

  text-decoration: none;
}

.footer-contact-icon {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: 2.5rem;
  height: 2.5rem;

  flex: 0 0 2.5rem;

  border-radius: 0.5rem;

  background:
    rgba(124, 58, 237, 0.10);

  color:
    var(--brand-primary, #7c3aed);

  font-size: 1.15rem;

  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.footer-contact-item:hover
.footer-contact-icon {
  background:
    rgba(124, 58, 237, 0.18);

  transform: translateY(-1px);
}

.footer-contact-content {
  display: flex;

  flex-direction: column;

  min-width: 0;

  padding-top: 0.05rem;
}

.footer-contact-label {
  margin-bottom: 0.25rem;

  color: rgba(255, 255, 255, 0.40);

  font-size: 0.6875rem;

  font-weight: 500;

  line-height: 1.4;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}

.footer-contact-value {
  color: rgba(255, 255, 255, 0.70);

  font-size: 0.875rem;

  line-height: 1.5;

  overflow-wrap: anywhere;

  transition:
    color 0.2s ease;
}

.footer-contact-item:hover
.footer-contact-value {
  color:
    var(--brand-primary, #7c3aed);
}


/* =========================================================
   CONTACT CTA
========================================================= */

.footer-contact-cta {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 0.5rem;

  margin-top: 1.5rem;

  padding: 0.625rem 1rem;

  border: 1px solid transparent;

  border-radius: 0.5rem;

  background:
    rgba(124, 58, 237, 0.10);

  color:
    var(--brand-primary, #7c3aed);

  font-family: inherit;

  font-size: 0.875rem;

  font-weight: 500;

  line-height: 1.4;

  cursor: pointer;

  transition:
    background-color 0.2s ease,
    transform 0.2s ease,
    border-color 0.2s ease;
}

.footer-contact-cta:hover {
  background:
    rgba(124, 58, 237, 0.20);

  border-color:
    rgba(124, 58, 237, 0.20);

  transform: translateY(-1px);
}

.footer-contact-arrow {
  font-size: 1rem;

  transition:
    transform 0.2s ease;
}

.footer-contact-cta:hover
.footer-contact-arrow {
  transform: translateX(0.25rem);
}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

.footer-bottom {
  margin-top: 3.5rem;

  padding-top: 1.75rem;

  border-top:
    1px solid rgba(255, 255, 255, 0.10);
}

.footer-bottom-inner {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1.25rem;
}


/* =========================================================
   COPYRIGHT
========================================================= */

.footer-copyright {
  margin: 0;

  color: rgba(255, 255, 255, 0.50);

  font-size: 0.875rem;

  line-height: 1.5;
}

.footer-copyright-name {
  margin-left: 0.25rem;

  color: rgba(255, 255, 255, 0.70);

  font-weight: 500;
}


/* =========================================================
   LEGAL LINKS
========================================================= */

.footer-legal-links {
  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: center;

  gap: 1.25rem;
}

.footer-legal-link {
  color: rgba(255, 255, 255, 0.50);

  font-size: 0.875rem;

  text-decoration: none;

  transition:
    color 0.2s ease;
}

.footer-legal-link:hover {
  color:
    var(--brand-primary, #7c3aed);
}


/* =========================================================
   FOCUS STATES
========================================================= */

.footer-cta-primary:focus-visible,
.footer-cta-secondary:focus-visible,
.footer-brand-link:focus-visible,
.footer-links button:focus-visible,
.footer-services button:focus-visible,
.footer-contact-item:focus-visible,
.footer-contact-cta:focus-visible,
.footer-legal-link:focus-visible {
  outline: 2px solid
    var(--brand-primary-light, #a78bfa);

  outline-offset: 3px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  .footer-grid {
    grid-template-columns:
      minmax(0, 1.4fr)
      minmax(0, 1fr)
      minmax(0, 1.2fr);

    gap: 2.5rem;
  }

  .footer-contact {
    grid-column: 1 / -1;
  }

}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 900px) {

  .footer-cta {
    padding: 3rem 2rem;
  }

  .footer-main {
    padding-top: 4rem;
  }

  .footer-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 2.75rem 2rem;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-contact {
    grid-column: auto;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px) {

  .footer-container {
    width: min(
      calc(100% - 1.5rem),
      1280px
    );
  }

  .footer-cta-section {
    padding-top: 2.5rem;
  }

  .footer-cta {
    padding: 2.25rem 1.25rem;

    border-radius: 1.25rem;
  }

  .footer-cta-title {
    font-size: 2rem;

    letter-spacing: -0.025em;
  }

  .footer-cta-description {
    margin-top: 1rem;

    font-size: 0.9375rem;
  }

  .footer-cta-actions {
    flex-direction: column;

    width: 100%;

    margin-top: 1.5rem;
  }

  .footer-cta-primary,
  .footer-cta-secondary {
    width: 100%;

    min-height: 3.125rem;
  }

  .footer-trust-points {
    flex-direction: column;

    align-items: center;

    gap: 0.65rem;

    margin-top: 1.5rem;
  }

  .footer-main {
    padding-top: 3.5rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;

    gap: 2.5rem;
  }

  .footer-brand,
  .footer-contact {
    grid-column: auto;
  }

  .footer-brand-name {
    font-size: 1.6rem;
  }

  .footer-brand-description {
    max-width: none;
  }

  .footer-bottom {
    margin-top: 2.75rem;

    padding-top: 1.5rem;
  }

  .footer-bottom-inner {
    flex-direction: column;

    text-align: center;
  }

  .footer-copyright {
    text-align: center;
  }

  .footer-legal-links {
    gap: 1rem;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

  .footer-cta-title {
    font-size: 1.75rem;
  }

  .footer-availability-badge {
    font-size: 0.8rem;

    padding:
      0.45rem 0.8rem;
  }

  .footer-brand-link {
    gap: 0.6rem;
  }

  .footer-logo-image {
    height: 2.2rem;
  }

  .footer-brand-name {
    font-size: 1.4rem;
  }

  .footer-contact-value {
    font-size: 0.8125rem;
  }

  .footer-legal-links {
    flex-direction: column;

    gap: 0.75rem;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .footer-availability-dot::before,
  .footer-availability-dot::after,
  .footer-status-dot {
    animation: none;
  }

  .footer-cta-primary,
  .footer-cta-secondary,
  .footer-brand-link,
  .footer-logo-image,
  .footer-links button,
  .footer-services button,
  .footer-service-icon,
  .footer-contact-icon,
  .footer-contact-cta,
  .footer-contact-arrow,
  .footer-legal-link {
    transition: none;
  }

}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes footer-ping {

  0% {
    transform: scale(1);

    opacity: 0.55;
  }

  75%,
  100% {
    transform: scale(2.25);

    opacity: 0;
  }

}

@keyframes footer-pulse {

  0%,
  100% {
    opacity: 1;

    transform: scale(1);
  }

  50% {
    opacity: 0.55;

    transform: scale(0.88);
  }

}

/* =========================================================
   LIGHT MODE
   ---------------------------------------------------------
   Dark mode remains completely unchanged.
   Light mode converts:
   - Dark footer → light/white footer
   - Cyan accents → purple accents
   - Dark glass → white/light glass
   - White text → dark readable text
   - Cyan/purple glows → purple glows
========================================================= */

[data-theme="light"] .site-footer {
  border-top-color: rgba(124, 58, 237, 0.12);

  background:
    radial-gradient(
      circle at 20% 0%,
      rgba(124, 58, 237, 0.08),
      transparent 32%
    ),
    radial-gradient(
      circle at 80% 100%,
      rgba(168, 85, 247, 0.06),
      transparent 32%
    ),
    #ffffff;

  color: var(--text-primary, #17142b);
}


/* =========================================================
   LIGHT MODE — BACKGROUND GLOWS
========================================================= */

[data-theme="light"] .footer-glow-primary {
  background: rgba(124, 58, 237, 0.10);
}

[data-theme="light"] .footer-glow-secondary {
  background: rgba(168, 85, 247, 0.08);
}


/* =========================================================
   LIGHT MODE — FINAL CTA
========================================================= */

[data-theme="light"] .footer-cta {
  border-color: rgba(124, 58, 237, 0.18);

  background:
    linear-gradient(
      135deg,
      rgba(124, 58, 237, 0.08),
      rgba(255, 255, 255, 0.96),
      rgba(168, 85, 247, 0.08)
    );

  box-shadow:
    0 0 60px rgba(124, 58, 237, 0.08);
}


/* =========================================================
   LIGHT MODE — CTA GLOWS
========================================================= */

[data-theme="light"] .footer-cta-glow-right {
  background: rgba(124, 58, 237, 0.10);
}

[data-theme="light"] .footer-cta-glow-left {
  background: rgba(168, 85, 247, 0.08);
}


/* =========================================================
   LIGHT MODE — AVAILABILITY
========================================================= */

[data-theme="light"] .footer-availability-badge {
  border-color: rgba(124, 58, 237, 0.18);

  background: rgba(124, 58, 237, 0.08);

  color: var(
    --brand-primary,
    #7c3aed
  );
}


/* =========================================================
   LIGHT MODE — CTA TITLE
========================================================= */

[data-theme="light"] .footer-cta-title {
  color: #17142b;
}


/* =========================================================
   LIGHT MODE — GRADIENT TEXT
========================================================= */

[data-theme="light"]
.footer-cta-title .gradient-text,
[data-theme="light"]
.footer-brand-name.gradient-text {
  background:
    linear-gradient(
      90deg,
      var(--brand-primary, #8b5cf6),
      var(--brand-secondary, #a855f7)
    );

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;

  color: transparent;
}


/* =========================================================
   LIGHT MODE — CTA DESCRIPTION
========================================================= */

[data-theme="light"] .footer-cta-description {
  color: rgba(23, 20, 43, 0.68);
}


/* =========================================================
   LIGHT MODE — PRIMARY CTA
========================================================= */

[data-theme="light"] .footer-cta-primary {
  border-color:
    var(--brand-primary, #8b5cf6);

  background:
    var(--brand-primary, #8b5cf6);

  color: #ffffff;

  box-shadow:
    0 10px 30px
    rgba(124, 58, 237, 0.20);
}

[data-theme="light"] .footer-cta-primary:hover {
  background:
    var(--brand-primary-dark, #7c3aed);

  box-shadow:
    0 14px 36px
    rgba(124, 58, 237, 0.28);
}


/* =========================================================
   LIGHT MODE — SECONDARY CTA
========================================================= */

[data-theme="light"] .footer-cta-secondary {
  border-color: rgba(23, 20, 43, 0.14);

  background: rgba(23, 20, 43, 0.04);

  color: #17142b;
}

[data-theme="light"] .footer-cta-secondary:hover {
  border-color: rgba(124, 58, 237, 0.24);

  background: rgba(124, 58, 237, 0.07);
}


/* =========================================================
   LIGHT MODE — WHATSAPP / ICONS
========================================================= */

[data-theme="light"] .footer-whatsapp-icon {
  color:
    var(--brand-primary, #8b5cf6);
}

[data-theme="light"] .footer-check-icon {
  color:
    var(--brand-primary, #8b5cf6);
}


/* =========================================================
   LIGHT MODE — TRUST POINTS
========================================================= */

[data-theme="light"] .footer-trust-point {
  color: rgba(23, 20, 43, 0.56);
}


/* =========================================================
   LIGHT MODE — BRAND
========================================================= */

[data-theme="light"] .footer-brand-description {
  color: rgba(23, 20, 43, 0.62);
}


/* =========================================================
   LIGHT MODE — STATUS
========================================================= */

[data-theme="light"] .footer-status {
  border-color: rgba(23, 20, 43, 0.10);

  background: rgba(23, 20, 43, 0.035);

  color: rgba(23, 20, 43, 0.62);
}


/* =========================================================
   LIGHT MODE — COLUMN TITLES
========================================================= */

[data-theme="light"] .footer-column-title {
  color: #17142b;
}


/* =========================================================
   LIGHT MODE — QUICK LINKS
========================================================= */

[data-theme="light"] .footer-links button {
  color: rgba(23, 20, 43, 0.62);
}

[data-theme="light"] .footer-links button:hover {
  color:
    var(--brand-primary, #8b5cf6);
}


/* =========================================================
   LIGHT MODE — SERVICES
========================================================= */

[data-theme="light"] .footer-services button {
  color: rgba(23, 20, 43, 0.62);
}

[data-theme="light"] .footer-services button:hover {
  color:
    var(--brand-primary, #8b5cf6);
}

[data-theme="light"] .footer-service-icon {
  color:
    var(--brand-primary, #8b5cf6);
}


/* =========================================================
   LIGHT MODE — CONTACT
========================================================= */

[data-theme="light"] .footer-contact-icon {
  background:
    rgba(124, 58, 237, 0.08);

  color:
    var(--brand-primary, #8b5cf6);
}

[data-theme="light"] .footer-contact-item:hover
.footer-contact-icon {
  background:
    rgba(124, 58, 237, 0.14);
}

[data-theme="light"] .footer-contact-label {
  color: rgba(23, 20, 43, 0.42);
}

[data-theme="light"] .footer-contact-value {
  color: rgba(23, 20, 43, 0.68);
}

[data-theme="light"] .footer-contact-item:hover
.footer-contact-value {
  color:
    var(--brand-primary, #8b5cf6);
}


/* =========================================================
   LIGHT MODE — CONTACT CTA
========================================================= */

[data-theme="light"] .footer-contact-cta {
  background:
    rgba(124, 58, 237, 0.08);

  color:
    var(--brand-primary, #8b5cf6);
}

[data-theme="light"] .footer-contact-cta:hover {
  background:
    rgba(124, 58, 237, 0.14);

  border-color:
    rgba(124, 58, 237, 0.18);
}


/* =========================================================
   LIGHT MODE — FOOTER BOTTOM
========================================================= */

[data-theme="light"] .footer-bottom {
  border-top-color:
    rgba(23, 20, 43, 0.10);
}


/* =========================================================
   LIGHT MODE — COPYRIGHT
========================================================= */

[data-theme="light"] .footer-copyright {
  color: rgba(23, 20, 43, 0.52);
}

[data-theme="light"] .footer-copyright-name {
  color: rgba(23, 20, 43, 0.70);
}


/* =========================================================
   LIGHT MODE — LEGAL LINKS
========================================================= */

[data-theme="light"] .footer-legal-link {
  color: rgba(23, 20, 43, 0.52);
}

[data-theme="light"] .footer-legal-link:hover {
  color:
    var(--brand-primary, #8b5cf6);
}


/* =========================================================
   LIGHT MODE — FOCUS
========================================================= */

[data-theme="light"]
.footer-cta-primary:focus-visible,
[data-theme="light"]
.footer-cta-secondary:focus-visible,
[data-theme="light"]
.footer-brand-link:focus-visible,
[data-theme="light"]
.footer-links button:focus-visible,
[data-theme="light"]
.footer-services button:focus-visible,
[data-theme="light"]
.footer-contact-item:focus-visible,
[data-theme="light"]
.footer-contact-cta:focus-visible,
[data-theme="light"]
.footer-legal-link:focus-visible {
  outline-color:
    var(--brand-primary-light, #a78bfa);
}