/* ============================================
   VIGX — Global stylesheet
   1. Base & tokens   2. Header   3. Hero slider   4. Sections
   5. Video   6. Use-case panels   7. Reviews   8. Press   9. Award
   10. Footer
   ============================================ */

/* ============================================
   VIGX — Header
   ============================================ */

:root {
  --vigx-black: #000000;
  --vigx-red: #ef4123;
  --vigx-red-dark: #d33217;
  --vigx-white: #ffffff;
  --vigx-muted: rgba(255, 255, 255, 0.62);
  --vigx-border: rgba(255, 255, 255, 0.1);
  --vigx-hover: rgba(255, 255, 255, 0.06);

  --header-font: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --container: 1440px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--header-font);
  background: #070707;
  color: var(--vigx-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Proportional lining figures read cleaner in a corporate setting */
  font-feature-settings: "kern" 1, "liga" 1, "tnum" 0;
}

.vigx-container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 40px;
}

/* ============================================
   Header shell
   ============================================ */

/* Overlays the hero: transparent at rest, solid once the page scrolls under it */
.vigx-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  font-size: 15px;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease),
    backdrop-filter 0.3s var(--ease);
}

.vigx-header.is-scrolled,
.vigx-header.is-solid {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: var(--vigx-border);
}

.vigx-header a {
  color: inherit;
  text-decoration: none;
}

.vigx-header button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

/* ---- Legal notice ---- */

.vigx-notice {
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background-color 0.3s var(--ease);
}

.vigx-header.is-scrolled .vigx-notice,
.vigx-header.is-solid .vigx-notice {
  background: rgba(0, 0, 0, 0.35);
}

.vigx-notice__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-top: 9px;
  padding-bottom: 9px;
}

.vigx-notice__icon {
  flex-shrink: 0;
  color: #f0b429;
}

.vigx-notice__text {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
}

/* Dar ekranda uyarı birden çok satıra iner: ortalanmış satırlar tırtıklı
   görünüyor ve ikon blogun ortasında asılı kalıyordu. Metni sola hizalayıp
   ikonu ilk satırla aynı hizaya oturtuyoruz. */
@media (max-width: 640px) {
  .vigx-notice__inner {
    align-items: flex-start;
    justify-content: flex-start;
    gap: 9px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .vigx-notice__icon {
    margin-top: 1px;
  }

  .vigx-notice__text {
    text-align: left;
    font-size: 11px;
    line-height: 1.45;
    text-wrap: pretty;
  }
}

.vigx-header__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 84px;
  transition: height 0.3s var(--ease);
}

.vigx-header.is-scrolled .vigx-header__inner {
  height: 70px;
}

/* ============================================
   Logo
   ============================================ */

.vigx-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  line-height: 0;
}

.vigx-logo img {
  display: block;
  height: 38px;
  width: auto;
  transition: height 0.3s var(--ease);
}


.vigx-header.is-scrolled .vigx-logo img {
  height: 32px;
}

/* ============================================
   Primary nav
   ============================================ */

.vigx-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 auto;
}

.vigx-nav__item {
  position: relative;
}

.vigx-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 17px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.015em;
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}

.vigx-nav__link:hover,
.vigx-nav__link.is-active {
  color: var(--vigx-white);
}

/* Animated underline */
.vigx-nav__link::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 2px;
  height: 2px;
  background: var(--vigx-red);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease);
}

.vigx-nav__link:hover::after,
.vigx-nav__item.is-open > .vigx-nav__link::after,
.vigx-nav__link.is-active::after {
  transform: scaleX(1);
}

.vigx-nav__link.is-active {
  font-weight: 600;
}

.vigx-nav__link--accent {
  color: #58c8f5;
  font-weight: 600;
}

.vigx-nav__link--accent::after {
  background: #58c8f5;
}

.vigx-nav__caret {
  opacity: 0.65;
  transition: transform 0.25s var(--ease);
}

.vigx-nav__item.is-open .vigx-nav__caret {
  transform: rotate(180deg);
}

/* Dropdown */
.vigx-nav__dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  min-width: 300px;
  padding: 10px;
  margin: 0;
  list-style: none;
  background: rgba(18, 18, 18, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--vigx-border);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -10px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease),
    visibility 0.22s;
}

/* Invisible bridge so the pointer can travel into the dropdown */
.vigx-nav__dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}

.vigx-nav__item.is-open .vigx-nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.vigx-nav__dropdown a {
  display: block;
  padding: 12px 14px;
  border-radius: 10px;
  transition: background-color 0.16s var(--ease);
}

.vigx-nav__dropdown a:hover {
  background: var(--vigx-hover);
}

.vigx-nav__dropdown strong {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color 0.16s var(--ease);
}

.vigx-nav__dropdown a:hover strong {
  color: var(--vigx-red);
}

.vigx-nav__dropdown span {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--vigx-muted);
}

/* ============================================
   Right side
   ============================================ */

.vigx-tools {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}

/* Social */
.vigx-social {
  display: flex;
  align-items: center;
  gap: 2px;
}

.vigx-social__link {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--vigx-muted);
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.vigx-social__link:hover {
  color: var(--vigx-white);
  background: var(--vigx-hover);
}

/* CTA */
.vigx-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--vigx-red);
  color: var(--vigx-white);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}

.vigx-cta:hover {
  background: var(--vigx-red-dark);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(239, 65, 35, 0.35);
}

.vigx-cta svg {
  transition: transform 0.2s var(--ease);
}

.vigx-cta:hover svg {
  transform: translateX(3px);
}

/* ============================================
   Burger
   ============================================ */

.vigx-burger {
  display: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  color: var(--vigx-white);
  transition: background-color 0.2s var(--ease);
}

.vigx-burger:hover {
  background: var(--vigx-hover);
}

.vigx-burger__box {
  position: relative;
  width: 20px;
  height: 14px;
}

.vigx-burger__box span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.28s var(--ease), opacity 0.2s var(--ease);
}

.vigx-burger__box span:nth-child(1) { top: 0; }
.vigx-burger__box span:nth-child(2) { top: 6px; }
.vigx-burger__box span:nth-child(3) { top: 12px; }

.vigx-burger[aria-expanded="true"] .vigx-burger__box span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.vigx-burger[aria-expanded="true"] .vigx-burger__box span:nth-child(2) {
  opacity: 0;
}

.vigx-burger[aria-expanded="true"] .vigx-burger__box span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 1180px) {
  .vigx-container {
    padding: 0 24px;
  }

  .vigx-nav__link {
    padding: 10px 13px;
  }

  .vigx-social {
    display: none;
  }
}

@media (max-width: 960px) {
  .vigx-burger {
    display: grid;
  }

  .vigx-header__inner {
    height: 68px;
    gap: 16px;
  }

  .vigx-logo img,
  .vigx-header.is-scrolled .vigx-logo img {
    height: 30px;
  }

  .vigx-tools {
    margin-left: auto;
    gap: 10px;
  }

  .vigx-cta {
    display: none;
  }

  /* Nav becomes a full-height drawer */
  .vigx-nav {
    position: fixed;
    top: var(--header-h, 68px);
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 18px 24px 32px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease),
      visibility 0.25s;
  }

  .vigx-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .vigx-nav__link {
    justify-content: space-between;
    padding: 17px 4px;
    font-size: 15px;
    border-bottom: 1px solid var(--vigx-border);
  }

  .vigx-nav__link::after {
    display: none;
  }

  .vigx-nav__dropdown {
    position: static;
    display: none;
    min-width: 0;
    padding: 4px 0 10px 14px;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .vigx-nav__item.is-open .vigx-nav__dropdown {
    display: block;
    transform: none;
  }

  .vigx-nav__cta-mobile {
    display: flex;
    justify-content: center;
    margin-top: 26px;
  }

  .vigx-nav__cta-mobile .vigx-cta {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    height: 50px;
  }
}

