:root {
  --vuzix-ft-background: #090a0f;
  --vuzix-ft-card-background: rgba(20, 22, 28, 0.7);
  --vuzix-ft-border: rgba(255, 255, 255, 0.1);

  --vuzix-ft-primary: #7ff02b;
  --vuzix-ft-primary-hover: #68d91c;

  --vuzix-ft-text: #f1f5f9;
  --vuzix-ft-muted: #94a3b8;
}


/* =========================================================
   FOOTER SUPPORT
========================================================= */

.vuzix-footer-support {
  padding: 6.75rem 0 4rem;

  border-top: 1px solid var(--vuzix-ft-border);
  border-bottom: 1px solid var(--vuzix-ft-border);

  background: var(--vuzix-ft-background);
  color: var(--vuzix-ft-text);

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


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

.vuzix-footer-support__container {
  box-sizing: border-box;

  width: min(100%, 1688px);

  margin: 0 auto;

  padding: 0 24px;
}


/* =========================================================
   SECTION TITLE
========================================================= */

.vuzix-footer-support__title {
  margin: 0 0 2rem;

  color: #a8adb5;

  font-size: clamp(1.05rem, 1vw, 1.2rem);

  font-weight: 600;

  line-height: 1.3;

  letter-spacing: 0.03em;

  text-transform: uppercase;
}


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

.vuzix-footer-support__grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 1.125rem;
}


/* =========================================================
   SUPPORT CARD
========================================================= */

.vuzix-support-card {
  display: flex;

  min-width: 0;

  flex-direction: column;

  gap: 1rem;

  box-sizing: border-box;

  min-height: 256px;

  padding: 1.75rem;

  border: 1px solid #d3d7dc;

  border-radius: 13px;

  background: var(--vuzix-ft-card-background);

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


.vuzix-support-card:hover {
  border-color: var(--vuzix-ft-primary);

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.4),
    0 0 15px rgba(127, 240, 43, 0.15);

  transform: translateY(-4px);
}


/* =========================================================
   CARD HEADER
========================================================= */

.vuzix-support-card__head {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1rem;
}


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

.vuzix-support-card__icon {
  color: var(--vuzix-ft-primary);

  font-size: clamp(1.5rem, 1.3vw, 1.75rem);

  line-height: 1;
}


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

.vuzix-support-card__badge {
  padding: 0.38rem 0.95rem;

  border: 1px solid #cbd0d6;

  border-radius: 999px;

  color: #b4b8bf;

  font-size: clamp(0.8rem, 0.7vw, 0.875rem);

  font-weight: 600;

  line-height: 1.2;

  letter-spacing: 0.025em;

  text-transform: uppercase;

  white-space: nowrap;
}


.vuzix-support-card__badge--hot {
  border-color: var(--vuzix-ft-primary);

  color: var(--vuzix-ft-primary);
}


/* =========================================================
   CARD NAME
========================================================= */

.vuzix-support-card__name {
  margin: 0;

  color: var(--vuzix-ft-text);

  font-size: clamp(1.25rem, 1.15vw, 1.6rem);

  font-weight: 600;

  line-height: 1.3;

  letter-spacing: 0.01em;

  text-transform: uppercase;
}


/* =========================================================
   ADDRESS / DESCRIPTION
========================================================= */

.vuzix-support-card__address,
.vuzix-support-card__description {
  margin: 0;

  color: #a5aab2;

  font-size: clamp(1rem, 0.9vw, 1.4rem);

  font-weight: 500;

  line-height: 1.6;
}


/* =========================================================
   CARD FOOTER
========================================================= */

.vuzix-support-card__footer {
  margin-top: auto;

  padding-top: 1rem;

  border-top: 1px solid #cbd0d6;
}


/* =========================================================
   TELEPHONE
========================================================= */

.vuzix-support-card__tel {
  display: inline-flex;

  align-items: center;

  color: #e2e5e9;

  font-size: clamp(1.2rem, 1.1vw, 1.4rem);

  font-weight: 700;

  line-height: 1.4;

  text-decoration: none;

  transition: color 0.2s ease;
}


