/* Zartaraz premium product showcase enhancements */
@media (min-width: 1024px) {
  #products .zt-product > .grid {
    grid-template-columns: 0.88fr 1.22fr;
  }

  #products .zt-product:nth-child(even) > .grid {
    grid-template-columns: 1.22fr 0.88fr;
  }
}

#products .zt-product {
  position: relative;
  isolation: isolate
}

#products .zt-product:before {
  content: "";
  position: absolute;
  inset: 8% -4%;
  z-index: -1;
  border-radius: 48%;
  background: radial-gradient(circle at 65% 50%, rgba(200, 151, 52, .11), transparent 58%);
  filter: blur(28px);
  opacity: .75;
  transition: opacity .7s ease, transform .7s ease
}

#products .zt-product:hover:before {
  opacity: 1;
  transform: scale(1.05)
}

#products .product-masked-heading {
  display: block;
  width: 100%;
  min-height: clamp(4.5rem, 9vw, 8.5rem);
  overflow: visible
}

/* Reveal On Scroll / Refresh Animation System */
.reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
}

.reveal-delay-1 {
  transition-delay: 0.12s;
}

.reveal-delay-2 {
  transition-delay: 0.22s;
}

.reveal-delay-3 {
  transition-delay: 0.36s;
}

#products .zt-product.reveal {
  opacity: 1;
  transform: none;
}

/* Product Visuals: Slide-in from side to center on initial reveal */
#products .zt-product .zt-product-visual.reveal {
  opacity: 0;
  transform: translate3d(0, 35px, 0);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

@media (min-width: 1024px) {
  /* Odd cards (index 0, 2): Visual is on the left -> slides in from left to center */
  #products .zt-product .zt-product-visual.reveal {
    transform: translate3d(-75px, 0, 0);
  }

  /* Even cards (index 1): Visual is on the right -> slides in from right to center */
  #products .zt-product:nth-child(even) .zt-product-visual.reveal {
    transform: translate3d(75px, 0, 0);
  }
}

#products .zt-product .zt-product-visual.reveal.is-visible {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
}

#products .zt-product-visual {
  position: relative;
  min-width: 0;
  width: 100%;
  max-width: none;
  margin-inline: auto
}

#products .zt-product-glow {
  position: relative;
  padding: clamp(0.2rem, 1vw, 0.5rem) clamp(0.5rem, 1.5vw, 1.25rem);
}

#products .zt-product-glow:before {
  content: "";
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  background: rgba(205, 154, 54, .16);
  filter: blur(55px);
  opacity: .45;
  transition: opacity .7s ease, transform .7s ease
}

#products .zt-product:hover .zt-product-glow:before {
  opacity: .85;
  transform: scale(1.08)
}

#products .zt-product-stage {
  position: relative;
  transform-style: preserve-3d
}

#products .zt-product-tilt {
  transform: rotateY(-2deg) rotateX(1deg);
  transition: transform .8s cubic-bezier(.2, .8, .2, 1)
}

#products .zt-product:nth-child(even) .zt-product-tilt {
  transform: rotateY(2deg) rotateX(1deg)
}

#products .zt-product:hover .zt-product-tilt {
  transform: rotateY(0) rotateX(0) translateY(-12px) scale(1.035)
}

#products .zt-product-mockup {
  position: relative;
  filter: drop-shadow(0 28px 30px rgba(83, 54, 6, .16));
  transition: filter .7s ease
}

#products .zt-product:hover .zt-product-mockup {
  filter: drop-shadow(0 36px 38px rgba(118, 74, 5, .24))
}

#clients .zt-clients-strip {
  padding-block: 1rem
}

#clients .zt-clients-track {
  animation: zt-client-marquee 46s linear infinite;
  will-change: transform
}

@keyframes zt-client-marquee {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(33.333333%)
  }
}

@media (max-width:1023px) {
  #products .zt-product-copy {
    max-width: 44rem
  }

  #products .zt-product-visual {
    width: 100%;
    max-width: 25rem;
    margin-inline: auto
  }

  #products .product-masked-heading {
    min-height: clamp(4.5rem, 19vw, 7.5rem)
  }
}

@media (prefers-reduced-motion:reduce) {
  #clients .zt-clients-track {
    animation-duration: 90s
  }

  #products .zt-product-tilt,
  #products .zt-product:hover .zt-product-tilt {
    transform: none
  }
}

#products .zt-product-number .masked-heading {
  display: block;
  min-height: 0
}

#products .zt-product-number {
  line-height: 1
}