.vigx-nav__cta-mobile {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .vigx-header *,
  .vigx-header {
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   VIGX — Hero slider
   ============================================ */

.vigx-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: #0a0a0a;
  isolation: isolate;
}

/* ---- Slides ---- */

.vigx-hero__slides {
  position: absolute;
  inset: 0;
}

.vigx-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s var(--ease), visibility 1s;
}

.vigx-hero__slide.is-active {
  opacity: 1;
  visibility: visible;
}

/* --focus is the subject's position in the photo. It drives both the cover
   crop and the Ken Burns origin, so the subject never drifts out of frame
   on wide viewports (where cover trims the top and bottom). */
.vigx-hero__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: var(--focus, 50% 50%);
  /* Stands in until the real photos land in upload/slider/ */
  background-color: #1a1d21;
  transform: scale(1.06);
  transform-origin: var(--focus, 50% 50%);
  transition: transform 8s linear;
}

.vigx-hero__slide:nth-child(1) .vigx-hero__media { background-color: #1c2b3a; }
.vigx-hero__slide:nth-child(2) .vigx-hero__media { background-color: #2a2320; }
.vigx-hero__slide:nth-child(3) .vigx-hero__media { background-color: #1e2a24; }

/* Slow Ken Burns push while a slide is on screen */
.vigx-hero__slide.is-active .vigx-hero__media {
  transform: scale(1);
}

/* Legibility: darken the frame, weight it toward the bottom */
.vigx-hero__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.15) 35%,
      rgba(0, 0, 0, 0.35) 70%,
      rgba(0, 0, 0, 0.75) 100%
    );
}

/* ---- Content ---- */

.vigx-hero__inner {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Cleared by the real header height, measured in JS — the notice bar makes it
     variable, and it changes again when the header shrinks on scroll. */
  padding-top: var(--header-h, 122px);
  padding-bottom: 120px;
}

.vigx-hero__content {
  max-width: 640px;
}

.vigx-hero__eyebrow,
.vigx-hero__title,
.vigx-hero__text,
.vigx-hero__actions {
  opacity: 0;
  transform: translateY(24px);
}

/* Staggered entrance, replayed on every slide change */
.vigx-hero__slide.is-active .vigx-hero__eyebrow,
.vigx-hero__slide.is-active .vigx-hero__title,
.vigx-hero__slide.is-active .vigx-hero__text,
.vigx-hero__slide.is-active .vigx-hero__actions {
  animation: vigx-rise 0.9s var(--ease) forwards;
}

.vigx-hero__slide.is-active .vigx-hero__eyebrow { animation-delay: 0.15s; }
.vigx-hero__slide.is-active .vigx-hero__title   { animation-delay: 0.3s; }
.vigx-hero__slide.is-active .vigx-hero__text    { animation-delay: 0.45s; }
.vigx-hero__slide.is-active .vigx-hero__actions { animation-delay: 0.6s; }

@keyframes vigx-rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.vigx-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 20px;
  padding: 6px 14px 6px 11px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}

.vigx-hero__eyebrow::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--vigx-red);
  box-shadow: 0 0 0 0 rgba(239, 65, 35, 0.7);
  animation: vigx-pulse 2.4s infinite;
}

@keyframes vigx-pulse {
  70% { box-shadow: 0 0 0 9px rgba(239, 65, 35, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 65, 35, 0); }
}

.vigx-hero__title {
  margin: 0 0 16px;
  font-size: clamp(30px, 3.4vw, 52px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}

.vigx-hero__title em {
  font-style: normal;
  color: var(--vigx-red);
}

.vigx-hero__text {
  margin: 0 auto 34px;
  max-width: 480px;
  font-size: clamp(14.5px, 1.05vw, 16px);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.005em;
  color: rgba(255, 255, 255, 0.72);
}

.vigx-hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.vigx-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--vigx-white);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.25s var(--ease), transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}

.vigx-btn svg {
  transition: transform 0.25s var(--ease);
}

.vigx-btn:hover svg {
  transform: translateX(4px);
}

.vigx-btn--primary {
  background: var(--vigx-red);
}

.vigx-btn--primary:hover {
  background: var(--vigx-red-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(239, 65, 35, 0.4);
}

.vigx-btn--ghost {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.vigx-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

/* ---- Arrows ---- */

.vigx-hero__arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-top: -26px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--vigx-white);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s var(--ease), background-color 0.2s var(--ease),
    border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.vigx-hero:hover .vigx-hero__arrow,
.vigx-hero__arrow:focus-visible {
  opacity: 1;
}

.vigx-hero__arrow:hover {
  background: var(--vigx-red);
  border-color: var(--vigx-red);
}

.vigx-hero__arrow--prev {
  left: 28px;
}

.vigx-hero__arrow--prev:hover {
  transform: translateX(-3px);
}

.vigx-hero__arrow--next {
  right: 28px;
}

.vigx-hero__arrow--next:hover {
  transform: translateX(3px);
}

/* ---- Dots ---- */

.vigx-hero__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 46px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.vigx-hero__dot {
  position: relative;
  width: 44px;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  overflow: hidden;
  transition: background-color 0.2s var(--ease);
}

.vigx-hero__dot:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* The fill doubles as the autoplay progress bar */
.vigx-hero__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--vigx-red);
  transform: scaleX(0);
  transform-origin: left;
}

.vigx-hero__dot.is-active::after {
  animation: vigx-progress var(--slide-duration, 6s) linear forwards;
}

.vigx-hero.is-paused .vigx-hero__dot.is-active::after {
  animation-play-state: paused;
}

@keyframes vigx-progress {
  to { transform: scaleX(1); }
}

/* ---- Scroll cue ---- */

.vigx-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 46px;
  z-index: 4;
  transform: translateX(-50%);
  display: none;
  color: rgba(255, 255, 255, 0.6);
  animation: vigx-bob 2s var(--ease) infinite;
}

@keyframes vigx-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 7px); }
}

/* ---- Responsive ---- */

@media (max-width: 960px) {
  .vigx-hero__inner {
    padding-bottom: 110px;
  }

  .vigx-hero__arrow {
    display: none;
  }

  .vigx-hero__slide::after {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.6) 0%,
      rgba(0, 0, 0, 0.3) 40%,
      rgba(0, 0, 0, 0.8) 100%
    );
  }
}