.vuzix-support-card__tel:hover {
  color: var(--vuzix-ft-primary);

  text-decoration: underline;
}


/* =========================================================
   HIGHLIGHT CARD
========================================================= */

.vuzix-support-card--highlight {
  border-color: #d3d7dc;

  background:
    linear-gradient(
      180deg,
      rgba(127, 240, 43, 0.05),
      var(--vuzix-ft-card-background)
    );
}


/* =========================================================
   HOTLINE BUTTON
========================================================= */

.vuzix-support-card__hotline {
  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  box-sizing: border-box;

  padding: 1.05rem 1.35rem;

  border-radius: 8px;

  background: var(--vuzix-ft-primary);

  color: #000;

  font-size: clamp(1.25rem, 1.1vw, 1.45rem);

  font-weight: 700;

  line-height: 1.25;

  letter-spacing: 0.01em;

  text-align: center;

  text-decoration: none;

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


.vuzix-support-card__hotline:hover {
  background: var(--vuzix-ft-primary-hover);

  box-shadow: 0 8px 24px rgba(127, 240, 43, 0.16);

  transform: scale(1.02);
}


/* =========================================================
   TABLET / SMALL DESKTOP
========================================================= */

@media (min-width: 901px) and (max-width: 1400px) {

  .vuzix-footer-support {
    padding-top: 5rem;
  }

  .vuzix-footer-support__container {
    padding-right: 40px;
    padding-left: 40px;
  }

  .vuzix-support-card {
    padding: 1.6rem;
  }

}


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

@media (max-width: 900px) {

  .vuzix-footer-support {
    padding: 4rem 0;
  }

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

    gap: 1rem;
  }

  .vuzix-support-card {
    min-height: 0;
  }

}


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

@media (max-width: 600px) {

  .vuzix-footer-support {
    padding: 3rem 0;
  }

  .vuzix-footer-support__container {
    padding: 0 20px;
  }


  /* Section title */

  .vuzix-footer-support__title {
    margin-bottom: 1.5rem;

    font-size: 1.05rem;

    line-height: 1.3;
  }


  /* Card */

  .vuzix-support-card {
    gap: 0.9rem;

    padding: 1.5rem;

    border-radius: 11px;
  }


  /* Icon */

  .vuzix-support-card__icon {
    font-size: 1.45rem;
  }


  /* Badge */

  .vuzix-support-card__badge {
    padding: 0.32rem 0.8rem;

    font-size: 0.78rem;
  }


  /* Name */

  .vuzix-support-card__name {
    font-size: 1.25rem;

    line-height: 1.35;
  }


  /* Address */

  .vuzix-support-card__address,
  .vuzix-support-card__description {
    font-size: 1rem;

    line-height: 1.55;
  }


  /* Phone */

  .vuzix-support-card__tel {
    font-size: 1.1rem;
  }


  /* Hotline */

  .vuzix-support-card__hotline {
    padding: 1rem 1.15rem;

    font-size: 1.25rem;
  }

}


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

@media (max-width: 380px) {

  .vuzix-footer-support__container {
    padding: 0 16px;
  }

  .vuzix-support-card {
    padding: 1.25rem;
  }

  .vuzix-support-card__head {
    gap: 0.75rem;
  }

  .vuzix-support-card__badge {
    padding: 0.3rem 0.7rem;

    font-size: 0.72rem;
  }

  .vuzix-support-card__name {
    font-size: 1.18rem;
  }

  .vuzix-support-card__address,
  .vuzix-support-card__description {
    font-size: 0.96rem;
  }

  .vuzix-support-card__tel {
    font-size: 1.05rem;
  }

  .vuzix-support-card__hotline {
    font-size: 1.18rem;
  }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

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

  .vuzix-support-card,
  .vuzix-support-card__hotline,
  .vuzix-support-card__tel {
    transition: none;
  }

}