#products .zt-number-mask .masked-heading__text {
  filter: drop-shadow(0 6px 12px color-mix(in oklab, var(--primary) 16%, transparent))
}

/* Site-specific animation repairs and semantic gold texture. */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(32px)
  }

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

@keyframes fade-in {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes scroll-hint {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(10px)
  }
}

#products .product-masked-heading {
  font-weight: 800;
  line-height: 1.55;
  filter: drop-shadow(0 8px 10px color-mix(in oklab, var(--primary) 14%, transparent))
}

#products .zt-product-number {
  font-size: clamp(2.75rem, 5vw, 4rem);
  background-image: url('/__l5e/assets-v1/a58cc6ef-de67-4eae-bb36-9ba7fec2b3cd/gold-liquid-texture.jpg');
  background-size: cover;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent
}

.masked-heading {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  text-wrap: balance;
  -webkit-font-smoothing: antialiased
}

.masked-heading__measure {
  color: transparent
}

.masked-heading__word {
  display: inline-block;
  white-space: pre
}

.masked-heading__word:not(:last-child)::after {
  content: ' '
}

.masked-heading__baseline {
  display: inline-block;
  width: 0;
  height: 0
}

.masked-heading__defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden
}

.masked-heading__reveal {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none
}

.masked-heading__clip {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden
}

.masked-heading__media {
  position: absolute;
  inset: 0;
  display: block;
  will-change: transform, filter
}

.masked-heading__source {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none
}

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

  *,
  *:before,
  *:after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important
  }

  .reveal {
    opacity: 1;
    transform: none
  }
}

/* product name: taller band, no backing strip */
#products .product-masked-heading {
  filter: none;
  min-height: clamp(6rem, 11vw, 10rem);
  background: none;
  box-shadow: none
}

#products .product-masked-heading .masked-heading__clip {
  overflow: visible
}

#products .zt-product-number {
  font-weight: 900
}

/* accordion gallery */
.accordion-gallery {
  --ag-accent: var(--gold-500, #c9962f);
  --ag-overlay: #1a1206;
  --ag-text: #fff;
  --ag-media-size: 320px;
  display: flex;
  flex-direction: row;
  gap: var(--ag-gap);
  width: 100%;
  perspective: 1400px
}

.ag-panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  cursor: pointer;
  display: block;
  outline: none;
  transform-style: preserve-3d;
  background: #1a1206;
  box-shadow: 0 18px 40px -22px rgba(83, 54, 6, .55);
  will-change: flex-grow, transform
}

.ag-panel:focus-visible {
  box-shadow: 0 0 0 2px var(--ag-accent)
}

.ag-panel__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit
}

.ag-panel__media {
  --ag-gray: 1;
  --ag-dim: .35;
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--ag-media-size);
  height: 100%;
  filter: grayscale(var(--ag-gray));
  will-change: transform, filter
}

.ag-panel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none
}

.ag-panel__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--ag-overlay) 80%, transparent) 100%), color-mix(in srgb, var(--ag-overlay) calc(var(--ag-dim, .35)*100%), transparent)
}

.ag-panel__label {
  position: absolute;
  right: 22px;
  bottom: 22px;
  left: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: none;
  z-index: 2
}

.ag-panel__bar {
  flex: 0 0 auto;
  width: 3px;
  height: 28px;
  border-radius: 3px;
  background: var(--ag-accent);
  opacity: 0;
  box-shadow: 0 0 12px var(--ag-accent)
}

.ag-panel__text {
  color: var(--ag-text);
  font-weight: 700;
  font-size: clamp(1rem, 1.4vw, 1.35rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .6)
}

.zt-gallery-caption {
  animation: fade-up .6s ease both
}

.zt-gallery-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  margin-left: .75rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #e4b95b, #a8741a);
  color: #fff;
  font-size: 1rem;
  vertical-align: middle
}

@media (max-width:640px) {
  .accordion-gallery {
    flex-direction: column;
    perspective: none;
    height: auto !important
  }

  .ag-panel {
    min-height: 84px;
    transform: none !important
  }

  .ag-panel--active {
    min-height: 280px
  }

  .accordion-gallery .ag-panel__media {
    width: 100%;
    height: 100%
  }
}

/* Product visual natural full sizing */
#products .zt-product-visual {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
}

#products .zt-product-glow {
  padding: clamp(0.25rem, 1vw, 1rem);
}

@media (min-width: 1024px) {
  #products .zt-product>.grid {
    grid-template-columns: 0.92fr 1.08fr;
    gap: 3.5rem;
    align-items: center;
  }
}

