:root {
  --bg-top: #b8bec6;
  --bg-mid: #4a4f57;
  --bg-bottom: #050506;
  --bg-c1: #050506;
  --bg-c2: #121417;
  --bg-c3: #3a4048;
  --bg-c4: #9aa3b0;
  --bg-c5: #e8ebf0;
  --bg-speed: 16s;
  --bg-sheen-mid: rgba(232, 235, 240, 0.28);
  --bg-sheen-soft: rgba(255, 255, 255, 0.18);
  --bg-aurora-1: rgba(232, 235, 240, 0.22);
  --bg-aurora-2: rgba(155, 164, 178, 0.2);
  --bg-aurora-3: rgba(70, 76, 88, 0.45);
  --bg-glow-top: rgba(255, 255, 255, 0.12);
  --bg-glow-bottom: rgba(5, 5, 6, 0.45);
  --bg-particle: #e8ebf0;
  --bg-particle-mid: #c5ccd8;
  --ink: #f4f5f7;
  --ink-soft: #c5c9d1;
  --ink-muted: #9aa1ad;
  --line: rgba(255, 255, 255, 0.14);
  --glass: rgba(18, 20, 24, 0.55);
  --glass-strong: rgba(10, 11, 14, 0.72);
  --metal: linear-gradient(135deg, #f2f4f7 0%, #b7bec8 28%, #8e96a3 52%, #e8ebf0 78%, #9aa3b0 100%);
  --radius: 18px;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  --font-display: "Biryani", system-ui, sans-serif;
  --font-body: "Biryani", system-ui, sans-serif;
  --max: 28rem;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
span.btn-label {
  padding-top: 4px !important;
}
body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg-c1);
  line-height: 1.55;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.bg-metal {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    125deg,
    var(--bg-c1) 0%,
    var(--bg-c2) 12%,
    var(--bg-c3) 24%,
    var(--bg-c4) 36%,
    var(--bg-c5) 44%,
    var(--bg-c4) 52%,
    var(--bg-c3) 64%,
    var(--bg-c2) 76%,
    var(--bg-c1) 88%,
    var(--bg-c4) 100%
  );
  background-size: 340% 340%;
  animation: metal-flow var(--bg-speed) ease-in-out infinite;
}

.bg-metal-sheen {
  position: fixed;
  inset: -30%;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 38%,
    var(--bg-sheen-soft) 48%,
    var(--bg-sheen-mid) 50%,
    var(--bg-sheen-soft) 52%,
    transparent 62%,
    transparent 100%
  );
  background-size: 220% 220%;
  mix-blend-mode: soft-light;
  animation: metal-sheen calc(var(--bg-speed) * 0.56) linear infinite;
}

.bg-aurora {
  position: fixed;
  inset: -25%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 50% 40% at 18% 22%, var(--bg-aurora-1), transparent 58%),
    radial-gradient(ellipse 45% 42% at 82% 18%, var(--bg-aurora-2), transparent 55%),
    radial-gradient(ellipse 55% 38% at 50% 85%, var(--bg-aurora-3), transparent 62%);
  filter: blur(42px);
  animation: aurora-drift calc(var(--bg-speed) * 0.88) ease-in-out infinite alternate;
}

.bg-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%, var(--bg-glow-top), transparent 55%),
    linear-gradient(180deg, transparent 0%, var(--bg-glow-bottom) 100%);
  z-index: 0;
}

.particles {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.particle {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, var(--bg-particle-mid) 45%, transparent 70%);
  opacity: var(--opacity);
  box-shadow:
    0 0 calc(var(--size) * 1.8) color-mix(in srgb, var(--bg-particle) 35%, transparent),
    0 0 calc(var(--size) * 3.5) color-mix(in srgb, var(--bg-particle-mid) 15%, transparent);
  animation: particle-float var(--duration) var(--delay) ease-in-out infinite;
  will-change: transform, opacity;
}

.particle--spark {
  border-radius: 2px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--bg-particle) 95%, white), color-mix(in srgb, var(--bg-particle-mid) 20%, transparent));
  box-shadow: 0 0 10px color-mix(in srgb, var(--bg-particle) 45%, transparent);
  animation-name: particle-spark;
}