@media (max-width: 560px) {
  .vigx-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .vigx-btn {
    justify-content: center;
  }

  .vigx-hero__dot {
    width: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vigx-hero__media,
  .vigx-hero__scroll,
  .vigx-hero__eyebrow::before {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  .vigx-hero__slide.is-active .vigx-hero__eyebrow,
  .vigx-hero__slide.is-active .vigx-hero__title,
  .vigx-hero__slide.is-active .vigx-hero__text,
  .vigx-hero__slide.is-active .vigx-hero__actions {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ============================================
   VIGX — Content sections
   ============================================ */

.vigx-section {
  position: relative;
  padding: 120px 0;
}

/* Scroll reveal — elements start hidden and rise into place */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   Intro / philosophy
   ============================================ */

.vigx-intro {
  overflow: hidden;
  text-align: center;
}

/* Doubled class outranks the .vigx-section padding set in the media queries
   below, so the tight gap survives at every breakpoint. */
.vigx-section.vigx-intro {
  padding-bottom: 26px;
}

/* Soft red glow behind the statement */
.vigx-intro::before {
  content: "";
  position: absolute;
  top: -40%;
  left: 50%;
  width: 900px;
  height: 900px;
  transform: translateX(-50%);
  background: radial-gradient(
    circle,
    rgba(239, 65, 35, 0.13) 0%,
    rgba(239, 65, 35, 0) 62%
  );
  pointer-events: none;
}

.vigx-intro__inner {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0 auto;
}

.vigx-intro__title {
  margin: 0 0 22px;
  font-size: clamp(28px, 3.2vw, 46px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.vigx-intro__title em {
  font-style: normal;
  color: var(--vigx-red);
}

.vigx-intro__text {
  margin: 0 auto 34px;
  max-width: 620px;
  font-size: clamp(14.5px, 1.05vw, 16px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.66);
}

/* Philosophy pills */
.vigx-pills {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
}

.vigx-pills li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.vigx-pills li:hover {
  border-color: rgba(239, 65, 35, 0.5);
  background: rgba(239, 65, 35, 0.06);
}

.vigx-pills svg {
  color: var(--vigx-red);
  flex-shrink: 0;
}

/* ============================================
   Product grid
   ============================================ */

.vigx-section.vigx-products {
  padding-top: 26px;
  padding-bottom: 40px;
}

.vigx-products__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 48px;
}

.vigx-eyebrow {
  display: block;
  margin: 0 0 12px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vigx-red);
}

.vigx-products__title {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.vigx-products__all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}

.vigx-products__all:hover {
  color: var(--vigx-white);
}

.vigx-products__all svg {
  transition: transform 0.2s var(--ease);
}

.vigx-products__all:hover svg {
  transform: translateX(4px);
}

.vigx-products__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* ---- Card ---- */

.vigx-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.vigx-card__media {
  position: relative;
  aspect-ratio: 3 / 4;
  margin-bottom: 22px;
  border-radius: 18px;
  overflow: hidden;
  background: #15171a;
}

.vigx-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
  transition: transform 0.7s var(--ease);
}

.vigx-card:hover .vigx-card__media img {
  transform: scale(1.06);
}

/* Grounds the image against the dark page */
.vigx-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 55%,
    rgba(0, 0, 0, 0.45) 100%
  );
  pointer-events: none;
}

/* Corner badge */
.vigx-card__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.vigx-card__badge--accent {
  background: rgba(239, 65, 35, 0.9);
  border-color: transparent;
}

.vigx-card__title {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: color 0.2s var(--ease);
}

.vigx-card:hover .vigx-card__title {
  color: var(--vigx-red);
}

/* ---- Specs ---- */

.vigx-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.vigx-card__specs li {
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 6px;
  font-size: 11.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.vigx-card:hover .vigx-card__specs li {
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.75);
}

.vigx-card__specs strong {
  color: var(--vigx-white);
  font-weight: 600;
}

/* ---- Card link ---- */

.vigx-card__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-bottom: 5px;
  font-size: 13px;
  font-weight: 500;
  color: var(--vigx-white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  align-self: flex-start;
  transition: border-color 0.25s var(--ease), gap 0.25s var(--ease);
}

.vigx-card:hover .vigx-card__link {
  border-color: var(--vigx-red);
  gap: 11px;
}

/* ============================================
   Image + text
   ============================================ */

.vigx-section.vigx-feature {
  padding-top: 40px;
  padding-bottom: 30px;
}

.vigx-feature__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 72px;
}

/* ---- Media ---- */

.vigx-feature__media {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: 20px;
  overflow: hidden;
  background: #15171a;
}

.vigx-feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
  transition: transform 0.8s var(--ease);
}

.vigx-feature__media:hover img {
  transform: scale(1.05);
}

/* ---- Text ---- */

.vigx-feature__title {
  margin: 0 0 18px;
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.02em;
}

.vigx-feature__title em {
  font-style: normal;
  color: var(--vigx-red);
}

.vigx-feature__text {
  margin: 0 0 32px;
  max-width: 480px;
  font-size: clamp(14.5px, 1.05vw, 16px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.66);
}

/* ---- Benefit list ---- */

.vigx-feature__list {
  margin: 0 0 36px;
  padding: 0;
  list-style: none;
}

.vigx-feature__list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.vigx-feature__list li:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.vigx-feature__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: 1px solid rgba(239, 65, 35, 0.28);
  border-radius: 10px;
  background: rgba(239, 65, 35, 0.08);
  color: var(--vigx-red);
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.vigx-feature__list li:hover .vigx-feature__icon {
  background: rgba(239, 65, 35, 0.16);
  border-color: rgba(239, 65, 35, 0.5);
}

.vigx-feature__label {
  padding-top: 2px;
}

.vigx-feature__label strong {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.vigx-feature__label span {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.55);
}

/* ============================================
   Video
   ============================================ */

.vigx-section.vigx-video {
  padding-top: 30px;
}

.vigx-video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 22px;
  overflow: hidden;
  background: #101214;
  cursor: pointer;
}

.vigx-video__frame:focus-visible {
  outline: 2px solid var(--vigx-red);
  outline-offset: 3px;
}

/* Layer order inside the frame:
   0 poster · 1 muted background embed · 2 gradient · 3 copy · 4 play · 5 sound-on embed */
.vigx-video__poster {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 0.9s var(--ease), opacity 0.6s var(--ease);
}

.vigx-video__frame:hover .vigx-video__poster {
  transform: scale(1.04);
}

/* The muted loop has taken over — drop the still behind it */
.vigx-video__frame.is-bg .vigx-video__poster {
  opacity: 0;
}

.vigx-video__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    100deg,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.45) 45%,
    rgba(0, 0, 0, 0.15) 100%
  );
  pointer-events: none;
}

/* ---- Overlay copy ---- */

.vigx-video__content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 clamp(28px, 5vw, 72px);
  max-width: 640px;
  pointer-events: none;
}

.vigx-video__content > * {
  pointer-events: auto;
}

.vigx-video__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  padding: 6px 14px 6px 11px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}

.vigx-video__eyebrow svg {
  color: var(--vigx-red);
  flex-shrink: 0;
}

.vigx-video__title {
  margin: 0 0 26px;
  font-size: clamp(22px, 2.6vw, 38px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.45);
}

.vigx-video__title em {
  font-style: normal;
  color: var(--vigx-red);
}

/* ---- Pause indicator ---- */

.vigx-video__state {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  transform: translate(-50%, -50%) scale(0.85);
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  color: var(--vigx-white);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
    visibility 0.3s;
}

.vigx-video__state svg {
  margin-left: 4px;
}

.vigx-video__frame.is-paused .vigx-video__state {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

/* ---- Embed ---- */

/* Sits under the copy and ignores clicks, so the frame itself takes them */
.vigx-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 1;
  pointer-events: none;
}

/* ============================================
   Use cases — expanding panels
   ============================================ */

.vigx-section.vigx-uses {
  padding-top: 30px;
}

.vigx-uses__header {
  margin-bottom: 40px;
}

.vigx-uses__title {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.vigx-uses__panels {
  display: flex;
  gap: 14px;
  height: 540px;
}

/* ---- Panel ---- */

.vigx-panel {
  position: relative;
  flex: 1;
  min-width: 0;
  border-radius: 20px;
  overflow: hidden;
  background: #15171a;
  cursor: pointer;
  text-align: left;
  padding: 0;
  border: 0;
  color: inherit;
  /* The expand — flex-grow carries the whole layout shift */
  transition: flex 0.65s var(--ease);
}

.vigx-panel.is-active {
  flex: 2.8;
  cursor: default;
}

.vigx-panel:focus-visible {
  outline: 2px solid var(--vigx-red);
  outline-offset: 3px;
}

.vigx-panel__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.5) brightness(0.62);
  transform: scale(1.05);
  transition: filter 0.65s var(--ease), transform 0.9s var(--ease);
}