/* ========================================================
   HOME PAGE: ALTERNATING LUXURY BLACK & WHITE THEME
   Crisp alternating sections with rich glowing gold text
   ======================================================== */

/* Root and Base Canvas */
html,
body,
#zt-root,
.bg-ink-950 {
  background-color: #07080b;
  color: #f8fafc;
}

.gold-text {
  background: linear-gradient(135deg, #b8801a, #c89020 20%, #e8c558 45%, #f0d99e 55%, #c89020 80%, #b8801a);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gold-text-bright {
  background: linear-gradient(135deg, #c89020, #e8c558 30%, #f0d99e, #e8c558 70%, #c89020);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Glass gold navbar - deep luxury glass floating seamlessly */
.glass-gold {
  background: rgba(7, 9, 13, 0.88) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(201, 150, 47, 0.3) !important;
}

.zt-navbar-top {
  background: linear-gradient(180deg, rgba(6, 8, 12, 0.96) 0%, rgba(6, 8, 12, 0.85) 75%, rgba(6, 8, 12, 0.6) 100%) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-bottom: 1px solid rgba(201, 150, 47, 0.28) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

.zt-navbar-scrolled {
  background: rgba(6, 8, 12, 0.94) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-bottom: 1.5px solid rgba(201, 150, 47, 0.4) !important;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.7), 0 0 15px rgba(201, 150, 47, 0.2) !important;
}

.zt-nav-link {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.96rem !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
  padding: 0.4rem 0.8rem !important;
  border-radius: 9999px !important;
  position: relative !important;
}

.zt-nav-link:hover {
  color: #fbbf24 !important;
  background: rgba(201, 150, 47, 0.16) !important;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.7) !important;
}

/* --------------------------------------------------------
   HOME SECTION 1: HERO (Deep Obsidian Black)
   -------------------------------------------------------- */
main>section:first-child {
  background-color: #050608 !important;
  position: relative;
}

/* --------------------------------------------------------
   HOME SECTION 2: PRODUCTS (#products) - (Crisp Pure White)
   -------------------------------------------------------- */
#products {
  background-color: #ffffff !important;
  border-top: 1px solid rgba(201, 150, 47, 0.25) !important;
  border-bottom: 1px solid rgba(201, 150, 47, 0.25) !important;
  position: relative;
  color: #1e293b;
}

#products:before {
  display: none !important;
}

#products .text-xs.tracking-\[0\.3em\],
#products span.text-gold-600 {
  color: #926107 !important;
  font-weight: 800 !important;
}

#products h2 {
  color: #0f172a !important;
}

/* Product Cards on White */
#products .zt-product-copy .zt-product-number {
  color: rgba(184, 128, 26, 0.45) !important;
  font-weight: 900 !important;
}

#products .zt-product-glow:before {
  background: rgba(205, 154, 54, 0.12) !important;
}

#products .zt-product-visual {
  filter: drop-shadow(0 20px 35px rgba(0, 0, 0, 0.08)) !important;
}

/* --------------------------------------------------------
   HOME SECTION 3: ABOUT / STATS (#about) - (Deep Luxury Black)
   -------------------------------------------------------- */
#about {
  background-color: #07080b !important;
  border-top: 1px solid rgba(201, 150, 47, 0.25) !important;
  border-bottom: 1px solid rgba(201, 150, 47, 0.25) !important;
  position: relative;
}

#about .text-xs.tracking-\[0\.3em\],
#about span.text-gold-600 {
  color: #e4b95b !important;
}

#about h2 {
  color: #f8fafc !important;
}

#about p.text-ink-300 {
  color: #cbd5e1 !important;
}

#about .grid-cols-2>div {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(201, 150, 47, 0.3) !important;
  backdrop-filter: blur(12px) !important;
}

#about .grid-cols-2>div:hover {
  border-color: rgba(228, 185, 91, 0.6) !important;
  box-shadow: 0 12px 30px -10px rgba(201, 150, 47, 0.25) !important;
}

#about .grid-cols-2 p.text-ink-400 {
  color: #94a3b8 !important;
}

/* --------------------------------------------------------
   HOME SECTION 4: CLIENTS (#clients) - (Crisp Pure White)
   -------------------------------------------------------- */
#clients {
  background-color: #ffffff !important;
  border-top: 1px solid rgba(201, 150, 47, 0.25) !important;
  border-bottom: 1px solid rgba(201, 150, 47, 0.25) !important;
  position: relative;
  color: #1e293b;
}