body.vuzix-contact-open { overflow: hidden; }
.vuzix-contact-modal { position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; visibility:hidden; transition:opacity 180ms ease,visibility 180ms ease; font-family:Inter,system-ui,sans-serif; }
.vuzix-contact-modal[data-open="true"] { opacity:1; visibility:visible; }
.vuzix-contact-modal__overlay { position:absolute; inset:0; background:rgba(5,6,7,.85); backdrop-filter:blur(6px); }
.vuzix-contact-modal__panel { position:relative; z-index:1; box-sizing:border-box; width:min(100%,1100px); max-height:90vh; overflow-y:auto; padding:36px; border:1px solid #444a52; border-radius:12px; background:#0b0c10; color:#f4f4f5; box-shadow:0 25px 60px rgba(0,0,0,.6); }
.vuzix-contact-modal__close { position:absolute; top:18px; right:20px; border:0; background:none; color:#a1a1aa; font-size:32px; line-height:1; cursor:pointer; }
.vuzix-contact-modal__close:hover { color:#fff; }
.vuzix-contact-modal__panel h2 { margin:0 50px 8px 0; color:#f4f4f5; font-size:clamp(26px,3vw,36px); text-transform:uppercase; }
.vuzix-contact-modal__subtitle { margin:0 0 28px; color:#a1a1aa; font-size:15px; }
.vuzix-contact-modal__body { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:40px; }
.vuzix-contact-form { display:flex; flex-direction:column; gap:16px; }
.vuzix-contact-form label { display:flex; flex-direction:column; gap:7px; color:#a1a1aa; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.vuzix-contact-form input,.vuzix-contact-form textarea { box-sizing:border-box; width:100%; padding:12px 14px; border:1px solid #34343a; border-radius:8px; background:#141417; color:#e4e4e7; font:15px/1.4 inherit; text-transform:none; }
.vuzix-contact-form input:focus,.vuzix-contact-form textarea:focus { outline:2px solid #7ff02b; outline-offset:1px; }
.vuzix-contact-form textarea { resize:vertical; }
.vuzix-contact-form button[type="submit"] { align-self:flex-end; padding:12px 24px; border:2px solid #7ff02b; border-radius:8px; background:transparent; color:#7ff02b; font-weight:700; cursor:pointer; }
.vuzix-contact-form button[type="submit"]:hover { background:#7ff02b; color:#0b0c10; }
.vuzix-contact-form__note { margin:0; color:#8b8b94; font-size:12px; }
.vuzix-contact-form__note a,.vuzix-contact-side a { color:#7ff02b; text-decoration:none; }
.vuzix-contact-form__honeypot { position:absolute!important; left:-9999px!important; }
.vuzix-contact-side { display:flex; flex-direction:column; gap:12px; }
.vuzix-contact-side__item { padding:12px; border:1px solid transparent; border-radius:8px; background:rgba(255,255,255,.025); }
.vuzix-contact-side__item:hover { border-color:#7ff02b; background:rgba(127,240,43,.06); }
.vuzix-contact-side__item h3 { margin:0 0 6px; color:#a1a1aa; font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.vuzix-contact-side__item p { margin:0 0 6px; color:#e4e4e7; font-size:14px; line-height:1.45; }
.vuzix-contact-side__map { overflow:hidden; aspect-ratio:16/9; border:1px solid #34343a; border-radius:8px; }
.vuzix-contact-side__map iframe { display:block; width:100%; height:100%; border:0; filter:grayscale(.3) invert(.92) contrast(.9); }
.vuzix-contact-modal__notice { padding:12px 14px; border-radius:7px; }
.vuzix-contact-modal__notice--success { background:#173c25; color:#bdf3ca; }
.vuzix-contact-modal__notice--error { background:#492020; color:#ffd0d0; }
@media(max-width:768px){.vuzix-contact-modal__body{grid-template-columns:1fr}.vuzix-contact-modal__panel{padding:28px 20px}.vuzix-contact-modal{padding:12px}}