/* Colour and life return only to the open panel */
.vigx-panel.is-active .vigx-panel__img {
  filter: grayscale(0) brightness(0.9);
  transform: scale(1);
}

.vigx-panel:hover .vigx-panel__img {
  filter: grayscale(0.2) brightness(0.75);
}

.vigx-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.88) 0%,
    rgba(0, 0, 0, 0.3) 50%,
    rgba(0, 0, 0, 0.1) 100%
  );
  pointer-events: none;
}

.vigx-panel__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 28px;
}

.vigx-panel__index {
  display: block;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.4s var(--ease);
}

.vigx-panel.is-active .vigx-panel__index {
  color: var(--vigx-red);
}

.vigx-panel__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Collapsed panels hide their copy but keep the title readable */
.vigx-panel__text {
  margin: 0;
  max-width: 380px;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  /* grid-template-rows animates from nothing to auto height */
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.55s var(--ease), opacity 0.4s var(--ease),
    margin-top 0.55s var(--ease);
}

.vigx-panel__text > span {
  overflow: hidden;
}

.vigx-panel.is-active .vigx-panel__text {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 12px;
}

/* ---- Icon chip ---- */

.vigx-panel__icon {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--vigx-white);
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease);
}

.vigx-panel.is-active .vigx-panel__icon {
  background: var(--vigx-red);
  border-color: transparent;
}

/* ============================================
   Reviews
   ============================================ */

.vigx-section.vigx-reviews {
  padding-top: 30px;
  padding-bottom: 60px;
}

.vigx-reviews__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
  align-items: start;
}

.vigx-review {
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}

.vigx-review:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
}

.vigx-review__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #15171a;
}

.vigx-review__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease);
}

.vigx-review:hover .vigx-review__media img {
  transform: scale(1.05);
}

.vigx-review__body {
  padding: 20px;
}

.vigx-review__title {
  margin: 0 0 10px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.005em;
}

.vigx-review__quote {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.62);
  /* Trimmed to a scannable height; the toggle below lifts the clamp */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vigx-review.is-open .vigx-review__quote {
  -webkit-line-clamp: unset;
}

.vigx-review__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.75);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s var(--ease);
}

.vigx-review__toggle:hover {
  color: var(--vigx-red);
}

.vigx-review__toggle span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  transition: transform 0.3s var(--ease), border-color 0.2s var(--ease);
}

.vigx-review__toggle:hover span {
  border-color: var(--vigx-red);
}

.vigx-review.is-open .vigx-review__toggle span {
  transform: rotate(45deg);
}

/* ============================================
   Press
   ============================================ */

/* The logos ship with white backgrounds and fixed brand colours, so the band
   itself goes white rather than fighting them with tiles or inversion. */
.vigx-section.vigx-press {
  padding-top: 72px;
  padding-bottom: 72px;
  background: var(--vigx-white);
}

.vigx-press__title {
  margin: 0 0 44px;
  text-align: center;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #111;
}

/* ---- Marquee ---- */

.vigx-press__marquee {
  position: relative;
  overflow: hidden;
  /* Logos dissolve into the band instead of being chopped at the edges */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 90px,
    #000 calc(100% - 90px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 90px,
    #000 calc(100% - 90px),
    transparent 100%
  );
}

.vigx-press__track {
  display: flex;
  align-items: center;
  width: max-content;
  /* The track holds two identical runs; shifting by exactly half loops seamlessly */
  animation: vigx-marquee 46s linear infinite;
}

.vigx-press__marquee:hover .vigx-press__track {
  animation-play-state: paused;
}

@keyframes vigx-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.vigx-press__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 190px;
  height: 64px;
  flex-shrink: 0;
  padding: 0 26px;
  opacity: 0.66;
  transition: opacity 0.25s var(--ease);
}

a.vigx-press__item:hover {
  opacity: 1;
}

/* The logos are trimmed to their marks, so a shared height reads as a shared
   optical size. A percentage max-height would resolve against an auto-sized
   box and be ignored, letting them overflow. */
.vigx-press__item img {
  max-width: 100%;
  max-height: 30px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Boxed marks carry their own background, so they need less height to match */
.vigx-press__item--boxed img {
  max-height: 42px;
}

/* ============================================
   Award
   ============================================ */

.vigx-section.vigx-award {
  padding-top: 90px;
  padding-bottom: 90px;
}

.vigx-award__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 72px;
}

/* ---- Media ---- */

.vigx-award__media {
  position: relative;
}

.vigx-award__photo {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 20px;
  overflow: hidden;
  background: #15171a;
}

.vigx-award__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
  transition: transform 0.8s var(--ease);
}

.vigx-award__media:hover .vigx-award__photo img {
  transform: scale(1.05);
}

/* ---- Rotating badge ---- */

.vigx-badge {
  position: absolute;
  top: -34px;
  right: -34px;
  z-index: 2;
  width: 152px;
  height: 152px;
  border-radius: 50%;
  background: var(--vigx-white);
  color: #111;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
}

.vigx-badge__text {
  position: absolute;
  inset: 0;
  animation: vigx-spin 22s linear infinite;
}

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

/* Each character is rotated into place around the ring by its own index */
.vigx-badge__text span {
  position: absolute;
  top: 0;
  left: 50%;
  height: 50%;
  transform-origin: bottom center;
  transform: rotate(calc(var(--char) * (360deg / var(--total))));
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.vigx-badge__seal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 78px;
  height: 78px;
  border-radius: 50%;
  overflow: hidden;
}

.vigx-badge__seal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Text ---- */

.vigx-award__title {
  margin: 0 0 20px;
  font-size: clamp(24px, 2.5vw, 38px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.vigx-award__title em {
  font-style: normal;
  color: var(--vigx-red);
}

.vigx-award__text {
  margin: 0 0 30px;
  max-width: 500px;
  font-size: clamp(14.5px, 1.05vw, 16px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.66);
}

/* ---- Meta row ---- */

.vigx-award__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin: 0;
  padding: 22px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.vigx-award__meta div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.vigx-award__meta dt {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.vigx-award__meta dd {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

/* ============================================
   Footer
   ============================================ */

.vigx-footer {
  position: relative;
  border-top: 1px solid var(--vigx-border);
  background: #050505;
}

.vigx-footer a {
  color: inherit;
  text-decoration: none;
}

/* ---- Closing CTA ---- */

.vigx-footer__cta {
  position: relative;
  overflow: hidden;
  padding: 76px 0;
  border-bottom: 1px solid var(--vigx-border);
  text-align: center;
}

.vigx-footer__cta::before {
  content: "";
  position: absolute;
  bottom: -300px;
  left: 50%;
  width: 760px;
  height: 600px;
  transform: translateX(-50%);
  background: radial-gradient(
    circle,
    rgba(239, 65, 35, 0.16) 0%,
    rgba(239, 65, 35, 0) 65%
  );
  pointer-events: none;
}

.vigx-footer__cta-inner {
  position: relative;
  z-index: 1;
}

.vigx-footer__cta-title {
  margin: 0 0 26px;
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.vigx-footer__cta-title em {
  font-style: normal;
  color: var(--vigx-red);
}

/* ---- Main ---- */

.vigx-footer__main {
  display: grid;
  grid-template-columns: 1.5fr 1.2fr 1fr 1fr;
  gap: 48px 30px;
  padding: 72px 0 60px;
}

.vigx-footer__brand-logo {
  display: block;
  height: 32px;
  width: auto;
  margin-bottom: 20px;
}

.vigx-footer__about {
  margin: 0 0 24px;
  max-width: 330px;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.55);
}

/* ---- Contact list ---- */

.vigx-footer__contact {
  margin: 0;
  padding: 0;
  list-style: none;
}

.vigx-footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}

.vigx-footer__contact svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--vigx-red);
}

.vigx-footer__contact a:hover {
  color: var(--vigx-white);
}

/* ---- Link columns ---- */

.vigx-footer__heading {
  margin: 0 0 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.vigx-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.vigx-footer__list li {
  margin-bottom: 11px;
}

.vigx-footer__list a {
  position: relative;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.2s var(--ease), padding-left 0.2s var(--ease);
}

.vigx-footer__list a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 1px;
  background: var(--vigx-red);
  transition: width 0.2s var(--ease);
}

.vigx-footer__list a:hover {
  color: var(--vigx-white);
  padding-left: 14px;
}

.vigx-footer__list a:hover::before {
  width: 8px;
}

/* ---- Bottom bar ---- */

.vigx-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 24px 0 30px;
  border-top: 1px solid var(--vigx-border);
}