#clients h2 {
  color: #0f172a !important;
}

#clients .zt-clients-strip>.pointer-events-none:first-child {
  background: linear-gradient(to left, #ffffff 0%, rgba(255, 255, 255, 0) 100%) !important;
}

#clients .zt-clients-strip>.pointer-events-none:nth-child(2) {
  background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0) 100%) !important;
}

/* --------------------------------------------------------
   HOME SECTION 5: CONTACT & FOOTER (#contact) - (Deep Luxury Black)
   -------------------------------------------------------- */
#contact {
  background-color: #050608 !important;
  border-top: 1px solid rgba(201, 150, 47, 0.3) !important;
  position: relative;
}

#contact h2 {
  color: #f8fafc !important;
}

#contact p.text-ink-300 {
  color: #cbd5e1 !important;
}

#contact .space-y-4>div {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(201, 150, 47, 0.25) !important;
  backdrop-filter: blur(10px) !important;
}

#contact .space-y-4>div:hover {
  border-color: rgba(228, 185, 91, 0.6) !important;
  box-shadow: 0 8px 25px rgba(201, 150, 47, 0.2) !important;
}

#contact .space-y-4 p.text-ink-400 {
  color: #94a3b8 !important;
}

#contact .space-y-4 p.text-ink-100 {
  color: #f8fafc !important;
}

/* ========================================================
   SCROLL DOWN INDICATOR ANIMATIONS
   ======================================================== */
@keyframes zt-droplet-slide {
  0% {
    top: 0;
    opacity: 0;
    transform: scaleY(0.5);
  }

  20% {
    opacity: 1;
    transform: scaleY(1.3);
  }

  75% {
    opacity: 1;
    transform: scaleY(1);
  }

  100% {
    top: calc(100% - 14px);
    opacity: 0;
    transform: scaleY(0.4);
  }
}

@keyframes zt-arrow-wave-1 {

  0%,
  100% {
    opacity: 0.2;
    transform: translateY(-2px);
  }

  50% {
    opacity: 0.95;
    transform: translateY(3px);
  }
}

@keyframes zt-arrow-wave-2 {

  0%,
  100% {
    opacity: 0.15;
    transform: translateY(-2px);
  }

  60% {
    opacity: 1;
    transform: translateY(4px);
  }
}

.zt-scroll-dot {
  animation: zt-droplet-slide 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.zt-scroll-arrow-1 {
  animation: zt-arrow-wave-1 2.2s ease-in-out infinite;
  animation-delay: 0.35s;
}

.zt-scroll-arrow-2 {
  animation: zt-arrow-wave-2 2.2s ease-in-out infinite;
  animation-delay: 0.55s;
}

.zt-scroll-indicator {
  cursor: pointer;
  z-index: 20;
}

.zt-scroll-indicator:hover {
  transform: translate(-50%, 5px) scale(1.1) !important;
  filter: drop-shadow(0 0 14px rgba(234, 179, 8, 0.75));
}

/* CTA Button Luxury Shine, Breathing Glow & Attention-Grabbing Wiggle/Shake */
@keyframes zt-btn-shine {
  0% {
    transform: translateX(200%) skewX(-25deg);
  }
  30%, 100% {
    transform: translateX(-200%) skewX(-25deg);
  }
}

@keyframes zt-gold-pulse {
  0%, 100% {
    box-shadow: 0 4px 14px rgba(200, 144, 32, 0.3), 0 0 0 0 rgba(200, 144, 32, 0.45);
  }
  50% {
    box-shadow: 0 6px 22px rgba(200, 144, 32, 0.55), 0 0 0 6px rgba(200, 144, 32, 0);
  }
}

@keyframes zt-btn-wiggle {
  0%, 65%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  68% {
    transform: translate3d(-4px, 0, 0) rotate(-2deg);
  }
  72% {
    transform: translate3d(5px, 0, 0) rotate(2deg);
  }
  76% {
    transform: translate3d(-4px, 0, 0) rotate(-1.5deg);
  }
  80% {
    transform: translate3d(4px, 0, 0) rotate(1.5deg);
  }
  84% {
    transform: translate3d(-2px, 0, 0) rotate(-0.5deg);
  }
  88% {
    transform: translate3d(1px, 0, 0) rotate(0.5deg);
  }
  92% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}

.zt-cta-btn {
  animation: zt-gold-pulse 2.8s ease-in-out infinite, zt-btn-wiggle 4s ease-in-out infinite;
}

.zt-cta-shine {
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  animation: zt-btn-shine 3.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
}