.bg-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes aurora-drift {
  0% { transform: translate3d(-2%, -1%, 0) scale(1); }
  50% { transform: translate3d(3%, 2%, 0) scale(1.06); }
  100% { transform: translate3d(-1%, 3%, 0) scale(1.02); }
}

@keyframes metal-flow {
  0% { background-position: 0% 40%; }
  50% { background-position: 100% 60%; }
  100% { background-position: 0% 40%; }
}

@keyframes metal-sheen {
  0% { background-position: 120% 40%; transform: translate3d(-4%, 0, 0) rotate(0.001deg); }
  100% { background-position: -40% 60%; transform: translate3d(4%, 0, 0) rotate(0.001deg); }
}

@keyframes particle-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: var(--opacity);
  }
  25% {
    transform: translate3d(var(--dx), calc(var(--dy) * -1), 0) scale(1.15);
    opacity: calc(var(--opacity) * 1.35);
  }
  50% {
    transform: translate3d(calc(var(--dx) * -0.6), var(--dy), 0) scale(0.9);
    opacity: calc(var(--opacity) * 0.55);
  }
  75% {
    transform: translate3d(calc(var(--dx) * 0.4), calc(var(--dy) * -0.5), 0) scale(1.08);
    opacity: calc(var(--opacity) * 1.2);
  }
}

@keyframes particle-spark {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    opacity: var(--opacity);
  }
  40% {
    transform: translate3d(var(--dx), var(--dy), 0) rotate(25deg) scale(1.3);
    opacity: calc(var(--opacity) * 1.5);
  }
  70% {
    transform: translate3d(calc(var(--dx) * -0.5), calc(var(--dy) * 0.8), 0) rotate(-15deg) scale(0.75);
    opacity: calc(var(--opacity) * 0.4);
  }
}

.page {
  position: relative;
  z-index: 1;
  width: min(100%, var(--max));
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 2.25rem) 1.15rem 2.5rem;
}

.video-embed {
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 200px;
  margin: 0.35rem 0 1.5rem;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #000;
  box-shadow: var(--shadow);
  opacity: 1;
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  max-width: 100%;
}

.hero {
  text-align: center;
  padding-top: 0.25rem;
}

.logo-link {
  display: inline-flex;
  justify-content: center;
  margin-bottom: 1rem;
  transition: transform 0.35s ease, filter 0.35s ease;
}

.logo-link:hover,
.logo-link:focus-visible {
  transform: translateY(-2px);
  filter: drop-shadow(0 8px 18px rgba(255, 255, 255, 0.18));
}

.logo {
  width: min(88vw, 220px);
  height: auto;
  margin-inline: auto;
  border-radius: 0;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.35));
}

.eyebrow {
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.headline {
  margin: 0 0 0.85rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 2.7rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.03em;
  background: var(--metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.15);
}

.lead {
  margin: 0 auto 1.25rem;
  max-width: 22rem;
  font-size: 0.98rem;
  color: var(--ink-soft);
}

.badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}

.badges li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(8, 9, 12, 0.35);
  backdrop-filter: blur(8px);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #e7eaef;
  line-height: 1;
}

.badges li.badge-logo {
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  backdrop-filter: none;
  overflow: hidden;
  line-height: 0;
  min-height: 2.35rem;
}

.badges li.badge-logo img {
  display: block;
  width: auto;
  height: 31px;
  max-width: min(42vw, 140px);
  object-fit: contain;
}

.badges li.badge-logo img[alt="ISO 9001"] {
  height: 55px;
  max-width: min(28vw, 72px);
}

.facility-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.35));
  box-shadow: var(--shadow);
  text-align: left;
  transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}

.facility-link:hover,
.facility-link:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.32);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(0, 0, 0, 0.4));
}

.facility-link strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 500;
}

.facility-link small {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.78rem;
  color: var(--ink-muted);
}

.play-icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--metal);
  color: #111;
  flex-shrink: 0;
}

.section {
  margin-top: 2rem;
}

.section-title {
  margin: 0 0 0.9rem;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #f0f2f5;
}

.link-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.link-stack > .store-card--featured {
  grid-column: 1 / -1;
}

.banner-stack {
  display: grid;
  gap: 0.65rem;
  width: min(100%, 28rem);
  margin: 0.85rem auto 0;
}

.banner-slider {
  position: relative;
  width: min(100%, 28rem);
  margin: 0.85rem auto 0;
}