.vigx-footer__copy {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.42);
}

.vigx-footer__legal {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.vigx-footer__legal a {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.2s var(--ease);
}

.vigx-footer__legal a:hover {
  color: var(--vigx-white);
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 1024px) {
  .vigx-section {
    padding: 88px 0;
  }

  .vigx-award__inner {
    gap: 44px;
  }

  /* Brand block spans the full row, links wrap under it */
  .vigx-footer__main {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 24px;
  }

  .vigx-footer__brand {
    grid-column: 1 / -1;
  }

  .vigx-footer__about {
    max-width: 460px;
  }

  .vigx-badge {
    width: 124px;
    height: 124px;
    top: -24px;
    right: -14px;
  }

  .vigx-badge__seal {
    width: 62px;
    height: 62px;
  }

  .vigx-video__state {
    width: 64px;
    height: 64px;
  }

  .vigx-uses__panels {
    height: 440px;
    gap: 10px;
  }

  .vigx-panel__body {
    padding: 22px;
  }

  .vigx-reviews__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .vigx-press__item {
    width: 160px;
    padding: 0 20px;
  }

  .vigx-products__grid {
    gap: 20px;
  }

  .vigx-feature__inner {
    gap: 44px;
  }
}

@media (max-width: 860px) {
  /* Photo on top, copy below */
  .vigx-feature__inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .vigx-feature__text {
    max-width: none;
  }

  /* Taller frame so the copy has room over the footage */
  .vigx-video__frame {
    aspect-ratio: 3 / 4;
    border-radius: 16px;
  }

  .vigx-video__content {
    justify-content: flex-end;
    padding-bottom: 40px;
    max-width: none;
  }

  .vigx-video__frame::after {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.25) 0%,
      rgba(0, 0, 0, 0.55) 60%,
      rgba(0, 0, 0, 0.85) 100%
    );
  }

  /* Photo on top, copy below */
  .vigx-award__inner {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .vigx-award__photo {
    aspect-ratio: 4 / 3;
  }

  .vigx-award__text {
    max-width: none;
  }

  /* Side-by-side panels get too narrow to read — stack them and open all */
  .vigx-uses__panels {
    flex-direction: column;
    height: auto;
    gap: 12px;
  }

  .vigx-panel,
  .vigx-panel.is-active {
    flex: none;
    height: 240px;
    cursor: default;
  }

  .vigx-panel__img,
  .vigx-panel.is-active .vigx-panel__img {
    filter: grayscale(0) brightness(0.78);
    transform: scale(1);
  }

  .vigx-panel__text {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 10px;
    max-width: none;
  }

  .vigx-panel__index {
    color: var(--vigx-red);
  }

  .vigx-panel__icon {
    background: var(--vigx-red);
    border-color: transparent;
  }
}

@media (max-width: 860px) {
  .vigx-products__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .vigx-products__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 34px;
  }
}

@media (max-width: 560px) {
  .vigx-section {
    padding: 68px 0;
  }

  .vigx-reviews__grid {
    grid-template-columns: 1fr;
  }

  .vigx-press__item {
    width: 132px;
    height: 54px;
    padding: 0 14px;
  }

  .vigx-press__item img {
    max-height: 24px;
  }

  .vigx-press__item--boxed img {
    max-height: 34px;
  }

  .vigx-footer__main {
    grid-template-columns: repeat(2, 1fr);
    padding: 54px 0 44px;
  }

  .vigx-footer__cta {
    padding: 58px 0;
  }

  .vigx-footer__bottom {
    justify-content: center;
    text-align: center;
  }

  .vigx-footer__legal {
    justify-content: center;
    gap: 16px;
  }

  .vigx-products__grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .vigx-intro__text {
    margin-bottom: 26px;
  }

  .vigx-pills {
    margin-bottom: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .vigx-badge__text {
    animation: none;
  }
}

/* ============================================
   VIGX — Hakkımızda sayfası
   ============================================ */

/* ---- Sayfa başlığı ---- */

/* Clears the fixed header (84px bar + ~34px notice) with room to breathe */
.vigx-pagehead {
  position: relative;
  padding: 190px 0 72px;
  overflow: hidden;
  isolation: isolate;
}

.vigx-pagehead__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-position: 50% 42%;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1.04);
}

/* Keeps the headline legible over the bright sky in the photo */
.vigx-pagehead::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
      100deg,
      rgba(0, 0, 0, 0.86) 0%,
      rgba(0, 0, 0, 0.62) 46%,
      rgba(0, 0, 0, 0.28) 100%
    ),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(7, 7, 7, 1) 100%);
}

/* Nested inside .vigx-container, so it stays left-aligned with every other
   section instead of being re-centred by the container's auto margins */
.vigx-pagehead__inner {
  position: relative;
  max-width: 760px;
}

.vigx-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 26px;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.5);
}

.vigx-crumbs a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color 0.25s var(--ease);
}

.vigx-crumbs a:hover {
  color: var(--vigx-white);
}

.vigx-crumbs [aria-current] {
  color: var(--vigx-red);
}

.vigx-pagehead__eyebrow {
  margin: 0 0 14px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vigx-red);
}

.vigx-pagehead__title {
  margin: 0 0 20px;
  font-size: clamp(32px, 4.2vw, 58px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.vigx-pagehead__title em {
  font-style: normal;
  color: var(--vigx-red);
}

.vigx-pagehead__text {
  margin: 0;
  max-width: 520px;
  font-size: clamp(14.5px, 1.05vw, 16.5px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
}

/* ---- Bölüm ritmi ----
   The homepage's 120px band would stack to a 240px gap between neighbours,
   which reads as dead space on a copy-heavy page. The doubled class outranks
   the .vigx-section padding set in the responsive blocks above, so this
   tighter rhythm holds at every breakpoint. */

.vigx-section.vigx-about-intro {
  padding: 72px 0;
}

.vigx-section.vigx-about-lead,
.vigx-section.vigx-about-uses,
.vigx-section.vigx-about-facility {
  padding: 72px 0;
}

.vigx-section.vigx-about-quote {
  padding: 86px 0;
}

.vigx-section.vigx-about-closing {
  padding: 72px 0 96px;
}

/* ---- Biz kimiz ---- */

.vigx-about-intro__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 72px;
}

.vigx-about-intro__media {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
}

.vigx-about-intro__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vigx-about-intro__title {
  margin: 0 0 22px;
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.vigx-about-intro__title em {
  font-style: normal;
  color: var(--vigx-red);
}

.vigx-about-intro__text {
  margin: 0 0 18px;
  font-size: clamp(14px, 1vw, 15.5px);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.66);
}

.vigx-about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 34px 0 0;
  padding-top: 30px;
  border-top: 1px solid var(--vigx-border);
}

.vigx-about-stats dt {
  margin-bottom: 6px;
  font-size: clamp(19px, 1.6vw, 24px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--vigx-red);
}

.vigx-about-stats dd {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
}

/* ---- Tora & VIGX ---- */

.vigx-about-lead__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 72px;
}