.banner-slider__viewport {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
}

.banner-slider__track {
  position: relative;
}

.banner-slider__slide {
  display: none;
  animation: banner-fade 0.45s ease;
}

.banner-slider__slide.is-active {
  display: block;
}

.banner-slider__slide .hero-banner {
  margin: 0;
  border-radius: 14px;
}

.banner-slider__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  translate: 0 -50%;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(10, 11, 14, 0.55);
  color: #f4f5f7;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}

.banner-slider__nav--prev { left: 0.45rem; }
.banner-slider__nav--next { right: 0.45rem; }

.banner-slider__nav:hover,
.banner-slider__nav:focus-visible {
  background: rgba(10, 11, 14, 0.78);
  outline: none;
}

.banner-slider__dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.65rem;
}

.banner-slider__dot {
  width: 0.45rem;
  height: 0.45rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  cursor: pointer;
}

.banner-slider__dot.is-active {
  background: rgba(255, 255, 255, 0.9);
  width: 1rem;
}

@keyframes banner-fade {
  from { opacity: 0.35; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .banner-slider__slide { animation: none; }
}

.hero-banner {
  display: block;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  background: rgba(0, 0, 0, 0.25);
  transition: transform 0.22s ease, filter 0.22s ease;
}

a.hero-banner:hover,
a.hero-banner:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.hero-banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* —— Shared button face: icon + label truly centered —— */
.btn-face {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 3.4rem;
  padding: 0.85rem 1rem;
  margin: 0;
  box-sizing: border-box;
}

.btn-face--text {
  gap: 0;
}

.btn-face--text .btn-label {
  white-space: normal;
  text-align: center;
}

.btn-icon {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 1.35rem;
  margin: 0;
  padding: 0;
  border-radius: 5px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
  filter: grayscale(1) contrast(1.2) brightness(0.92);
}

.btn-icon--svg {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  object-fit: unset;
  filter: none;
  color: #111;
  overflow: visible;
}

.btn-label {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.25;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.store-card {
  display: block;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  background: var(--metal);
  color: #111;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
  transition: transform 0.22s ease, filter 0.22s ease;
}

.store-card:hover,
.store-card:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.06);
}

.store-card:hover .btn-icon:not(.btn-icon--svg) {
  filter: grayscale(1) contrast(1.25) brightness(0.85);
}

.marquee {
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.14);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee:empty,
.marquee:not(:has(.marquee__track span)) {
  display: none;
}

.marquee__track {
  display: flex;
  width: max-content;
  gap: 2.5rem;
  padding: 0.55rem 0;
  animation: marquee 10s linear infinite;
}

.marquee__track span {
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.35;
  color: rgba(17, 17, 17, 0.78);
  font-variant-numeric: tabular-nums;
}

.store-card:hover .marquee__track {
  animation-play-state: paused;
}

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

.social-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.social {
  display: block;
  border: 0;
  border-radius: 14px;
  background: var(--metal);
  color: #111;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
  transition: transform 0.22s ease, filter 0.22s ease;
}

.social:hover,
.social:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.06);
}

.contact__text {
  margin: 0 0 0.9rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.contact__text a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

.footer {
  margin-top: 2.4rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  text-align: center;
}

.footer p {
  margin: 0;
  font-size: 0.78rem;
  color: var(--ink-muted);
}

.footer__sub {
  margin-top: 0.25rem !important;
  letter-spacing: 0.08em;
}

.reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: rise 0.7s ease forwards;
}

.delay-1 { animation-delay: 0.08s; }
.delay-2 { animation-delay: 0.16s; }
.delay-3 { animation-delay: 0.24s; }
.delay-4 { animation-delay: 0.32s; }

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

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .marquee__track,
  .bg-aurora,
  .bg-metal,
  .bg-metal-sheen,
  .particle {
    animation: none !important;
  }

  .logo-link,
  .facility-link,
  .store-card,
  .social {
    transition: none;
  }
}

@media (min-width: 480px) {
  .social-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  :root {
    --max: 34rem;
  }

  .page {
    padding-top: 2.75rem;
  }

  .lead {
    font-size: 1.05rem;
  }
}

:focus-visible {
  outline: 2px solid #e8ecf2;
  outline-offset: 3px;
}