.vigx-about-lead__head {
  grid-column: 1;
}

.vigx-about-lead__title {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.vigx-about-lead__title em {
  font-style: normal;
  color: var(--vigx-red);
}

.vigx-about-lead__body {
  grid-column: 1;
}

.vigx-about-lead__body p {
  margin: 0 0 18px;
  font-size: clamp(14px, 1vw, 15.5px);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.66);
}

.vigx-about-lead__body p:last-child {
  margin-bottom: 0;
}

/* Photo spans both text rows on the right */
.vigx-about-lead__media {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vigx-about-lead__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  border-radius: 18px;
}

.vigx-about-lead__media figcaption {
  font-size: 12px;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.45);
}

/* ---- Kullanım senaryoları ---- */

.vigx-about-uses__header {
  max-width: 720px;
  margin-bottom: 52px;
}

.vigx-about-uses__title {
  margin: 0 0 16px;
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.vigx-about-uses__text {
  margin: 0;
  font-size: clamp(14px, 1vw, 15.5px);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.6);
}

.vigx-about-uses__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.vigx-usecard {
  display: flex;
  flex-direction: column;
}

.vigx-usecard__media {
  position: relative;
  aspect-ratio: 4 / 3;
  margin-bottom: 20px;
  border-radius: 14px;
  overflow: hidden;
  background: #101010;
}

.vigx-usecard__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.vigx-usecard:hover .vigx-usecard__media img {
  transform: scale(1.05);
}

.vigx-usecard__title {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.vigx-usecard__text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.55);
}

/* ---- Felsefe ---- */

.vigx-about-quote {
  overflow: hidden;
  text-align: center;
}

/* Same red halo the homepage intro uses, so the two pages rhyme */
.vigx-about-quote::before {
  content: "";
  position: absolute;
  top: -50%;
  left: 50%;
  width: 900px;
  height: 900px;
  transform: translateX(-50%);
  background: radial-gradient(
    circle,
    rgba(239, 65, 35, 0.13) 0%,
    rgba(239, 65, 35, 0) 62%
  );
  pointer-events: none;
}

.vigx-about-quote__inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
}

.vigx-about-quote__text {
  margin: 0 0 24px;
  font-size: clamp(24px, 3vw, 42px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

.vigx-about-quote__text em {
  font-style: normal;
  color: var(--vigx-red);
}

.vigx-about-quote__body {
  margin: 0 auto;
  max-width: 640px;
  font-size: clamp(14px, 1vw, 15.5px);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.6);
}

/* ---- Tesisler ---- */

.vigx-about-facility__header {
  max-width: 720px;
  margin-bottom: 52px;
}

.vigx-about-facility__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.vigx-facility {
  position: relative;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #101010;
}

.vigx-facility img {
  display: block;
  width: 100%;
  /* Overrides the intrinsic height attribute so aspect-ratio can take effect */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.vigx-facility:hover img {
  transform: scale(1.05);
}

.vigx-facility figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 44px 20px 18px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 20%, rgba(0, 0, 0, 0));
}

.vigx-facility figcaption strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.vigx-facility figcaption span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}

/* ---- Kapanış ---- */

.vigx-about-closing__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 72px;
}

/* Image sits right of the copy — the reverse of the intro block above */
.vigx-about-closing__media {
  order: 2;
  border-radius: 18px;
  overflow: hidden;
}

.vigx-about-closing__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vigx-about-closing__content {
  order: 1;
}

.vigx-about-closing__title {
  margin: 0 0 22px;
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.vigx-about-closing__title em {
  font-style: normal;
  color: var(--vigx-red);
}

.vigx-about-closing__text {
  margin: 0 0 30px;
  font-size: clamp(14px, 1vw, 15.5px);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.66);
}

/* The homepage centres its pills; here they sit left-aligned in a column */
.vigx-about-closing__content .vigx-pills {
  justify-content: flex-start;
  margin-bottom: 32px;
}

/* ---- Responsive ---- */

@media (max-width: 1024px) {
  .vigx-pagehead {
    padding: 170px 0 76px;
  }

  .vigx-about-intro__inner,
  .vigx-about-closing__inner {
    gap: 48px;
  }

  .vigx-about-lead__inner {
    gap: 24px 48px;
  }

  .vigx-about-uses__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px;
  }
}

@media (max-width: 860px) {
  .vigx-about-intro__inner,
  .vigx-about-closing__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Photo leads on narrow screens, copy follows */
  .vigx-about-closing__media {
    order: 1;
  }

  .vigx-about-closing__content {
    order: 2;
  }

  .vigx-about-lead__inner {
    grid-template-columns: 1fr;
  }

  .vigx-about-lead__head,
  .vigx-about-lead__body,
  .vigx-about-lead__media {
    grid-column: 1;
  }

  .vigx-about-lead__media {
    grid-row: auto;
  }

  .vigx-about-lead__media img {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .vigx-about-facility__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .vigx-about-intro__media img,
  .vigx-about-closing__media img {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 560px) {
  .vigx-pagehead {
    padding: 148px 0 60px;
  }

  .vigx-about-stats {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .vigx-about-uses__grid,
  .vigx-about-facility__grid {
    grid-template-columns: 1fr;
  }

  .vigx-about-uses__header,
  .vigx-about-facility__header {
    margin-bottom: 38px;
  }
}

/* ============================================
   VIGX — Ürün sayfası
   ============================================ */

/* ---- Ürün başlığı (galeri + bilgi) ---- */

/* Clears the fixed header, same rhythm as the about page's pagehead */
.vigx-prodhead {
  position: relative;
  /* Sabit header (uyarı şeridi 36 + bar 84 + kenarlık = 121px) hemen üstte;
     içerik header'a yaslanır, yalnızca birkaç piksel pay bırakılır. */
  padding: 128px 0 64px;
  background:
    radial-gradient(900px 520px at 78% 12%, rgba(239, 65, 35, 0.14), transparent 62%),
    #070707;
}

.vigx-prodhead__inner {
  display: grid;
  /* Sahne kare olduğu için genişliği yüksekliğidir. Sütunu ekran yüksekliğine
     bağlayınca alçak ekranlarda küçülüp başlık bloğu ekrana sığar; geniş
     ekranlarda da sınırsız büyümez. */
  grid-template-columns: minmax(0, clamp(360px, 58vh, 660px)) 1fr;
  align-items: start;
  gap: 56px;
}

/* --- Galeri --- */

.vigx-prodhead__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--vigx-border);
  border-radius: 20px;
  background: #f4f4f5;
  overflow: hidden;
  cursor: grab;
  /* Horizontal drags belong to the gallery; vertical ones still scroll the page */
  touch-action: pan-y;
}

.vigx-prodhead__stage.is-grabbing {
  cursor: grabbing;
}

/* Görsellerin tamamı şeritte yan yana durur; gezinme şeridi kaydırır.
   Sahne bir flex kapsayıcı olduğu için şeridin genişliği açıkça sabitlenir:
   aksi hâlde genişlik içerikten, içerik de genişlikten hesaplanmaya çalışılır. */
.vigx-prodhead__track {
  display: flex;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  will-change: transform;
  transition: transform 0.4s var(--ease);
}

/* Parmak takibi sırasında geçiş kapalı; şerit hareketi birebir izlesin. */
.vigx-prodhead__track.is-dragging {
  transition: none;
}

.vigx-prodhead__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}

.vigx-prodhead__stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* While the finger is down the image must track it 1:1, with no easing lag */
.vigx-prodhead__stage.is-grabbing img {
  transition: none;
}

/* Hint that the stage is swipeable — only where a coarse pointer is likely */
.vigx-prodhead__hint {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 12px;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.4);
}

.vigx-prodhead__hint svg {
  color: var(--vigx-red);
}

@media (hover: none) and (pointer: coarse) {
  .vigx-prodhead__stage {
    cursor: default;
  }

  .vigx-prodhead__hint {
    display: flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vigx-prodhead__stage img {
    transition: none;
  }
}

.vigx-prodhead__thumbs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.vigx-thumb {
  padding: 0;
  border: 1px solid var(--vigx-border);
  border-radius: 10px;
  /* Matches the stage: transparent product renders need a light surface */
  background: #f4f4f5;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.vigx-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.vigx-thumb:hover {
  border-color: rgba(255, 255, 255, 0.34);
  transform: translateY(-2px);
}

.vigx-thumb.is-active {
  border-color: var(--vigx-red);
}

/* --- Bilgi --- */

.vigx-prodhead__title {
  margin: 0 0 10px;
  font-size: clamp(32px, 3.6vw, 50px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.vigx-prodhead__tagline {
  margin: 0 0 22px;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

.vigx-prodhead__tagline em {
  font-style: normal;
  color: var(--vigx-red);
}

.vigx-prodhead__lead {
  margin: 0 0 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--vigx-border);
  font-size: clamp(13.5px, 0.95vw, 15px);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.62);
}

/* Key figures — the spec strip that replaces the source page's price block */
/* Ölçüler bilinçli olarak sıkı: bu blok küçüldükçe yanındaki ürün görseli
   büyüyebiliyor ve başlık bölümü ekrana sığmaya devam ediyor. */
.vigx-prodspec {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 14px;
  margin: 0 0 24px;
}

.vigx-prodspec dt {
  margin-bottom: 2px;
  font-size: clamp(15px, 1.05vw, 18px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--vigx-red);
}

.vigx-prodspec dd {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.5);
}

.vigx-prodhead__info .vigx-pills {
  justify-content: flex-start;
  margin-bottom: 30px;
}

.vigx-prodhead__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---- Ortak bölüm başlıkları ---- */

.vigx-prod-head {
  max-width: 720px;
  margin-bottom: 48px;
}

.vigx-prod-title {
  margin: 0 0 16px;
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.vigx-prod-title em {
  font-style: normal;
  color: var(--vigx-red);
}

.vigx-prod-text {
  margin: 0;
  font-size: clamp(14px, 1vw, 15.5px);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.6);
}

.vigx-prod-note {
  margin: 26px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.42);
}

/* Tighter rhythm than the homepage's 120px band, matching the about page */
.vigx-section.vigx-prod-overview,
.vigx-section.vigx-prod-feat,
.vigx-section.vigx-prod-ai,
.vigx-section.vigx-prod-setup,
.vigx-section.vigx-prod-tech,
.vigx-section.vigx-prod-compare,
.vigx-section.vigx-prod-size {
  padding: 72px 0;
}

.vigx-section.vigx-prod-box {
  padding: 72px 0 96px;
}

/* ---- Genel bakış ---- */

.vigx-prod-overview__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Four short cards read better as one row than as 3 + an orphan */
.vigx-prod-overview__grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.vigx-ovcard {
  position: relative;
  padding: 30px 26px;
  border: 1px solid var(--vigx-border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.vigx-ovcard:hover {
  border-color: rgba(239, 65, 35, 0.4);
  background: rgba(239, 65, 35, 0.04);
}

.vigx-ovcard__num {
  display: block;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--vigx-red);
}

.vigx-ovcard h3 {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.vigx-ovcard p {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.58);
}

.vigx-ovcard p:last-child {
  margin-bottom: 0;
}

.vigx-ovcard strong {
  color: rgba(255, 255, 255, 0.86);
  font-weight: 600;
}

/* ---- Öne çıkan özellikler ---- */

.vigx-prod-feat__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.vigx-featcard {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--vigx-border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}

.vigx-featcard__media {
  overflow: hidden;
  background: #101010;
}

.vigx-featcard__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.vigx-featcard:hover .vigx-featcard__media img {
  transform: scale(1.04);
}

.vigx-featcard__body {
  padding: 22px 24px 26px;
}

.vigx-featcard__body h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.vigx-featcard__body p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.55);
}

/* ---- Yapay zekâ ---- */

.vigx-prod-ai__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.vigx-aicard {
  padding: 30px 26px;
  border: 1px solid var(--vigx-border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
}

.vigx-aicard__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  border: 1px solid rgba(239, 65, 35, 0.34);
  border-radius: 11px;
  background: rgba(239, 65, 35, 0.08);
  color: var(--vigx-red);
}

.vigx-aicard h3 {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.vigx-aicard p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.58);
}

.vigx-aicard strong {
  color: rgba(255, 255, 255, 0.86);
  font-weight: 600;
}

.vigx-aicard ul {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vigx-aicard ul li {
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.7);
}

/* ---- Kurulum ---- */

.vigx-prod-setup__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 64px;
}

.vigx-prod-setup__media {
  border-radius: 18px;
  overflow: hidden;
}

.vigx-prod-setup__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.vigx-steps {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vigx-steps li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.vigx-steps__num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--vigx-red);
  font-size: 13px;
  font-weight: 600;
}

.vigx-steps__body strong {
  display: block;
  margin-bottom: 3px;
  font-size: 14.5px;
  font-weight: 600;
}

.vigx-steps__body span {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
}

/* ---- Teknik özellikler ---- */

.vigx-prod-tech__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.vigx-spectable {
  padding: 26px;
  border: 1px solid var(--vigx-border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
}

.vigx-spectable table {
  width: 100%;
  border-collapse: collapse;
}

.vigx-spectable caption {
  margin-bottom: 16px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vigx-red);
  text-align: left;
}

.vigx-spectable tr + tr th,
.vigx-spectable tr + tr td {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.vigx-spectable th {
  padding: 11px 12px 11px 0;
  font-size: 12.5px;
  font-weight: 400;
  text-align: left;
  color: rgba(255, 255, 255, 0.5);
}

.vigx-spectable td {
  padding: 11px 0;
  font-size: 13px;
  font-weight: 500;
  text-align: right;
  color: rgba(255, 255, 255, 0.9);
}

.vigx-spectable__ast {
  color: var(--vigx-red);
}

/* ---- Karşılaştırma ---- */

/* Wide table scrolls inside its own box rather than the page body */
.vigx-comparewrap {
  overflow-x: auto;
  border: 1px solid var(--vigx-border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
}

.vigx-compare {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
}

.vigx-compare th,
.vigx-compare td {
  padding: 15px 22px;
  font-size: 13.5px;
  text-align: center;
}

.vigx-compare thead th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.vigx-compare thead th.is-hl {
  color: var(--vigx-red);
}

.vigx-compare tbody th {
  font-size: 12.5px;
  font-weight: 400;
  text-align: left;
  color: rgba(255, 255, 255, 0.5);
}

.vigx-compare tbody tr + tr th,
.vigx-compare tbody tr + tr td {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.vigx-compare tbody td {
  color: rgba(255, 255, 255, 0.72);
}

/* Highlight column marks the product this page is about */
.vigx-compare .is-hl {
  background: rgba(239, 65, 35, 0.07);
  color: var(--vigx-white);
  font-weight: 500;
}

.vigx-compare__yes {
  color: var(--vigx-red);
  font-size: 15px;
}

.vigx-compare__no {
  color: rgba(255, 255, 255, 0.3);
}

/* ---- Beden referansı ---- */

.vigx-prod-size__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.vigx-sizecard {
  padding: 30px 26px;
  border: 1px solid var(--vigx-border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
}

.vigx-sizecard h3 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
}

.vigx-sizecard__hint {
  margin: 0 0 18px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.45);
}

.vigx-sizecard__big {
  margin: 0;
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--vigx-red);
}

.vigx-sizelist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.vigx-sizelist li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
}

.vigx-sizelist li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.vigx-sizelist strong {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.vigx-sizelist span {
  font-size: 13px;
  color: var(--vigx-red);
}

/* ---- Kutu içeriği ---- */

.vigx-prod-box__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 64px;
}

.vigx-prod-box__media {
  border-radius: 18px;
  overflow: hidden;
}

.vigx-prod-box__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.vigx-boxlist {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.vigx-boxlist li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.vigx-boxlist li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.vigx-boxlist strong {
  flex-shrink: 0;
  min-width: 30px;
  font-size: 13px;
  font-weight: 600;
  color: var(--vigx-red);
}

/* ---- Responsive ---- */

@media (max-width: 1100px) {
  .vigx-prodhead__inner {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .vigx-prodhead__stage {
    aspect-ratio: 4 / 3;
  }

  .vigx-prod-overview__grid,
  .vigx-prod-overview__grid--4,
  .vigx-prod-ai__grid,
  .vigx-prod-tech__grid,
  .vigx-prod-size__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .vigx-prod-feat__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 860px) {
  /* Mobilde uyarı şeridi üç satıra indiği için header ~118px. */
  .vigx-prodhead {
    padding: 128px 0 60px;
  }

  .vigx-prod-setup__inner,
  .vigx-prod-box__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Photo leads, copy follows — same order swap as the about page */
  .vigx-prod-setup__media {
    order: -1;
  }
}

@media (max-width: 640px) {
  .vigx-prodspec {
    grid-template-columns: repeat(2, 1fr);
  }

  .vigx-prodhead__thumbs {
    grid-template-columns: repeat(4, 1fr);
  }

  /* İki eylem butonu alt alta düşmesin: satırı paylaşıp eşit genişlikte
     dursunlar. Dolgu ve punto, dar ekranda sığmaları için kısıldı. */
  .vigx-prodhead__actions {
    flex-wrap: nowrap;
    gap: 10px;
  }

  .vigx-prodhead__actions .vigx-btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding: 0 12px;
    font-size: 12.5px;
  }

  .vigx-prod-overview__grid,
  .vigx-prod-overview__grid--4,
  .vigx-prod-ai__grid,
  .vigx-prod-tech__grid,
  .vigx-prod-size__grid,
  .vigx-prod-feat__grid {
    grid-template-columns: 1fr;
  }

  .vigx-prod-head {
    margin-bottom: 34px;
  }
}

/* ============================================
   VIGX — Ürünler sayfası
   ============================================ */

.vigx-section.vigx-prod-list {
  padding: 72px 0;
}

.vigx-prod-list__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.vigx-listcard {
  display: grid;
  grid-template-columns: 260px 1fr;
  border: 1px solid var(--vigx-border);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease),
    transform 0.25s var(--ease);
}

.vigx-listcard:hover {
  border-color: rgba(239, 65, 35, 0.42);
  background: rgba(239, 65, 35, 0.04);
  transform: translateY(-3px);
}

/* A10 renders ship with a transparent background while the others are baked on
   white, so a light surface is what makes all four cards read alike. */
.vigx-listcard__media {
  position: relative;
  background: #f4f4f5;
  overflow: hidden;
}

.vigx-listcard__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.vigx-listcard:hover .vigx-listcard__media img {
  transform: scale(1.05);
}

.vigx-listcard__body {
  padding: 28px 28px 26px;
}

.vigx-listcard__kicker {
  display: block;
  margin-bottom: 8px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vigx-red);
}

.vigx-listcard__title {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.vigx-listcard__text {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.55);
}

.vigx-listcard__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.vigx-listcard__specs li {
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.6);
}

.vigx-listcard__specs strong {
  font-weight: 600;
  color: var(--vigx-white);
}

/* ============================================
   VIGX — İletişim sayfası
   ============================================ */

.vigx-section.vigx-contact {
  padding: 72px 0 96px;
}

.vigx-contact__inner {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  align-items: start;
  gap: 56px;
}

/* ---- Form ---- */

.vigx-form {
  margin-top: 30px;
}

.vigx-form__row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.vigx-field {
  margin-bottom: 18px;
}

.vigx-field label {
  display: block;
  margin-bottom: 8px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.72);
}

.vigx-field label span {
  color: var(--vigx-red);
}

.vigx-field input,
.vigx-field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--vigx-white);
  font-family: inherit;
  font-size: 14px;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.vigx-field textarea {
  resize: vertical;
  min-height: 120px;
}

.vigx-field input::placeholder,
.vigx-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.vigx-field input:focus,
.vigx-field textarea:focus {
  outline: none;
  border-color: var(--vigx-red);
  background: rgba(255, 255, 255, 0.05);
}

/* Flag only fields the user actually left wrong, not every empty field on load */
.vigx-field input.is-invalid,
.vigx-field textarea.is-invalid {
  border-color: #ff5a3c;
  background: rgba(239, 65, 35, 0.06);
}

.vigx-form button[type="submit"] {
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

.vigx-form__note {
  margin: 16px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  min-height: 1em;
}

.vigx-form__note.is-error {
  color: #ff7a63;
}

.vigx-form__note.is-ok {
  color: #4ade80;
}

/* ---- Bilgi kartları ---- */

.vigx-contact__info {
  display: grid;
  gap: 16px;
}

.vigx-infocard {
  padding: 24px;
  border: 1px solid var(--vigx-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.25s var(--ease);
}

.vigx-infocard:hover {
  border-color: rgba(239, 65, 35, 0.35);
}

.vigx-infocard__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 14px;
  border: 1px solid rgba(239, 65, 35, 0.34);
  border-radius: 10px;
  background: rgba(239, 65, 35, 0.08);
  color: var(--vigx-red);
}

.vigx-infocard h3 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.vigx-infocard p {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.58);
}

.vigx-infocard a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 0.25s var(--ease);
}

.vigx-infocard a:hover {
  color: var(--vigx-red);
}

.vigx-infocard--social .vigx-social {
  margin-top: 4px;
}

/* ---- Responsive ---- */

@media (max-width: 1024px) {
  .vigx-prod-list__grid {
    grid-template-columns: 1fr;
  }

  .vigx-contact__inner {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .vigx-contact__info {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .vigx-listcard {
    grid-template-columns: 1fr;
  }

  .vigx-listcard__media {
    aspect-ratio: 4 / 3;
  }

  .vigx-form__row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .vigx-contact__info {
    grid-template-columns: 1fr;
  }
}

/* ---- Satın Al ---- */

.vigx-prodhead__buy {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

/* Taller and heavier than the secondary pair below it, so the commercial
   action stays the one obvious next step */
.vigx-btn--buy {
  height: 54px;
  padding: 0 34px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  /* Flat brand red read as muted here; a light-to-dark ramp plus a warm glow
     gives the commercial CTA the presence the secondary pair lacks. */
  background: linear-gradient(180deg, #ff5a3c 0%, var(--vigx-red) 55%, var(--vigx-red-dark) 100%);
  box-shadow: 0 10px 30px rgba(239, 65, 35, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.vigx-btn--buy:hover {
  background: linear-gradient(180deg, #ff6b50 0%, #f04a2c 55%, var(--vigx-red) 100%);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(239, 65, 35, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* .vigx-btn slides its icons right on hover — correct for an arrow, wrong for
   a cart and an external-link glyph */
.vigx-btn--buy:hover svg {
  transform: none;
}

.vigx-btn__ext {
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
}


@media (max-width: 640px) {
  .vigx-btn--buy {
    width: 100%;
    justify-content: center;
  }

}