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

:root {
  --clr-primary: #d4a017;      /* Lamborghini gold/bronze accent */
  --clr-primary-dark: #b8860b;
  --clr-dark: #0a0a0a;         /* near-black, brand tone */
  --clr-text: #1a1a1a;
  --clr-muted: #6b6b6b;
  --clr-border: #e6e6e6;
  --clr-white: #fff;

  /* System font stack only — no external / online fonts */
  --font-display: 'Segoe UI', 'Arial Narrow', Arial, sans-serif;
  --font-body: 'Segoe UI', Tahoma, Arial, sans-serif;

  --container-width: 1200px;
  --header-height: 78px;

  /* Reusable hover shadow tokens — used across the header for a
     consistent "premium lift" feel on interactive elements */
  --shadow-chip: 0 4px 10px rgba(10, 10, 10, .06);
  --shadow-glow-sm: 0 6px 16px rgba(212, 160, 23, .22);
  --shadow-glow-md: 0 10px 26px rgba(212, 160, 23, .26);
  --shadow-glow-lg: 0 22px 48px rgba(212, 160, 23, .2), 0 4px 14px rgba(0,0,0,.1);

  /* New tokens for the mega-dropdown upgrade */
  --clr-primary-soft: rgba(212, 160, 23, .12);
  --radius-card: 14px;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--clr-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

ul {
  list-style: none;
}

button {
  font: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* Font Awesome icons (top-bar social + header icon buttons) */
.top-bar__social i,
.main-header__icons i {
  display: block;
  line-height: 1;
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: 20px;
}

/* =========================================================
   TOP BAR
   ========================================================= */
.top-bar {
  background: var(--clr-white);
  border-bottom: 1px solid var(--clr-border);
  font-size: 13.5px;
  /* stacking: keep the top bar below the main header's dropdown */
  position: relative;
  z-index: 1;
}

.top-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
}

.top-bar__links {
  display: flex;
  align-items: center;
  gap: 18px;
}

.top-bar__links a {
  position: relative;
}

.top-bar__links a .sep {
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: var(--clr-border);
  transition: background .25s ease, height .25s ease;
}

.top-bar__links a:hover .sep {
  background: var(--clr-primary-dark);
  height: 16px;
}

.top-bar__links a,
.top-bar__account a {
  position: relative;
  display: inline-block;
  color: var(--clr-text);
  border-radius: 4px;
  transition: color .25s ease, letter-spacing .25s ease, transform .25s ease, box-shadow .3s ease;
  letter-spacing: .3px;
  padding: 2px 1px;
}

/* smaller matching bracket tick, unifies the top bar with the main nav */
.top-bar__links a::before,
.top-bar__links a::after,
.top-bar__account a::before,
.top-bar__account a::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 4px;
  height: 4px;
  border: 1.4px solid var(--clr-primary-dark);
  opacity: 0;
  transition: opacity .2s ease, transform .25s cubic-bezier(.2, .8, .2, 1);
}

.top-bar__links a::before,
.top-bar__account a::before {
  left: -1px;
  border-right: none;
  border-bottom: none;
  transform: translate(8px, -50%) rotate(-45deg);
}

.top-bar__links a::after,
.top-bar__account a::after {
  right: -1px;
  border-left: none;
  border-top: none;
  transform: translate(-8px, -50%) rotate(-45deg);
}

.top-bar__links a:hover,
.top-bar__account a:hover {
  color: var(--clr-primary-dark);
  letter-spacing: .8px;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(212, 160, 23, .14);
}

.top-bar__links a:hover::before,
.top-bar__account a:hover::before {
  opacity: 1;
  transform: translate(-4px, -50%) rotate(-45deg);
}

.top-bar__links a:hover::after,
.top-bar__account a:hover::after {
  opacity: 1;
  transform: translate(4px, -50%) rotate(-45deg);
}

.top-bar__right {
  display: flex;
  align-items: center;
  gap: 26px;
}

.top-bar__account {
  display: flex;
  gap: 22px;
}

.top-bar__social {
  display: flex;
  align-items: center;
  gap: 14px;
}

.top-bar__social a {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  transition: box-shadow .3s ease, background .3s ease, transform .25s ease;
}

.top-bar__social i {
  font-size: 14px;
  color: var(--clr-muted);
  transition: color .2s ease, transform .2s ease;
}

.top-bar__social a:hover {
  background: rgba(212, 160, 23, .08);
  box-shadow: 0 6px 16px rgba(212, 160, 23, .2);
  transform: translateY(-2px);
}

.top-bar__social a:hover i {
  color: var(--clr-primary-dark);
  transform: translateY(-1px);
}

/* =========================================================
   MAIN HEADER
   ========================================================= */
.main-header {
  background: var(--clr-white);
  border-bottom: 1px solid var(--clr-border);
  position: relative;
  /* Header bar shadow */
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
  transition: box-shadow .3s ease;
  z-index: 5;
}

.main-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height);
  gap: 20px;
  position: relative;
}

/* ---- Logo ---- */
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  color: var(--clr-dark);
  letter-spacing: 2px;
  white-space: nowrap;
  flex-shrink: 0;
}

.logo__badge {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: var(--clr-dark);
  color: var(--clr-primary);
  font-size: 20px;
  font-weight: 700;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); /* diamond shield, brand-nodding shape */
  transition: box-shadow .3s ease, transform .3s ease;
}

.logo__badge::after {
  content: '';
  position: absolute;
  inset: -30%;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.42) 50%, transparent 65%);
  transform: translateX(-140%) rotate(12deg);
  pointer-events: none;
}

.logo:hover .logo__badge::after {
  animation: logoBadgeShine .7s ease forwards;
}

@keyframes logoBadgeShine {
  to { transform: translateX(140%) rotate(12deg); }
}

/* ===== Logo Ignition Effect + Diamond Rotate (on hover) ===== */
.logo:hover .logo__badge {
  transform: rotate(45deg);
  animation: ignitionPulse .9s ease-in-out infinite;
}

@keyframes ignitionPulse {
  0%, 100% {
    box-shadow: 0 0 0 rgba(212, 160, 23, 0), 0 10px 22px rgba(212, 160, 23, .18);
  }
  50% {
    box-shadow: 0 0 14px 4px rgba(212, 160, 23, .55), 0 14px 30px rgba(212, 160, 23, .3);
  }
}

/* ---- Main Navigation ---- */
.main-nav > ul {
  display: flex;
  align-items: center;
  gap: 34px;
}

.main-nav li {
  position: relative;
}

.main-nav a {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--clr-text);
  padding: 8px 10px;
  border-radius: 6px;
  transition: color .3s ease, letter-spacing .3s ease, transform .3s cubic-bezier(.2,.8,.2,1),
              text-shadow .3s ease, box-shadow .3s ease, background .3s ease;
}

.main-nav a::before,
.main-nav a::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  border: 2px solid var(--clr-primary-dark);
  opacity: 0;
  transition: opacity .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
}

.main-nav a::before {
  left: -2px;
  border-right: none;
  border-bottom: none;
  transform: translate(10px, -50%) rotate(-45deg);
}

.main-nav a::after {
  right: -2px;
  border-left: none;
  border-top: none;
  transform: translate(-10px, -50%) rotate(-45deg);
}

/* underline that grows from the center outward, beneath the bracket */
.main-nav a span.underline-fx {
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 0;
  height: 2px;
  background: var(--clr-primary-dark);
  transition: width .3s ease, left .3s ease;
}

.main-nav a:hover,
.main-nav a:focus-visible {
  color: var(--clr-primary-dark);
  letter-spacing: 1px;
  transform: translateY(-2px);
  text-shadow: 0 0 14px rgba(212, 160, 23, .35);
  background: rgba(212, 160, 23, .07);
  box-shadow: var(--shadow-glow-sm);
}

.main-nav a:hover::before,
.main-nav a:focus-visible::before {
  opacity: 1;
  transform: translate(-6px, -50%) rotate(-45deg);
}

.main-nav a:hover::after,
.main-nav a:focus-visible::after {
  opacity: 1;
  transform: translate(6px, -50%) rotate(-45deg);
}

.main-nav a:hover span.underline-fx,
.main-nav a:focus-visible span.underline-fx {
  width: 100%;
  left: 0;
}


.chevron {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 4px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
}


.has-dropdown {
  position: relative;
}

.mega-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translate(-50%, 14px) scale(.94) rotateX(-6deg);
  transform-origin: top center;
  perspective: 900px;
  display: flex;
  gap: 40px;
  min-width: 600px;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(212, 160, 23, .2);
  border-radius: 20px;
  box-shadow: 0 24px 50px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.02);
  padding: 30px 34px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, transform .45s cubic-bezier(.2,.8,.2,1), visibility .3s ease, box-shadow .6s ease;
  z-index: 999;
  overflow: hidden;
}

/* soft floating gold blobs, purely decorative background glow —
   drift slowly once the panel is open, like heat-haze off an engine */
.mega-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(36px);
  background: radial-gradient(circle, rgba(212,160,23,.35), transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease .1s;
  z-index: -1;
}

.mega-blob--a { width: 200px; height: 200px; top: -60px; left: 10%; }
.mega-blob--b { width: 240px; height: 240px; bottom: -90px; right: 5%; }

.has-dropdown.mega:hover .mega-blob,
.has-dropdown.mega:focus-within .mega-blob {
  opacity: 1;
  animation: blobDrift 6s ease-in-out infinite;
}

.mega-blob--b { animation-delay: -3s; }

@keyframes blobDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(14px, -10px) scale(1.08); }
}

/* slow pulsing gold halo around the whole panel while it's open */
.has-dropdown.mega:hover .mega-dropdown,
.has-dropdown.mega:focus-within .mega-dropdown {
  animation: panelGlow 3.2s ease-in-out .3s infinite;
}

@keyframes panelGlow {
  0%, 100% { box-shadow: 0 24px 50px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.02), 0 0 0 rgba(212,160,23,0); }
  50%      { box-shadow: 0 24px 50px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.02), 0 0 34px 4px rgba(212,160,23,.22); }
}

/* thin gold rule across the top of the panel, with a traveling glow
   like a comet sweeping across a rev-gauge dash */
.mega-dropdown::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--clr-primary-dark), var(--clr-primary) 50%, var(--clr-primary-dark));
  background-size: 220% 100%;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .4s ease .08s;
}

/* subtle carbon-fibre style diagonal texture, fades in with the panel */
.mega-dropdown::after {
  display: none;
}

.has-dropdown.mega:hover .mega-dropdown,
.has-dropdown.mega:focus-within .mega-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1) rotateX(0deg);
}

.has-dropdown.mega:hover .mega-dropdown::before {
  transform: scaleX(1);
  animation: megaLineTravel 2s linear infinite;
}

.has-dropdown.mega:hover .mega-dropdown::after {
  opacity: 1;
}

@keyframes megaLineTravel {
  0%   { background-position: 0% 0; }
  100% { background-position: -220% 0; }
}

/* diagonal shimmer sweep that runs once across the whole panel the
   moment it opens — a quick "power-on" flash */
.mega-dropdown span.shimmer-sweep {
  content: '';
  position: absolute;
  top: -20%;
  left: -40%;
  width: 35%;
  height: 140%;
  background: linear-gradient(115deg, transparent, rgba(212,160,23,.28), transparent);
  transform: skewX(-18deg) translateX(-40%);
  opacity: 0;
  pointer-events: none;
}

.has-dropdown.mega:hover .mega-dropdown span.shimmer-sweep {
  animation: shimmerSweep .9s ease .25s 1;
}

@keyframes shimmerSweep {
  0%   { opacity: 0; transform: skewX(-18deg) translateX(-40%); }
  15%  { opacity: 1; }
  70%  { opacity: .8; }
  100% { opacity: 0; transform: skewX(-18deg) translateX(340%); }
}

.has-dropdown:hover .chevron {
  transform: rotate(225deg) translateY(2px);
  color: var(--clr-primary-dark);
}

.mega-col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 178px;
  opacity: 0;
  transition: opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}

.mega-col:nth-child(2) { transform: translateX(-16px); }
.mega-col:nth-child(3) { transform: translateY(10px); transition-delay: .06s; }
.mega-col:nth-child(4) { transform: translateX(16px); transition-delay: .12s; }

.has-dropdown.mega:hover .mega-col,
.has-dropdown.mega:focus-within .mega-col {
  opacity: 1;
  transform: translate(0, 0);
}

.mega-col:not(:last-child) {
  padding-right: 40px;
  border-right: 1px solid var(--clr-border);
}

/* ---- column heading: hexagon icon badge + gradient name + caption ---- */
.mega-col__title {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 11px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--clr-dark);
  padding-bottom: 14px;
  margin-bottom: 14px;
}


.mega-col__title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--clr-border);
}

.mega-col__title::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--clr-primary-dark), var(--clr-primary));
  transition: width .5s cubic-bezier(.2,.8,.2,1) .2s;
  z-index: 1;
}

.has-dropdown.mega:hover .mega-col__title::before,
.has-dropdown.mega:focus-within .mega-col__title::before {
  width: 46px;
}

.mega-col__title-text {
  background: linear-gradient(90deg, var(--clr-dark) 0%, var(--clr-dark) 60%, var(--clr-primary-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mega-col__icon {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  font-size: 13px;
  color: var(--clr-primary-dark);
  background: var(--clr-primary-soft);
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%); /* hexagon badge */
  box-shadow: 0 0 0 rgba(212, 160, 23, 0);
  transition: box-shadow .4s ease .1s, transform .3s ease;
}

/* thin dashed ring that spins slowly around the hexagon once open */
.mega-col__icon::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px dashed rgba(212, 160, 23, .55);
  opacity: 0;
  transition: opacity .3s ease .15s;
}

.has-dropdown.mega:hover .mega-col__icon::before,
.has-dropdown.mega:focus-within .mega-col__icon::before {
  opacity: 1;
  animation: ringSpin 6s linear infinite;
}

@keyframes ringSpin {
  to { transform: rotate(360deg); }
}

.has-dropdown.mega:hover .mega-col__icon,
.has-dropdown.mega:focus-within .mega-col__icon {
  box-shadow: 0 0 14px 3px rgba(212, 160, 23, .5);
  animation: iconPulse 1.8s ease-in-out .3s infinite;
}

@keyframes iconPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.1); }
}

/* one-line caption explaining what the column is for — always on
   its own row beneath the icon + name */
.mega-col__desc {
  flex-basis: 100%;
  font-size: 11.5px;
  font-weight: 400;
  font-style: normal;
  text-transform: none;
  letter-spacing: .2px;
  color: var(--clr-muted);
  margin-top: 2px;
}

.mega-col a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 14.5px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: var(--clr-text);
  padding: 10px 14px 10px 16px;
  margin: 0 -10px;
  border-radius: 10px;
  border: 1px solid transparent;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1),
              color .2s ease, padding-left .25s cubic-bezier(.2,.8,.2,1),
              box-shadow .3s ease, border-color .3s ease, background .3s ease;
}

.mega-col a i:first-child {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 11px;
  color: var(--clr-primary-dark);
  background: var(--clr-primary-soft);
  transition: background .25s ease, color .25s ease, transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}

.mega-col a .link-label {
  flex: 1;
}

/* small arrow that slides in from the right on hover, right after
   the label — a quick "go" cue */
.mega-col a .link-arrow {
  display: inline-flex;
  font-size: 10px;
  color: var(--clr-primary-dark);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .25s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}

.mega-col a:hover .link-arrow {
  opacity: 1;
  transform: translateX(0);
}

.has-dropdown.mega:hover .mega-col a,
.has-dropdown.mega:hover .feature-card {
  opacity: 1;
  transform: translateX(0);
}

.has-dropdown.mega:hover .mega-col a:nth-child(3) { transition-delay: .08s; }
.has-dropdown.mega:hover .mega-col a:nth-child(4) { transition-delay: .14s; }
.has-dropdown.mega:hover .mega-col a:nth-child(5) { transition-delay: .2s; }
.has-dropdown.mega:hover .mega-col a:nth-child(6) { transition-delay: .26s; }

.mega-col a::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 50%;
  width: 3px;
  height: 0;
  border-radius: 3px;
  background: var(--clr-primary-dark);
  box-shadow: 0 0 0 rgba(212, 160, 23, 0);
  transform: translateY(-50%);
  transition: height .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}

.mega-col a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(212,160,23,.1), rgba(212,160,23,.02));
  opacity: 0;
  transition: opacity .3s ease;
  z-index: -1;
}

.mega-col a.underline-fx {
  display: none;
}

.mega-col a:hover {
  color: var(--clr-primary-dark);
  padding-left: 22px;
  border-color: rgba(212, 160, 23, .22);
  box-shadow: var(--shadow-glow-sm);
  transform: translateX(2px) scale(1.02);
}

.mega-col a:hover i:first-child {
  color: var(--clr-white);
  background: var(--clr-primary-dark);
  transform: rotate(-10deg) scale(1.15);
  box-shadow: 0 0 10px 2px rgba(212, 160, 23, .55);
}

.mega-col a:hover::before {
  height: 60%;
  box-shadow: 0 0 8px 1px rgba(212, 160, 23, .6);
}

.mega-col a:hover::after {
  opacity: 1;
}

/* ---- Spotlight column: feature card for a highlighted model ---- */
.mega-col--feature {
  min-width: 190px;
}

.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: 20px 18px;
  border-radius: var(--radius-card);
  background: linear-gradient(155deg, var(--clr-dark) 0%, #1c1c1c 100%);
  color: var(--clr-white);
  overflow: hidden;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .4s ease .1s, transform .35s cubic-bezier(.2,.8,.2,1),
              box-shadow .35s ease;
}

/* faint diagonal racing-stripe texture in the background of the card */
.feature-card__stripes {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(58deg, rgba(212,160,23,.07) 0 8px, transparent 8px 26px);
  pointer-events: none;
}

/* corner ribbon reading NEW, tucked in the top-right corner */
.feature-card__ribbon {
  position: absolute;
  top: 14px;
  right: -30px;
  width: 110px;
  padding: 3px 0;
  background: linear-gradient(90deg, var(--clr-primary-dark), var(--clr-primary));
  color: var(--clr-dark);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(40deg);
  box-shadow: 0 4px 10px rgba(0,0,0,.3);
}

.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
  padding: 1.5px;
  background: conic-gradient(from 0deg, var(--clr-primary), transparent 25%, transparent 75%, var(--clr-primary));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: featureBorderSpin 2.6s linear infinite;
  opacity: .9;
}

@keyframes featureBorderSpin {
  to { transform: rotate(360deg); }
}

.feature-card:hover {
  box-shadow: 0 18px 38px rgba(0,0,0,.4), 0 0 0 1px rgba(212,160,23,.35), 0 0 26px rgba(212,160,23,.2);
  transform: translateY(-4px) scale(1.02);
}

.feature-card__eyebrow {
  position: relative;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--clr-primary);
}

.feature-card__name {
  position: relative;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .5px;
}

.feature-card__stat {
  position: relative;
  font-size: 12px;
  color: rgba(255,255,255,.7);
}

.feature-card__stat b {
  color: var(--clr-primary);
}

/* pill-shaped CTA button with a gold fill that sweeps in on hover */
.feature-card__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(212, 160, 23, .55);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--clr-primary);
  overflow: hidden;
  transition: gap .25s ease, color .3s ease, border-color .3s ease;
}

.feature-card__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--clr-primary-dark), var(--clr-primary));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
  z-index: -1;
}

.feature-card__cta i {
  font-size: 11px;
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}

.feature-card__cta:hover {
  gap: 10px;
  color: var(--clr-dark);
  border-color: transparent;
}

.feature-card__cta:hover::before {
  transform: scaleX(1);
}

.feature-card__cta:hover i {
  transform: translateX(3px);
}

/* ---- Header Icons ---- */
.main-header__icons {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 17px;
  color: var(--clr-text);
  transition: color .2s ease, transform .2s ease;
  cursor: pointer;
}

.icon-btn:hover {
  color: var(--clr-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-sm);
  border-radius: 50%;
}

/* soft gold glow that fills in behind the icon on hover, sitting
   behind the icon glyph (z-index -1) — echoes the mega-dropdown glow */
.icon-btn::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,160,23,.16) 0%, rgba(212,160,23,0) 72%);
  transform: scale(0);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
  z-index: -1;
}

.icon-btn:hover::before {
  transform: scale(1);
}

/* ===== Icon Underline Sweep (search / account / cart) ===== */
.icon-btn::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: var(--clr-primary-dark);
  transition: width .3s ease, left .3s ease;
}

.icon-btn:hover::after {
  width: 100%;
  left: 0;
}

.cart-badge {
  position: absolute;
  top: -9px;
  right: -11px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 50%;
  background: var(--clr-primary-dark);
  color: var(--clr-white);
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
  line-height: 1;
  transition: box-shadow .3s ease;
  /* ===== Cart Badge Bounce on Load ===== */
  animation: badgeBounce .6s cubic-bezier(.36,1.5,.64,1) 1.1s both;
}

.cart-btn:hover .cart-badge {
  box-shadow: 0 0 0 4px rgba(212, 160, 23, .18);
}

@keyframes badgeBounce {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.25); }
  80%  { transform: scale(.9); }
  100% { transform: scale(1); }
}

/* ===== Search Icon Expand ===== */
.search-toggle-checkbox {
  display: none;
}

.search-field {
  width: 0;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--clr-text);
  opacity: 0;
  overflow: hidden;
  outline: none;
  order: -1; /* sits to the left of the search icon, expanding toward the nav */
  transition: width .35s ease, opacity .25s ease, padding .35s ease, border-color .25s ease, margin .35s ease;
}

.search-field::placeholder {
  color: var(--clr-muted);
}

.search-toggle-checkbox:checked ~ .main-header .search-field {
  width: 176px;
  padding: 4px 2px;
  margin-right: 4px;
  opacity: 1;
  border-bottom-color: var(--clr-primary-dark);
}

.search-field:focus {
  box-shadow: 0 4px 10px rgba(212, 160, 23, .18);
}

.search-btn i,
.icon-btn i {
  transition: transform .35s cubic-bezier(.2,.8,.2,1), color .25s ease, filter .25s ease;
}

.search-toggle-checkbox:checked ~ .main-header .search-btn i {
  color: var(--clr-primary-dark);
  transform: rotate(90deg);
  filter: drop-shadow(0 0 8px rgba(212,160,23,.55));
}

/* =========================================================
   CSS-ONLY MOBILE NAV (checkbox hack — no JavaScript)
   ========================================================= */
.nav-toggle-checkbox {
  display: none;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--clr-text);
  border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease;
}

.nav-backdrop {
  display: none;
}

/* =========================================================
   PROMO STRIP
   ========================================================= */
.promo-strip {
  background: var(--clr-dark);
  color: var(--clr-white);
  text-align: center;
  padding: 11px 20px;
  font-size: 14px;
  letter-spacing: .3px;
  /* stacking: sits below the main header so its dropdown always
     renders on top of this strip, never underneath it */
  position: relative;
  z-index: 1;
}

.promo-strip a {
  color: var(--clr-primary);
  text-decoration: underline;
  font-weight: 600;
}

.top-bar,
.main-header,
.promo-strip {
  opacity: 0;
  transform: translateY(-10px);
  animation: headerReveal .6s ease forwards;
}

.top-bar     { animation-delay: 0s; }
.main-header { animation-delay: .15s; }
.promo-strip { animation-delay: .3s; }

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

/* =========================================================
   SITE HEADER — non-sticky (scrolls away with the page) + premium motion
   ========================================================= */
.site-header {
  position: relative;
  z-index: 200;
  isolation: isolate;
}

.site-header::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,160,23,.55), transparent);
  pointer-events: none;
  z-index: 8;
}

/* =========================================================
   HEADER — premium hover / load motion
   ========================================================= */
.top-bar {
  background: linear-gradient(180deg, #fff, #fbf8f0);
}

.top-bar__links a,
.top-bar__account a {
  transition: color .25s ease, letter-spacing .25s ease, transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, text-shadow .3s ease, background .25s ease;
}

.top-bar__links a:hover,
.top-bar__account a:hover {
  text-shadow: 0 0 12px rgba(212,160,23,.45);
  background: rgba(212,160,23,.06);
  padding-inline: 6px;
}

.top-bar__social a {
  animation: headerSocialFloat 3.4s ease-in-out infinite;
}

.top-bar__social li:nth-child(2) a { animation-delay: .18s; }
.top-bar__social li:nth-child(3) a { animation-delay: .36s; }
.top-bar__social li:nth-child(4) a { animation-delay: .54s; }

@keyframes headerSocialFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

.top-bar__social a:hover {
  animation: none;
  background: rgba(212, 160, 23, .14);
  box-shadow: 0 8px 18px rgba(212, 160, 23, .32);
  transform: translateY(-3px) scale(1.14) rotate(-8deg);
}

.top-bar__social a:hover i {
  color: var(--clr-primary-dark);
  transform: scale(1.1);
}

.main-header {
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: 0 10px 28px rgba(10,10,10,.08);
}

.logo {
  transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .35s ease, letter-spacing .35s ease, gap .35s ease;
}

.logo:hover {
  transform: translateY(-2px);
  letter-spacing: 3.2px;
  gap: 14px;
  filter: drop-shadow(0 10px 18px rgba(212,160,23,.32));
}

.logo__badge {
  animation: headerBadgeIdle 2.8s ease-in-out infinite;
}

@keyframes headerBadgeIdle {
  0%, 100% { box-shadow: 0 0 0 rgba(212,160,23,0); }
  50% { box-shadow: 0 0 16px 3px rgba(212,160,23,.45); }
}

.logo__text {
  background: linear-gradient(90deg, var(--clr-dark) 0%, var(--clr-dark) 38%, var(--clr-primary-dark) 52%, #e8c547 62%, var(--clr-dark) 78%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: logoGoldShift 4.2s linear infinite;
  transition: transform .35s ease;
}

.logo:hover .logo__text {
  transform: translateX(2px);
}

@keyframes logoGoldShift {
  to { background-position: -220% 0; }
}

.main-nav > ul > li {
  opacity: 0;
  animation: headerReveal .55s ease forwards;
}

.main-nav > ul > li:nth-child(1) { animation-delay: .18s; }
.main-nav > ul > li:nth-child(2) { animation-delay: .24s; }
.main-nav > ul > li:nth-child(3) { animation-delay: .3s; }
.main-nav > ul > li:nth-child(4) { animation-delay: .36s; }
.main-nav > ul > li:nth-child(5) { animation-delay: .42s; }
.main-nav > ul > li:nth-child(6) { animation-delay: .48s; }

.main-nav > ul > li > a {
  transition: color .3s ease, letter-spacing .3s ease, transform .35s cubic-bezier(.2,.8,.2,1),
              text-shadow .3s ease, box-shadow .3s ease, background .3s ease;
}

.main-nav > ul > li > a:hover,
.main-nav > ul > li > a:focus-visible {
  transform: translateY(-3px) scale(1.04);
  box-shadow: var(--shadow-glow-sm), 0 0 0 1px rgba(212,160,23,.2);
}

.icon-btn {
  transition: color .2s ease, transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}

.icon-btn:hover {
  transform: translateY(-3px) scale(1.12);
  box-shadow: var(--shadow-glow-sm);
}

.icon-btn:hover i {
  color: var(--clr-primary-dark);
  filter: drop-shadow(0 0 8px rgba(212,160,23,.45));
}

.cart-btn:hover i {
  transform: rotate(-12deg) scale(1.08);
}

.cart-badge {
  animation: badgeBounce .6s cubic-bezier(.36,1.5,.64,1) 1.1s both, headerBadgeIdle 1.8s ease-in-out 1.8s infinite;
}

.cart-btn:hover .cart-badge {
  box-shadow: 0 0 0 5px rgba(212, 160, 23, .2), 0 0 12px rgba(212,160,23,.55);
}

.search-field {
  transition: width .4s cubic-bezier(.2,.8,.2,1), opacity .25s ease, padding .4s ease, border-color .25s ease, margin .4s ease, box-shadow .3s ease;
}

.promo-strip {
  background: linear-gradient(180deg, #111111 0%, #0a0a0a 100%);
  box-shadow: inset 0 1px 0 rgba(212,160,23,.16);
}

.promo-strip a {
  position: relative;
  overflow: hidden;
  z-index: 1;
  display: inline-block;
  margin-left: 8px;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid rgba(212,160,23,.55);
  color: var(--clr-primary);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  font-size: 12px;
  transition: color .3s ease, letter-spacing .25s ease, transform .25s ease, box-shadow .25s ease;
}

.promo-strip a::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--clr-primary-dark), var(--clr-primary));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
  z-index: -1;
}

.promo-strip a::after {
  display: none;
}

.promo-strip a:hover {
  color: var(--clr-dark);
  letter-spacing: 1px;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(212,160,23,.32);
}

.promo-strip a:hover::before {
  transform: scaleX(1);
}

.nav-toggle span {
  background: linear-gradient(90deg, var(--clr-dark), var(--clr-primary-dark));
}

.nav-toggle:hover span {
  box-shadow: 0 0 8px rgba(212,160,23,.35);
}

/* =========================================================
   RESPONSIVE — Small desktop / large tablet (≤ 1200px)
   ========================================================= */
@media (max-width: 1200px) {
  .mega-dropdown {
    min-width: 480px;
    gap: 28px;
  }
}

/* =========================================================
   RESPONSIVE — Tablet (≤ 992px)
   ========================================================= */
@media (max-width: 992px) {
  .top-bar__account {
    display: none;
  }

  .main-nav > ul {
    gap: 20px;
  }

  .main-nav a {
    font-size: 13.5px;
  }

  .search-toggle-checkbox:checked ~ .main-header .search-field {
    width: 120px;
  }

  .mega-dropdown {
    left: auto;
    right: 0;
    transform: translate(0, 14px) scale(.94) rotateX(-6deg);
    min-width: 440px;
  }

  .has-dropdown.mega:hover .mega-dropdown,
  .has-dropdown.mega:focus-within .mega-dropdown {
    transform: translate(0, 0) scale(1) rotateX(0deg);
  }
}

/* =========================================================
   RESPONSIVE — Mobile (≤ 768px)
   ========================================================= */
@media (max-width: 768px) {
  .top-bar__links {
    gap: 14px;
    font-size: 12px;
  }

  .top-bar__inner {
    flex-wrap: wrap;
    row-gap: 6px;
    padding-block: 6px;
  }

  .top-bar__right {
    gap: 14px;
  }

  .nav-toggle {
    display: flex;
    z-index: 110;
  }

  .logo {
    font-size: 17px;
  }

  .logo__badge {
    width: 34px;
    height: 34px;
    font-size: 16px;
  }

  /* slide-in mobile menu, driven purely by :checked */
  .main-nav {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(78vw, 320px);
    background: var(--clr-white);
    box-shadow: -8px 0 30px rgba(0,0,0,.18);
    padding: 90px 28px 28px;
    transform: translateX(100%);
    transition: transform .32s ease;
    z-index: 105;
    overflow-y: auto;
  }

  .nav-toggle-checkbox:checked ~ .main-header .main-nav {
    transform: translateX(0);
  }

  .main-nav > ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .main-nav > ul > li {
    width: 100%;
  }

  .main-nav a {
    display: block;
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid var(--clr-border);
  }

  .mega-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: transparent;
    border: none;
    box-shadow: none;
    flex-direction: column;
    gap: 4px;
    padding: 6px 0 6px 14px;
    min-width: 0;
  }

  .mega-dropdown::before,
  .mega-dropdown::after,
  .mega-dropdown span.shimmer-sweep,
  .mega-blob {
    display: none;
  }

  .mega-dropdown,
  .has-dropdown.mega:hover .mega-dropdown {
    animation: none;
    border-radius: 0;
  }

  .mega-col,
  .has-dropdown.mega:hover .mega-col {
    opacity: 1;
    transform: none;
    transition-delay: 0s !important;
  }

  .mega-col:not(:last-child) {
    padding-right: 0;
    border-right: none;
    padding-bottom: 12px;
    margin-bottom: 8px;
    border-bottom: 1px dashed var(--clr-border);
  }

  .mega-col__title {
    color: var(--clr-primary-dark);
    padding-bottom: 6px;
    margin-bottom: 6px;
  }

  .mega-col__title::after {
    display: none;
  }

  .mega-col__title::before {
    width: 30px;
  }

  .mega-col__title-text {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: var(--clr-primary-dark);
  }

  .mega-col__icon,
  .has-dropdown.mega:hover .mega-col__icon {
    box-shadow: 0 0 6px 1px rgba(212, 160, 23, .45);
    animation: none;
  }

  .mega-col__icon::before {
    display: none;
  }

  .mega-col__desc {
    color: var(--clr-muted);
  }

  .mega-col a,
  .mega-col a:hover {
    opacity: 1;
    transform: none;
    transition-delay: 0s !important;
    padding-left: 14px;
    margin: 0;
    box-shadow: none;
    border-color: transparent;
  }

  .mega-col a::before {
    height: 55%;
  }

  .mega-col a::after {
    display: none;
  }

  .mega-col a .link-arrow {
    opacity: 1;
    transform: none;
  }

  /* feature card stacks like a normal row group on mobile, no float
     animation needed since there's no hover state to trigger it */
  .mega-col--feature {
    min-width: 0;
  }

  .feature-card {
    opacity: 1;
    transform: none;
    padding: 16px;
  }

  .feature-card::before {
    animation: none;
  }

  .feature-card__ribbon {
    top: 10px;
    right: -34px;
  }

  .main-header__icons {
    gap: 14px;
  }

  /* hamburger → X animation, driven by the checkbox */
  .nav-toggle-checkbox:checked ~ .main-header .nav-toggle span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .nav-toggle-checkbox:checked ~ .main-header .nav-toggle span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle-checkbox:checked ~ .main-header .nav-toggle span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* backdrop overlay, shown only while menu is open */
  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease;
    z-index: 100;
  }

  .nav-toggle-checkbox:checked ~ .main-header .nav-backdrop {
    opacity: 1;
    visibility: visible;
  }

  /* search field: give it less room on small screens so it doesn't
     push the other icons / logo around */
  .search-toggle-checkbox:checked ~ .main-header .search-field {
    width: 110px;
  }
}

@media (max-width: 480px) {
  .promo-strip {
    font-size: 12px;
    padding: 9px 14px;
  }

  .top-bar__social {
    gap: 10px;
  }

  .search-toggle-checkbox:checked ~ .main-header .search-field {
    width: 90px;
  }

  .mega-col__title {
    font-size: 11px;
  }

  .feature-card__name {
    font-size: 18px;
  }
}

/* Respect users who've asked for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mega-dropdown span.shimmer-sweep,
  .has-dropdown.mega:hover .mega-col__icon,
  .has-dropdown.mega:hover .mega-dropdown,
  .mega-blob,
  .mega-col__icon::before,
  .feature-card::before,
  .logo:hover .logo__badge,
  .logo:hover .logo__badge::after,
  .logo__badge,
  .logo__text,
  .main-nav > ul > li,
  .cart-badge,
  .top-bar__social a {
    animation: none !important;
  }

  .main-nav > ul > li {
    opacity: 1;
  }
}

.hero-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(900px 380px at 12% -10%, rgba(212, 160, 23, .16), transparent 58%),
    radial-gradient(700px 420px at 92% 110%, rgba(212, 160, 23, .12), transparent 60%),
    linear-gradient(165deg, #ffffff 0%, #f7f3e8 42%, #efe6d2 100%);
}

.hero-section__grain,
.hero-section__orb,
.hero-section__grid {
  pointer-events: none;
  position: absolute;
}

.hero-section__grain {
  inset: 0;
  z-index: 0;
  opacity: .04;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(10, 10, 10, .45) 0 1px,
    transparent 1px 8px
  );
}

.hero-section__grid {
  inset: 0;
  z-index: 0;
  opacity: .07;
  background-image:
    linear-gradient(rgba(10,10,10,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,10,10,.18) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 70% 50%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 70% 50%, #000 20%, transparent 78%);
  animation: heroGridDrift 18s linear infinite;
}

@keyframes heroGridDrift {
  to { background-position: 48px 48px; }
}

.hero-section__orb {
  border-radius: 50%;
  filter: blur(40px);
  z-index: 0;
}

.hero-section__orb--a {
  width: 280px;
  height: 280px;
  top: -80px;
  left: 8%;
  background: rgba(212, 160, 23, .28);
  animation: heroOrb 9s ease-in-out infinite;
}

.hero-section__orb--b {
  width: 340px;
  height: 340px;
  right: -60px;
  bottom: -90px;
  background: rgba(184, 134, 11, .22);
  animation: heroOrb 11s ease-in-out infinite reverse;
}

@keyframes heroOrb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(24px, -18px) scale(1.12); }
}

.hero-section__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 640px;
}

.hero-content {
  flex: 0 1 540px;
  max-width: 540px;
  padding-block: 68px;
}

.hero-content__kicker,
.hero-content__eyebrow,
.hero-content__title,
.hero-content__desc,
.hero-content__actions,
.hero-stats {
  opacity: 0;
  transform: translateY(26px);
  animation: heroRise .75s cubic-bezier(.2, .8, .2, 1) forwards;
}

.hero-content__kicker { animation-delay: .06s; }
.hero-content__eyebrow { animation-delay: .16s; }
.hero-content__title { animation-delay: .24s; }
.hero-content__desc { animation-delay: .36s; }
.hero-content__actions { animation-delay: .48s; }
.hero-stats { animation-delay: .6s; }

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

.hero-content__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 6px 14px;
  border: 1px solid rgba(212, 160, 23, .5);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--clr-primary-dark);
  background: linear-gradient(90deg, rgba(212,160,23,.14), rgba(255,255,255,.4), rgba(212,160,23,.14));
  background-size: 200% 100%;
  box-shadow: 0 0 0 4px rgba(212, 160, 23, .06);
  animation: heroRise .75s cubic-bezier(.2, .8, .2, 1) .06s forwards, heroKickerGlow 3s linear infinite;
}

.hero-content__kicker i {
  animation: heroBolt 1.4s ease-in-out infinite;
}

@keyframes heroKickerGlow {
  to { background-position: -200% 0; }
}

@keyframes heroBolt {
  0%, 100% { transform: scale(1) rotate(0); filter: drop-shadow(0 0 0 transparent); }
  50% { transform: scale(1.18) rotate(-8deg); filter: drop-shadow(0 0 8px rgba(212,160,23,.8)); }
}

.hero-content__eyebrow {
  display: block;
  font-family: 'Brush Script MT', 'Segoe Script', 'Lucida Handwriting', cursive;
  font-size: 36px;
  color: var(--clr-primary-dark);
  line-height: 1;
  margin-bottom: 6px;
  text-shadow: 0 8px 18px rgba(212, 160, 23, .18);
}

.hero-content__title {
  display: flex;
  flex-wrap: wrap;
  gap: .28em;
  font-family: var(--font-display);
  font-size: 54px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: .3px;
  color: var(--clr-dark);
  margin-bottom: 18px;
}

.hero-content__title .word {
  display: inline-block;
  animation: heroWordIn .7s cubic-bezier(.2, .8, .2, 1) both;
}

.hero-content__title .word:nth-child(1) { animation-delay: .28s; }
.hero-content__title .word:nth-child(2) { animation-delay: .38s; }
.hero-content__title .word:nth-child(3) { animation-delay: .5s; }

@keyframes heroWordIn {
  from { opacity: 0; transform: translateY(28px) rotateX(-20deg); }
  to { opacity: 1; transform: none; }
}

.hero-content__title .word--gold {
  position: relative;
  background: linear-gradient(90deg, var(--clr-primary-dark), #f0d36a, var(--clr-primary), var(--clr-primary-dark));
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: heroWordIn .7s cubic-bezier(.2, .8, .2, 1) .5s both, heroGoldShift 2.6s linear infinite;
  filter: drop-shadow(0 6px 14px rgba(212, 160, 23, .28));
}

.hero-content__title .word--gold::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 3px;
  width: 0;
  height: 9px;
  background: rgba(212, 160, 23, .24);
  z-index: -1;
  animation: heroRule .9s ease .9s forwards;
}

@keyframes heroGoldShift {
  to { background-position: -240% 0; }
}

@keyframes heroRule {
  to { width: 100%; }
}

.hero-content__desc {
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--clr-muted);
  max-width: 470px;
  margin-bottom: 30px;
}

.hero-content__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 36px;
}

.hero-content__cta {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  background: var(--clr-dark);
  color: var(--clr-white);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: 1px solid var(--clr-dark);
  box-shadow: 0 12px 28px rgba(10, 10, 10, .2), 0 0 0 0 rgba(212, 160, 23, .35);
  transition: gap .28s ease, color .28s ease, transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, letter-spacing .28s ease;
  z-index: 1;
}

.hero-content__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--clr-primary-dark), var(--clr-primary), #f3e08a);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1);
  z-index: -1;
}

.hero-content__cta::after {
  content: '';
  position: absolute;
  inset: -2px;
  border: 1px solid rgba(212, 160, 23, .0);
  pointer-events: none;
  transition: border-color .3s ease;
}

.hero-content__cta-pulse {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(212, 160, 23, .7);
  opacity: 0;
  animation: heroBtnPulse 2.4s ease-out infinite;
  pointer-events: none;
}

@keyframes heroBtnPulse {
  0% { transform: scale(1); opacity: .55; }
  100% { transform: scale(1.18); opacity: 0; }
}

.hero-content__cta-shine {
  position: absolute;
  top: -30%;
  left: -45%;
  width: 38%;
  height: 160%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-18deg) translateX(-90%);
  animation: heroBtnShine 2.4s ease-in-out 1s infinite;
  pointer-events: none;
}

@keyframes heroBtnShine {
  0%, 50% { opacity: 0; transform: skewX(-18deg) translateX(-90%); }
  62% { opacity: 1; }
  100% { opacity: 0; transform: skewX(-18deg) translateX(430%); }
}

.hero-content__cta i {
  font-size: 12px;
  transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}

.hero-content__cta:hover {
  gap: 16px;
  letter-spacing: 2.2px;
  color: var(--clr-dark);
  transform: translateY(-4px) scale(1.03);
  box-shadow: var(--shadow-glow-md), 0 16px 32px rgba(10,10,10,.18);
}

.hero-content__cta:hover::before {
  transform: scaleX(1);
}

.hero-content__cta:hover::after {
  border-color: rgba(212, 160, 23, .7);
}

.hero-content__cta:hover i {
  transform: translateX(6px);
}

.hero-content__cta--ghost {
  background: rgba(255,255,255,.35);
  color: var(--clr-dark);
  border-color: rgba(10, 10, 10, .16);
  box-shadow: none;
  backdrop-filter: blur(8px);
}

.hero-content__cta--ghost::before {
  background: var(--clr-dark);
}

.hero-content__cta--ghost:hover {
  color: var(--clr-white);
  border-color: var(--clr-dark);
  box-shadow: 0 14px 28px rgba(10, 10, 10, .18);
}

.hero-stats {
  display: flex;
  gap: 8px;
  padding-top: 4px;
  list-style: none;
}

.hero-stats li {
  position: relative;
  min-width: 112px;
  padding: 12px 14px 12px 16px;
  border: 1px solid rgba(212, 160, 23, .18);
  background: rgba(255,255,255,.45);
  box-shadow: var(--shadow-chip);
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.hero-stats li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, var(--clr-primary-dark), var(--clr-primary));
  box-shadow: 0 0 12px rgba(212, 160, 23, .7);
}

.hero-stats li::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(212,160,23,.12), transparent);
  transform: translateX(-100%);
  animation: heroStatSweep 3.6s ease-in-out infinite;
}

.hero-stats li:nth-child(2)::after { animation-delay: .4s; }
.hero-stats li:nth-child(3)::after { animation-delay: .8s; }

@keyframes heroStatSweep {
  0%, 55% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.hero-stats li:hover {
  transform: translateY(-4px);
  border-color: rgba(212, 160, 23, .5);
  box-shadow: var(--shadow-glow-sm);
}

.hero-stats strong {
  position: relative;
  display: block;
  font-size: 24px;
  font-weight: 800;
  color: var(--clr-dark);
  line-height: 1.1;
}

.hero-stats span {
  position: relative;
  font-size: 11px;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--clr-muted);
}

.hero-image {
  position: relative;
  flex: 1 1 480px;
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 640px;
  perspective: 1100px;
  opacity: 0;
  animation: heroRise .85s cubic-bezier(.2, .8, .2, 1) .18s forwards;
}

.hero-image__blob {
  position: absolute;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 160, 23, .46), transparent 68%);
  filter: blur(16px);
  z-index: 0;
  animation: heroBlobPulse 4.2s ease-in-out infinite;
}

.hero-image__blob--2 {
  width: 240px;
  height: 240px;
  bottom: 50px;
  right: 10%;
  background: radial-gradient(circle, rgba(212, 160, 23, .28), transparent 70%);
  animation-delay: -1.8s;
}

@keyframes heroBlobPulse {
  0%, 100% { transform: scale(1); opacity: .7; }
  50% { transform: scale(1.16); opacity: 1; }
}

.hero-image__ring {
  position: absolute;
  width: 490px;
  height: 490px;
  border-radius: 50%;
  border: 1px dashed rgba(212, 160, 23, .6);
  z-index: 0;
  animation: heroSpin 16s linear infinite;
}

.hero-image__ring--inner {
  width: 400px;
  height: 400px;
  border-style: solid;
  border-color: rgba(212, 160, 23, .2);
  animation-direction: reverse;
  animation-duration: 11s;
}

.hero-image__ring--pulse {
  width: 430px;
  height: 430px;
  border: 2px solid rgba(212, 160, 23, .35);
  animation: heroRingPulse 2.8s ease-out infinite;
}

@keyframes heroSpin {
  to { transform: rotate(360deg); }
}

@keyframes heroRingPulse {
  0% { transform: scale(.92); opacity: .55; }
  100% { transform: scale(1.18); opacity: 0; }
}

.hero-image__rays {
  position: absolute;
  width: 540px;
  height: 540px;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(212, 160, 23, .14) 0 7deg,
    transparent 7deg 20deg
  );
  mask-image: radial-gradient(circle, transparent 40%, #000 72%);
  -webkit-mask-image: radial-gradient(circle, transparent 40%, #000 72%);
  opacity: .5;
  animation: heroSpin 26s linear infinite;
  z-index: 0;
}

.hero-image__scan {
  position: absolute;
  width: 70%;
  height: 3px;
  border-radius: 4px;
  background: linear-gradient(90deg, transparent, rgba(212,160,23,.85), transparent);
  box-shadow: 0 0 18px rgba(212,160,23,.7);
  z-index: 4;
  pointer-events: none;
  animation: heroScan 3.8s ease-in-out infinite;
}

@keyframes heroScan {
  0%, 100% { top: 18%; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  50% { top: 72%; }
}

.hero-image__shadow {
  position: absolute;
  bottom: 24px;
  left: 50%;
  width: 300px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(10, 10, 10, .42), transparent 70%);
  transform: translateX(-50%);
  filter: blur(7px);
  z-index: 1;
  animation: heroShadowBreath 3.2s ease-in-out infinite;
}

@keyframes heroShadowBreath {
  0%, 100% { transform: translateX(-50%) scaleX(1); opacity: .65; }
  50% { transform: translateX(-50%) scaleX(1.22); opacity: 1; }
}

.hero-image__spark {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--clr-primary);
  box-shadow: 0 0 12px 4px rgba(212, 160, 23, .7);
  z-index: 5;
  animation: heroSpark 3.6s ease-in-out infinite;
}

.hero-image__spark--1 { top: 22%; left: 18%; animation-delay: 0s; }
.hero-image__spark--2 { top: 34%; right: 16%; animation-delay: .7s; }
.hero-image__spark--3 { bottom: 28%; left: 22%; animation-delay: 1.3s; }
.hero-image__spark--4 { bottom: 38%; right: 20%; animation-delay: 1.9s; }

@keyframes heroSpark {
  0%, 100% { transform: translateY(0) scale(.6); opacity: .25; }
  50% { transform: translateY(-14px) scale(1.15); opacity: 1; }
}

.hero-image__badge {
  position: absolute;
  top: 16%;
  right: 10%;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--clr-dark);
  background: linear-gradient(145deg, var(--clr-primary), var(--clr-primary-dark));
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
  box-shadow: 0 0 18px rgba(212, 160, 23, .55);
  animation: heroBadge 2.4s ease-in-out infinite;
}

@keyframes heroBadge {
  0%, 100% { transform: rotate(0) scale(1); }
  50% { transform: rotate(-8deg) scale(1.08); }
}

.hero-image__frame {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: heroFloat 4s ease-in-out infinite;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), filter .45s ease;
}

@keyframes heroFloat {
  0%, 100% { transform: translateY(0) rotate(-.4deg); }
  50% { transform: translateY(-16px) rotate(.4deg); }
}

.hero-image:hover .hero-image__frame {
  transform: translateY(-12px) rotateX(6deg) rotateY(-4deg) scale(1.045);
  filter: drop-shadow(0 30px 44px rgba(212, 160, 23, .32));
  animation-play-state: paused;
}

.hero-image__glow {
  position: absolute;
  inset: 8% 12% 4%;
  border-radius: 40% 40% 18% 18%;
  background: radial-gradient(circle at 50% 70%, rgba(212,160,23,.2), transparent 70%);
  filter: blur(12px);
  z-index: 0;
  animation: heroBlobPulse 3.6s ease-in-out infinite;
}

.hero-image__pic {
  position: relative;
  z-index: 1;
  display: block;
  height: 590px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 24px 30px rgba(10, 10, 10, .34)) saturate(1.08) contrast(1.05);
  transition: filter .45s ease, transform .7s ease;
  border-radius: 180px;
}

.hero-image:hover .hero-image__pic {
  filter: drop-shadow(0 34px 40px rgba(10, 10, 10, .42)) drop-shadow(0 0 26px rgba(212, 160, 23, .34)) saturate(1.15) contrast(1.08);
}

.hero-image__shine,
.hero-image__shine--slow {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(118deg, transparent 28%, rgba(255,255,255,.42) 46%, transparent 60%);
  transform: translateX(-130%) skewX(-16deg);
  animation: heroImgShine 4.2s ease-in-out 1s infinite;
}

.hero-image__shine--slow {
  background: linear-gradient(118deg, transparent 35%, rgba(212,160,23,.28) 50%, transparent 65%);
  animation-duration: 6.4s;
  animation-delay: 2.2s;
}

@keyframes heroImgShine {
  0%, 58% { transform: translateX(-130%) skewX(-16deg); opacity: 0; }
  68% { opacity: .9; }
  100% { transform: translateX(145%) skewX(-16deg); opacity: 0; }
}

.hero-image__corner {
  position: absolute;
  width: 24px;
  height: 24px;
  border: 2px solid var(--clr-primary-dark);
  z-index: 4;
  opacity: .35;
  transition: opacity .3s ease, transform .3s ease;
}

.hero-image__corner--tl { top: 16%; left: 10%; border-right: 0; border-bottom: 0; }
.hero-image__corner--tr { top: 16%; right: 10%; border-left: 0; border-bottom: 0; }
.hero-image__corner--bl { bottom: 8%; left: 10%; border-right: 0; border-top: 0; }
.hero-image__corner--br { bottom: 8%; right: 10%; border-left: 0; border-top: 0; }

.hero-image:hover .hero-image__corner {
  opacity: 1;
}

.hero-image:hover .hero-image__corner--tl { transform: translate(-6px, -6px); }
.hero-image:hover .hero-image__corner--tr { transform: translate(6px, -6px); }
.hero-image:hover .hero-image__corner--bl { transform: translate(-6px, 6px); }
.hero-image:hover .hero-image__corner--br { transform: translate(6px, 6px); }

/* ---- extra motion layer ---- */
.hero-section__speed,
.hero-section__flare {
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.hero-section__speed {
  inset: 0;
  background: repeating-linear-gradient(
    100deg,
    transparent 0 18px,
    rgba(212, 160, 23, .07) 18px 19px
  );
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  animation: heroSpeed 1.1s linear infinite;
  opacity: .35;
}

@keyframes heroSpeed {
  to { background-position: 80px 0; }
}

.hero-section__flare {
  top: 8%;
  left: -10%;
  width: 46%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(212,160,23,.9), transparent);
  box-shadow: 0 0 24px rgba(212,160,23,.8);
  animation: heroFlare 4s ease-in-out infinite;
}

@keyframes heroFlare {
  0%, 100% { transform: translateX(0) scaleX(.4); opacity: 0; }
  40% { opacity: 1; transform: translateX(140%) scaleX(1); }
}

.hero-content__rule {
  display: block;
  width: 0;
  height: 2px;
  margin: 0 0 26px;
  background: linear-gradient(90deg, var(--clr-primary-dark), transparent);
  animation: heroRule 1s ease .9s forwards, heroRise .75s cubic-bezier(.2,.8,.2,1) .4s both;
}

.hero-content__title .word--gold::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #ff4d4d, transparent 40%, #4da6ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: .55;
  mix-blend-mode: screen;
  animation: heroGlitch 2.8s steps(2, end) infinite;
}

@keyframes heroGlitch {
  0%, 86%, 100% { transform: translate(0); clip-path: inset(0 0 0 0); }
  88% { transform: translate(-3px, 1px); clip-path: inset(10% 0 55% 0); }
  92% { transform: translate(3px, -1px); clip-path: inset(40% 0 20% 0); }
}

.hero-content__cta-border {
  position: absolute;
  inset: -2px;
  z-index: -2;
  background: conic-gradient(from var(--hero-angle, 0deg), transparent 40%, var(--clr-primary), transparent 70%);
  animation: heroConic 2.2s linear infinite;
}

.hero-content__cta {
  overflow: visible;
}

@keyframes heroConic {
  to { --hero-angle: 360deg; transform: rotate(360deg); }
}

.hero-content__cta-border {
  transform-origin: center;
}

.hero-image__spark--5 { top: 48%; left: 8%; animation-delay: .35s; }
.hero-image__spark--6 { top: 18%; right: 28%; animation-delay: 2.1s; }

.hero-image__orbit {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  z-index: 4;
  pointer-events: none;
  animation: heroSpin 7s linear infinite;
}

.hero-image__orbit span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--clr-primary);
  box-shadow: 0 0 16px 6px rgba(212,160,23,.75);
}

.hero-image__orbit--rev {
  width: 360px;
  height: 360px;
  animation-direction: reverse;
  animation-duration: 5.5s;
}

.hero-image__orbit--rev span {
  width: 8px;
  height: 8px;
  background: #fff;
  box-shadow: 0 0 12px 4px rgba(255,255,255,.55);
}

.hero-image__hex {
  position: absolute;
  width: 430px;
  height: 430px;
  z-index: 0;
  background: rgba(212,160,23,.08);
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
  box-shadow: inset 0 0 0 1px rgba(212,160,23,.35);
  animation: heroHex 6s ease-in-out infinite;
}

@keyframes heroHex {
  0%, 100% { transform: rotate(0) scale(.94); opacity: .45; }
  50% { transform: rotate(8deg) scale(1.04); opacity: .85; }
}

.hero-image__smoke {
  position: absolute;
  bottom: 40px;
  left: 50%;
  width: 320px;
  height: 140px;
  transform: translateX(-50%);
  z-index: 1;
  background:
    radial-gradient(ellipse at 30% 80%, rgba(255,255,255,.45), transparent 55%),
    radial-gradient(ellipse at 70% 90%, rgba(212,160,23,.2), transparent 50%);
  filter: blur(18px);
  animation: heroSmoke 4.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes heroSmoke {
  0%, 100% { opacity: .35; transform: translateX(-50%) scale(1); }
  50% { opacity: .7; transform: translateX(-50%) scale(1.2) translateY(-10px); }
}

.hero-image__badge--alt {
  top: auto;
  bottom: 22%;
  right: auto;
  left: 10%;
  width: 46px;
  height: 46px;
  font-size: 14px;
  animation-delay: -1.1s;
}

.hero-image__aura {
  position: absolute;
  inset: -8px;
  z-index: 0;
  border-radius: 40% 40% 18% 18%;
  padding: 2px;
  background: conic-gradient(from 0deg, var(--clr-primary), transparent 30%, var(--clr-primary-dark), transparent 70%, var(--clr-primary));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: heroSpin 4s linear infinite;
  opacity: .85;
  pointer-events: none;
}

.hero-image:hover .hero-image__pic {
  animation: heroShake .45s ease;
}

@keyframes heroShake {
  0%, 100% { transform: translate(0); }
  25% { transform: translate(-3px, 1px); }
  50% { transform: translate(3px, -1px); }
  75% { transform: translate(-2px, 0); }
}

.hero-stats strong {
  background: linear-gradient(90deg, var(--clr-dark), var(--clr-primary-dark), var(--clr-dark));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: heroGoldShift 3s linear infinite;
}

@media (max-width: 992px) {
  .hero-section__inner {
    flex-direction: column;
    min-height: 0;
    text-align: center;
    gap: 6px;
  }

  .hero-content {
    max-width: 100%;
    padding-block: 42px 10px;
  }

  .hero-content__title {
    justify-content: center;
    font-size: 42px;
  }

  .hero-content__desc,
  .hero-content__actions,
  .hero-stats {
    margin-inline: auto;
    justify-content: center;
  }

  .hero-image {
    min-height: 0;
    width: 100%;
  }

  .hero-image__pic { height: 430px; }
  .hero-image__ring,
  .hero-image__rays { width: 340px; height: 340px; }
  .hero-image__badge { right: 16%; }
}

@media (max-width: 576px) {
  .hero-content__title { font-size: 32px; }
  .hero-content__eyebrow { font-size: 26px; }
  .hero-image__pic { height: 330px; }
  .hero-stats { flex-wrap: wrap; justify-content: center; }
  .hero-image__scan,
  .hero-image__spark,
  .hero-image__orbit,
  .hero-image__hex,
  .hero-section__speed { display: none; }
}

/* =========================================================
   HERO — MAX CSS LAYER (no JavaScript)
   ========================================================= */
@property --hero-gold {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.hero-section {
  animation: heroBgShift 8s ease-in-out infinite;
}

@keyframes heroBgShift {
  0%, 100% {
    background:
      radial-gradient(900px 380px at 12% -10%, rgba(212, 160, 23, .22), transparent 58%),
      radial-gradient(700px 420px at 92% 110%, rgba(212, 160, 23, .16), transparent 60%),
      linear-gradient(165deg, #ffffff 0%, #f7f3e8 42%, #efe6d2 100%);
  }
  50% {
    background:
      radial-gradient(900px 380px at 22% 8%, rgba(240, 211, 106, .32), transparent 58%),
      radial-gradient(700px 420px at 80% 90%, rgba(184, 134, 11, .22), transparent 60%),
      linear-gradient(165deg, #fffdf6 0%, #f3e7c8 48%, #e8d59a 100%);
  }
}

.hero-section::before {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: -20%;
  z-index: 0;
  background: conic-gradient(from var(--hero-gold), transparent 0 62%, rgba(212,160,23,.18) 68%, transparent 74%);
  animation: heroGoldSpin 6s linear infinite;
  mix-blend-mode: multiply;
}

@keyframes heroGoldSpin {
  to { --hero-gold: 360deg; }
}

.hero-content__kicker {
  box-shadow: 0 0 0 4px rgba(212,160,23,.08), 0 0 24px rgba(212,160,23,.28);
  animation: heroRise .75s cubic-bezier(.2,.8,.2,1) .06s forwards, heroKickerGlow 3s linear infinite, heroKickerPulse 1.8s ease-in-out infinite;
}

@keyframes heroKickerPulse {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(0) scale(1.04); }
}

.hero-content__eyebrow {
  animation: heroRise .75s cubic-bezier(.2,.8,.2,1) .16s forwards, heroNeon 1.6s ease-in-out infinite;
}

@keyframes heroNeon {
  0%, 100% { text-shadow: 0 0 0 rgba(212,160,23,0), 0 8px 18px rgba(212,160,23,.18); }
  50% { text-shadow: 0 0 16px rgba(212,160,23,.85), 0 0 32px rgba(212,160,23,.45); }
}

.hero-content__title .word:not(.word--gold) {
  text-shadow:
    0 1px 0 #fff,
    0 12px 24px rgba(10,10,10,.12),
    0 0 0 rgba(212,160,23,0);
  animation: heroWordIn .7s cubic-bezier(.2,.8,.2,1) both, heroTitleGlow 2.4s ease-in-out infinite;
}

.hero-content__title .word:nth-child(1) { animation-delay: .28s, .28s; }
.hero-content__title .word:nth-child(2) { animation-delay: .38s, .5s; }

@keyframes heroTitleGlow {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); }
  50% { filter: drop-shadow(0 6px 10px rgba(10,10,10,.18)); }
}

.hero-content__title .word--gold {
  filter: drop-shadow(0 0 10px rgba(212,160,23,.55)) drop-shadow(0 8px 16px rgba(212,160,23,.35));
  animation:
    heroWordIn .7s cubic-bezier(.2,.8,.2,1) .5s both,
    heroGoldShift 1.4s linear infinite,
    heroGoldPop 1.8s ease-in-out infinite;
}

@keyframes heroGoldPop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}

.hero-content__desc {
  text-shadow: 0 0 0 transparent;
  animation: heroRise .75s cubic-bezier(.2,.8,.2,1) .36s forwards, heroDescPulse 3s ease-in-out infinite;
}

@keyframes heroDescPulse {
  0%, 100% { color: var(--clr-muted); }
  50% { color: #4a4a4a; }
}

.hero-content__cta {
  animation: heroBtnIdle 2.2s ease-in-out infinite;
}

@keyframes heroBtnIdle {
  0%, 100% { box-shadow: 0 12px 28px rgba(10,10,10,.2), 0 0 0 0 rgba(212,160,23,.0); }
  50% { box-shadow: 0 16px 34px rgba(10,10,10,.28), 0 0 28px 2px rgba(212,160,23,.45); }
}

.hero-content__cta:hover {
  animation: none;
  letter-spacing: 2.6px;
  transform: translateY(-6px) scale(1.06) skewX(-2deg);
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 5px var(--clr-primary-dark),
    0 22px 40px rgba(212,160,23,.4);
}

.hero-content__cta--ghost:hover {
  transform: translateY(-6px) scale(1.05);
}

.hero-stats li {
  animation: heroStatFloat 3s ease-in-out infinite;
}

.hero-stats li:nth-child(2) { animation-delay: .25s; }
.hero-stats li:nth-child(3) { animation-delay: .5s; }

@keyframes heroStatFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.hero-image::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  left: 50%;
  top: 42%;
  border-radius: 50%;
  background: var(--clr-primary);
  box-shadow:
    80px -90px 0 0 rgba(212,160,23,.9),
    -110px -40px 0 1px rgba(212,160,23,.7),
    130px 20px 0 0 rgba(255,255,255,.8),
    -70px 80px 0 2px rgba(212,160,23,.65),
    40px 110px 0 0 rgba(240,211,106,.9),
    -150px 10px 0 1px rgba(255,255,255,.55),
    160px -50px 0 0 rgba(212,160,23,.8),
    20px -130px 0 1px rgba(212,160,23,.5),
    -40px -120px 0 0 rgba(255,255,255,.7),
    100px 90px 0 1px rgba(212,160,23,.6);
  animation: heroDust 2.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 6;
}

@keyframes heroDust {
  0%, 100% { transform: translate(-50%, 0) scale(1); opacity: .55; filter: blur(0); }
  50% { transform: translate(-50%, -18px) scale(1.15); opacity: 1; filter: blur(.2px); }
}

.hero-image__pic {
  animation: heroPicLive 5s ease-in-out infinite;
}

@keyframes heroPicLive {
  0%, 100% {
    filter: drop-shadow(0 24px 30px rgba(10,10,10,.34)) drop-shadow(0 0 0 rgba(212,160,23,0)) saturate(1.08) contrast(1.05) brightness(1);
  }
  50% {
    filter: drop-shadow(0 34px 42px rgba(10,10,10,.4)) drop-shadow(0 0 28px rgba(212,160,23,.55)) saturate(1.25) contrast(1.12) brightness(1.08);
  }
}

.hero-image:hover .hero-image__pic {
  animation: heroPicLive 5s ease-in-out infinite, heroShake .45s ease;
  filter: drop-shadow(0 34px 40px rgba(10,10,10,.42)) drop-shadow(0 0 34px rgba(212,160,23,.55)) saturate(1.28) contrast(1.12);
}

.hero-image__frame {
  animation: heroFloat 3.2s ease-in-out infinite, heroFrameGlow 2.4s ease-in-out infinite;
}

@keyframes heroFrameGlow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(212,160,23,0)); }
  50% { filter: drop-shadow(0 18px 36px rgba(212,160,23,.4)); }
}

.hero-image__ring {
  box-shadow: 0 0 24px rgba(212,160,23,.35), inset 0 0 24px rgba(212,160,23,.12);
}

.hero-image__pic {
  animation: heroPicLive 4s ease-in-out infinite, heroPicZoom 9s ease-in-out infinite alternate;
}

@keyframes heroPicZoom {
  from { transform: scale(1) translateY(0); }
  to { transform: scale(1.06) translateY(-8px); }
}

.hero-image:hover .hero-image__pic {
  animation: heroShake .4s ease, heroPicLive 4s ease-in-out infinite;
}

.hero-content::before {
  content: '';
  position: absolute;
  left: -18px;
  top: 72px;
  width: 3px;
  height: 0;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--clr-primary), transparent);
  box-shadow: 0 0 16px rgba(212,160,23,.8);
  animation: heroSideBar 1.1s cubic-bezier(.2,.8,.2,1) .4s forwards;
}

@keyframes heroSideBar {
  to { height: 220px; }
}

.hero-content {
  position: relative;
}

.hero-content__cta i {
  animation: heroArrow 1s ease-in-out infinite;
}

@keyframes heroArrow {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}

.hero-image__badge {
  animation: heroBadge 2.4s ease-in-out infinite, heroBadgeGlow 1.4s ease-in-out infinite;
}

@keyframes heroBadgeGlow {
  0%, 100% { box-shadow: 0 0 12px rgba(212,160,23,.4); }
  50% { box-shadow: 0 0 28px 8px rgba(212,160,23,.85); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-section *,
  .hero-section *::before,
  .hero-section *::after {
    animation: none !important;
    transition: none !important;
  }

  .hero-content__kicker,
  .hero-content__eyebrow,
  .hero-content__title,
  .hero-content__desc,
  .hero-content__actions,
  .hero-stats,
  .hero-image,
  .hero-content__title .word {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   MODELS / LINEUP SECTION
   ========================================================= */
.models-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 88px 0 100px;
  background:
    radial-gradient(900px 420px at 8% 0%, rgba(212,160,23,.12), transparent 55%),
    radial-gradient(700px 380px at 100% 80%, rgba(212,160,23,.08), transparent 50%),
    linear-gradient(180deg, #0c0c0c 0%, #141414 48%, #0a0a0a 100%);
  color: var(--clr-white);
}

.models-section__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
}

.models-section__glow--a {
  width: 320px;
  height: 320px;
  top: -80px;
  left: -40px;
  background: rgba(212,160,23,.18);
  animation: modelsOrb 10s ease-in-out infinite;
}

.models-section__glow--b {
  width: 280px;
  height: 280px;
  right: -60px;
  bottom: 40px;
  background: rgba(184,134,11,.14);
  animation: modelsOrb 12s ease-in-out infinite reverse;
}

@keyframes modelsOrb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(18px, -14px) scale(1.08); }
}

.models-section__inner {
  position: relative;
  z-index: 1;
}

.models-head {
  max-width: 720px;
  margin-bottom: 42px;
}

.models-head__kicker,
.models-head__title,
.models-head__desc,
.models-feature,
.model-card,
.models-foot {
  opacity: 0;
  transform: translateY(28px);
  animation: modelsRise .8s cubic-bezier(.2,.8,.2,1) forwards;
}

.models-head__kicker { animation-delay: .08s; }
.models-head__title { animation-delay: .16s; }
.models-head__desc { animation-delay: .24s; }
.models-feature { animation-delay: .32s; }
.model-card:nth-child(1) { animation-delay: .42s; }
.model-card:nth-child(2) { animation-delay: .52s; }
.model-card:nth-child(3) { animation-delay: .62s; }
.models-foot { animation-delay: .72s; }

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

.models-head__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 6px 14px;
  border: 1px solid rgba(212,160,23,.45);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--clr-primary);
  background: rgba(212,160,23,.08);
}

.models-head__title {
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 800;
  letter-spacing: .4px;
  line-height: 1.1;
  margin-bottom: 14px;
}

.models-head__title span {
  color: var(--clr-primary);
}

.models-head__desc {
  font-size: 15.5px;
  line-height: 1.8;
  color: rgba(255,255,255,.62);
  max-width: 560px;
}

.models-feature {
  position: relative;
  display: grid;
  grid-template-columns: 1.35fr .75fr;
  height: 550px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(212,160,23,.22);
  background: #111;
  box-shadow: 0 30px 60px rgba(0,0,0,.35);
  margin-bottom: 28px;
}

.models-feature__media {
  position: relative;
  overflow: hidden;
  min-height: 500px;
   display: flex;
  align-items: center;
  justify-content: center;
}

.models-feature__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: scale(1);
  transition: transform 1.1s cubic-bezier(.2,.8,.2,1), filter .5s ease;
  filter: saturate(1.08) contrast(1.05);
  border-radius: 50%;
}

.models-feature:hover .models-feature__img {
  transform: scale(1.03);
  filter: saturate(1.18) contrast(1.08) brightness(1.05);
}

.models-feature__vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 45%, rgba(10,10,10,.55) 100%),
              linear-gradient(180deg, transparent 50%, rgba(10,10,10,.45) 100%);
  pointer-events: none;
}

.models-feature__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(212,160,23,.22) 48%, transparent 62%);
  transform: translateX(-120%) skewX(-16deg);
  pointer-events: none;
}

.models-feature:hover .models-feature__shine {
  animation: modelsShine .9s ease forwards;
}

@keyframes modelsShine {
  to { transform: translateX(140%) skewX(-16deg); }
}

.models-feature__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 42px 36px 42px 28px;
  background: linear-gradient(180deg, #161616, #0e0e0e);
}

.models-feature__index {
  position: absolute;
  top: 22px;
  right: 24px;
  font-size: 42px;
  font-weight: 800;
  letter-spacing: 2px;
  color: transparent;
  -webkit-text-stroke: 1px rgba(212,160,23,.35);
}

.models-feature__tag {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--clr-primary);
}

.models-feature__name {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 800;
  letter-spacing: .6px;
  margin-bottom: 12px;
  background: linear-gradient(90deg, #fff 20%, var(--clr-primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.models-feature__lead {
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(255,255,255,.62);
  margin-bottom: 22px;
}

.models-feature__stats {
  display: flex;
  gap: 18px;
  margin-bottom: 26px;
}

.models-feature__stats li {
  min-width: 72px;
}

.models-feature__stats strong {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: var(--clr-primary);
  line-height: 1.1;
}

.models-feature__stats span {
  font-size: 11px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}

.models-feature__cta {
  position: relative;
  overflow: hidden;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border: 1px solid rgba(212,160,23,.55);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--clr-primary);
  z-index: 1;
  transition: color .3s ease, gap .3s ease, transform .3s ease, box-shadow .3s ease;
}

.models-feature__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--clr-primary-dark), var(--clr-primary));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
  z-index: -1;
}

.models-feature__cta:hover {
  color: var(--clr-dark);
  gap: 14px;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(212,160,23,.28);
}

.models-feature__cta:hover::before {
  transform: scaleX(1);
}

.models-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.model-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #121212;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 16px 36px rgba(0,0,0,.28);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .35s ease;
}

.model-card:hover {
  transform: translateY(-10px);
  border-color: rgba(212,160,23,.4);
  box-shadow: 0 26px 50px rgba(0,0,0,.4), 0 0 0 1px rgba(212,160,23,.18);
}

.model-card__index {
  position: absolute;
  top: 16px;
  left: 18px;
  z-index: 3;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.6px;
  color: var(--clr-primary);
}

.model-card__media {
  position: relative;
  height: 230px;
  overflow: hidden;
}

.model-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.2,.8,.2,1), filter .4s ease;
}

.model-card:hover .model-card__img {
  transform: scale(1.12);
  filter: saturate(1.15) brightness(1.06);
}

.model-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(10,10,10,.92) 100%);
  pointer-events: none;
}

.model-card__body {
  position: relative;
  z-index: 2;
  margin-top: -48px;
  padding: 0 20px 22px;
}

.model-card__cat {
  display: block;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--clr-primary);
  margin-bottom: 6px;
}

.model-card__name {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .4px;
  margin-bottom: 12px;
}

.model-card__specs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.model-card__specs li {
  padding: 5px 9px;
  border: 1px solid rgba(212,160,23,.22);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  color: rgba(255,255,255,.78);
  background: rgba(212,160,23,.08);
}

.model-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--clr-primary);
  transition: gap .25s ease, color .25s ease;
}

.model-card__link i {
  font-size: 11px;
  transition: transform .25s ease;
}

.model-card:hover .model-card__link {
  gap: 12px;
}

.model-card:hover .model-card__link i {
  transform: translateX(4px);
}

.models-foot {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.models-foot__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border: 1px solid rgba(212,160,23,.4);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--clr-white);
  transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease, gap .3s ease;
}

.models-foot__cta:hover {
  background: var(--clr-primary);
  color: var(--clr-dark);
  border-color: var(--clr-primary);
  gap: 14px;
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(212,160,23,.28);
}

/* =========================================================
   MODELS — MAX polish (featured + cards)
   ========================================================= */
.models-feature {
  transform-style: preserve-3d;
  box-shadow:
    0 30px 60px rgba(0,0,0,.4),
    0 0 0 1px rgba(212,160,23,.16),
    0 0 40px rgba(212,160,23,.08);
  animation: modelsRise .8s cubic-bezier(.2,.8,.2,1) .32s forwards, modelsFeatureGlow 4s ease-in-out 1s infinite;
}

@keyframes modelsFeatureGlow {
  0%, 100% { box-shadow: 0 30px 60px rgba(0,0,0,.4), 0 0 0 1px rgba(212,160,23,.16), 0 0 28px rgba(212,160,23,.08); }
  50% { box-shadow: 0 34px 70px rgba(0,0,0,.48), 0 0 0 1px rgba(212,160,23,.32), 0 0 48px rgba(212,160,23,.2); }
}

.models-feature::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 22px;
  padding: 1.5px;
  background: conic-gradient(from 0deg, var(--clr-primary), transparent 28%, transparent 72%, var(--clr-primary));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: modelsSpin 6s linear infinite;
  pointer-events: none;
  z-index: 4;
  opacity: .85;
}

@keyframes modelsSpin {
  to { transform: rotate(360deg); }
}

.models-feature__img {
  animation: modelsKen 14s ease-in-out infinite alternate;
}

@keyframes modelsKen {
  from { transform: scale(1.04) translateX(0); }
  to { transform: scale(1.1) translateX(-12px); }
}

.models-feature:hover .models-feature__img {
  animation: none;
  transform: scale(1.14);
}

.models-feature__scan {
  position: absolute;
  left: 8%;
  width: 70%;
  height: 2px;
  border-radius: 4px;
  background: linear-gradient(90deg, transparent, rgba(212,160,23,.9), transparent);
  box-shadow: 0 0 16px rgba(212,160,23,.7);
  z-index: 3;
  animation: modelsScan 4.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes modelsScan {
  0%, 100% { top: 12%; opacity: 0; }
  18% { opacity: 1; }
  50% { top: 78%; }
  82% { opacity: 1; }
}

.models-feature__spark {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--clr-primary);
  box-shadow: 0 0 12px 4px rgba(212,160,23,.7);
  z-index: 3;
  animation: modelsSpark 3.2s ease-in-out infinite;
}

.models-feature__spark--1 { top: 18%; left: 12%; }
.models-feature__spark--2 { top: 42%; left: 28%; animation-delay: .7s; }
.models-feature__spark--3 { bottom: 22%; left: 18%; animation-delay: 1.4s; }

@keyframes modelsSpark {
  0%, 100% { transform: scale(.6); opacity: .25; }
  50% { transform: scale(1.2) translateY(-8px); opacity: 1; }
}

.models-feature__corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid var(--clr-primary);
  z-index: 4;
  opacity: .45;
  transition: opacity .3s ease, transform .3s ease;
}

.models-feature__corner--tl { top: 16px; left: 16px; border-right: 0; border-bottom: 0; }
.models-feature__corner--tr { top: 16px; right: 16px; border-left: 0; border-bottom: 0; }
.models-feature__corner--bl { bottom: 16px; left: 16px; border-right: 0; border-top: 0; }
.models-feature__corner--br { bottom: 16px; right: 16px; border-left: 0; border-top: 0; }

.models-feature:hover .models-feature__corner {
  opacity: 1;
}

.models-feature:hover .models-feature__corner--tl { transform: translate(-4px, -4px); }
.models-feature:hover .models-feature__corner--tr { transform: translate(4px, -4px); }
.models-feature:hover .models-feature__corner--bl { transform: translate(-4px, 4px); }
.models-feature:hover .models-feature__corner--br { transform: translate(4px, 4px); }

.models-feature__badge {
  position: absolute;
  right: 22px;
  bottom: 22px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--clr-dark);
  background: linear-gradient(145deg, var(--clr-primary), var(--clr-primary-dark));
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
  box-shadow: 0 0 18px rgba(212,160,23,.55);
  animation: modelsBadge 2.4s ease-in-out infinite;
}

@keyframes modelsBadge {
  0%, 100% { transform: rotate(0) scale(1); }
  50% { transform: rotate(-8deg) scale(1.08); }
}

.models-feature__copy {
  overflow: hidden;
}

.models-feature__copy::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, var(--clr-primary-dark), transparent);
  box-shadow: 0 0 16px rgba(212,160,23,.7);
}

.models-feature__copy::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 0%, rgba(212,160,23,.12), transparent 46%);
  pointer-events: none;
}

.models-feature__live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
}

.models-feature__live i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #19d36a;
  box-shadow: 0 0 10px #19d36a;
  animation: modelsLive 1.4s ease-in-out infinite;
}

@keyframes modelsLive {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.75); }
}

.models-feature__index {
  animation: modelsIndexPulse 2.8s ease-in-out infinite;
}

@keyframes modelsIndexPulse {
  0%, 100% { opacity: .7; }
  50% { opacity: 1; text-shadow: 0 0 18px rgba(212,160,23,.45); }
}

.models-feature__tag {
  position: relative;
  padding-left: 14px;
}

.models-feature__tag::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translateY(-50%) rotate(45deg);
  background: var(--clr-primary);
  box-shadow: 0 0 10px rgba(212,160,23,.8);
}

.models-feature__name {
  background: linear-gradient(90deg, #fff 0%, #fff 35%, var(--clr-primary) 55%, #fff 80%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: modelsGoldShift 3.2s linear infinite;
  filter: drop-shadow(0 8px 16px rgba(212,160,23,.22));
}

@keyframes modelsGoldShift {
  to { background-position: -220% 0; }
}

.models-feature__stats li {
  position: relative;
  padding: 10px 12px 10px 14px;
  border: 1px solid rgba(212,160,23,.18);
  background: rgba(255,255,255,.03);
  overflow: hidden;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.models-feature__stats li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background: var(--clr-primary);
  box-shadow: 0 0 10px rgba(212,160,23,.8);
}

.models-feature__stats li:hover {
  transform: translateY(-4px);
  border-color: rgba(212,160,23,.5);
  box-shadow: 0 10px 20px rgba(0,0,0,.25);
}

.models-feature__cta i {
  animation: modelsArrow 1s ease-in-out infinite;
}

@keyframes modelsArrow {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}

.models-feature__cta:hover i {
  animation: none;
}

.model-card {
  overflow: visible;
}

.model-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 18px;
  padding: 1px;
  background: conic-gradient(from 180deg, transparent 40%, var(--clr-primary), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: 5;
}

.model-card:hover::before {
  opacity: 1;
  animation: modelsSpin 2.8s linear infinite;
}

.model-card {
  background: linear-gradient(180deg, #171717, #101010);
}

.model-card:hover {
  transform: translateY(-12px) scale(1.015);
}

.model-card__media {
  border-radius: 18px 18px 0 0;
  overflow: hidden;
}

.model-card__img {
  animation: modelsKen 12s ease-in-out infinite alternate;
}

.model-card:nth-child(2) .model-card__img { animation-delay: -4s; }
.model-card:nth-child(3) .model-card__img { animation-delay: -8s; }

.model-card:hover .model-card__img {
  animation: none;
}

.model-card__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 28%, rgba(255,255,255,.28) 48%, transparent 62%);
  transform: translateX(-130%) skewX(-16deg);
  pointer-events: none;
  z-index: 2;
}

.model-card:hover .model-card__shine {
  animation: modelsShine .8s ease forwards;
}

.model-card__ribbon {
  position: absolute;
  top: 18px;
  right: -28px;
  z-index: 4;
  width: 110px;
  padding: 4px 0;
  background: linear-gradient(90deg, var(--clr-primary-dark), var(--clr-primary));
  color: var(--clr-dark);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(38deg);
  box-shadow: 0 6px 14px rgba(0,0,0,.35);
}

.model-card__corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1.6px solid var(--clr-primary);
  z-index: 3;
  opacity: .35;
  transition: opacity .3s ease, transform .3s ease;
}

.model-card__corner--tl { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.model-card__corner--br { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }

.model-card:hover .model-card__corner {
  opacity: 1;
}

.model-card__index {
  text-shadow: 0 0 12px rgba(212,160,23,.45);
}

.model-card__name {
  background: linear-gradient(90deg, #fff, var(--clr-primary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: letter-spacing .3s ease;
}

.model-card:hover .model-card__name {
  letter-spacing: 1px;
}

.model-card__specs li {
  transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}

.model-card:hover .model-card__specs li {
  background: rgba(212,160,23,.18);
  border-color: rgba(212,160,23,.45);
  color: #fff;
}

.model-card:hover .model-card__specs li:nth-child(1) { transform: translateY(-3px); }
.model-card:hover .model-card__specs li:nth-child(2) { transform: translateY(-5px); }
.model-card:hover .model-card__specs li:nth-child(3) { transform: translateY(-3px); }

.model-card__body::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  margin-top: 14px;
  background: linear-gradient(90deg, var(--clr-primary), transparent);
  transition: width .4s cubic-bezier(.2,.8,.2,1);
}

.model-card:hover .model-card__body::after {
  width: 72px;
}

@media (max-width: 992px) {
  .models-head__title {
    font-size: 34px;
  }

  .models-feature {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .models-feature__media {
    min-height: 320px;
  }

  .models-feature__copy {
    padding: 28px 24px 32px;
  }

  .models-grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin-inline: auto;
  }
}

@media (max-width: 576px) {
  .models-section {
    padding: 64px 0 72px;
  }

  .models-head__title {
    font-size: 28px;
  }

  .models-feature__name {
    font-size: 32px;
  }

  .models-feature__stats {
    gap: 12px;
  }

  .models-feature__scan,
  .models-feature__spark {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .models-section *,
  .models-section *::before,
  .models-section *::after {
    animation: none !important;
    transition: none !important;
  }

  .models-head__kicker,
  .models-head__title,
  .models-head__desc,
  .models-feature,
  .model-card,
  .models-foot {
    opacity: 1;
    transform: none;
  }
}


.site-header {
  animation: siteHeaderSettle .7s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes siteHeaderSettle {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* slow traveling gold hairline under the main header, on top of
   the existing border/shadow — a subtle "always-on" premium cue */
.main-header {
  position: relative;
}

.main-header::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--clr-primary) 20%, var(--clr-primary-dark) 50%, var(--clr-primary) 80%, transparent);
  background-size: 220% 100%;
  animation: headerLineSweep 6s linear infinite;
  opacity: .5;
  pointer-events: none;
}

@keyframes headerLineSweep {
  to { background-position: -220% 0; }
}


.main-header__icons .icon-btn {
  position: relative;
}

.main-header__icons .icon-btn i {
  transition: color .2s ease, transform .3s cubic-bezier(.36, 1.5, .64, 1), filter .3s ease;
}

.main-header__icons .icon-btn:hover {
  filter: drop-shadow(0 6px 14px rgba(212, 160, 23, .3));
}

.main-header__icons .icon-btn:focus-visible,
.main-nav a:focus-visible,
.top-bar a:focus-visible {
  outline: 2px solid var(--clr-primary-dark);
  outline-offset: 3px;
  border-radius: 4px;
}


.promo-strip {
  position: relative;
  overflow: hidden;
}

.promo-strip::before {
  content: '';
  position: absolute;
  inset: -20% -10%;
  background: repeating-linear-gradient(115deg, rgba(212, 160, 23, .08) 0 2px, transparent 2px 28px);
  animation: promoDrift 14s linear infinite;
  pointer-events: none;
}

@keyframes promoDrift {
  to { transform: translateX(-140px); }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .main-header::before,
  .promo-strip::before {
    animation: none !important;
  }
}

/* ---------------------------------------------------------
   2) HERO IMAGE — extra depth & a subtle 3D tilt on hover
   --------------------------------------------------------- */
.hero-image__frame {
  position: relative;
}

/* rotating gold ring that only appears on hover, layered around
   the existing frame/aura/glow elements */
.hero-image__frame::before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  padding: 2px;
  background: conic-gradient(from 0deg, var(--clr-primary), transparent 25%, transparent 65%, var(--clr-primary));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  animation: heroRingSpin 5s linear infinite;
  transition: opacity .4s ease;
  pointer-events: none;
  z-index: 1;
}

.hero-image:hover .hero-image__frame::before {
  opacity: .85;
}

@keyframes heroRingSpin {
  to { transform: rotate(360deg); }
}

.hero-image__pic {
  transition: filter .5s ease;
}

.hero-image:hover .hero-image__pic {
  filter: saturate(1.1) contrast(1.04);
}

.hero-image__badge {
  transition: transform .35s cubic-bezier(.36, 1.5, .64, 1);
}

.hero-image:hover .hero-image__badge {
  transform: scale(1.14) rotate(-6deg);
}

@media (prefers-reduced-motion: reduce) {
  .hero-image__frame::before {
    animation: none !important;
    transition: none !important;
    opacity: 0 !important;
  }
  .hero-image__pic,
  .hero-image__badge {
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
}

@supports (animation-timeline: view()) {
  .models-feature,
  .model-card {
    animation: modelsRise linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 35%;
  }

  @keyframes modelsRise {
    from { opacity: 0; transform: translateY(60px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
}

/* gentle 3D tilt layered onto the existing lift/scale on hover */
.models-grid {
  perspective: 1400px;
}

.model-card {
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease;
}

.model-card:hover {
  transform: translateY(-12px) scale(1.015) rotateX(2.5deg);
  box-shadow: 0 26px 46px rgba(0, 0, 0, .38), 0 0 0 1px rgba(212, 160, 23, .12);
}

/* ambient pulse behind the ribbon so it reads as "live" even
   before the card is hovered */
.model-card__ribbon {
  animation: ribbonPulse 2.6s ease-in-out infinite;
}

@keyframes ribbonPulse {
  0%, 100% { box-shadow: 0 6px 14px rgba(0, 0, 0, .35); }
  50%      { box-shadow: 0 6px 20px rgba(212, 160, 23, .45); }
}

/* stat chips on the featured Revuelto card get a touch more life */
.models-feature__stats li {
  animation: statFloat 3.6s ease-in-out infinite;
}

.models-feature__stats li:nth-child(2) { animation-delay: .2s; }
.models-feature__stats li:nth-child(3) { animation-delay: .4s; }

@keyframes statFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* clearer, on-brand keyboard focus states for every interactive
   element in this section */
.models-feature__cta:focus-visible,
.model-card__link:focus-visible,
.models-foot__cta:focus-visible {
  outline: 2px solid var(--clr-primary);
  outline-offset: 4px;
  border-radius: 6px;
}

/* CTA arrow gets a crisper micro-interaction on the card links */
.model-card__link {
  transition: color .25s ease, gap .25s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.model-card__link i {
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}

.model-card:hover .model-card__link {
  gap: 10px;
}

.model-card:hover .model-card__link i {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .models-feature,
  .model-card,
  .model-card__ribbon,
  .models-feature__stats li {
    animation: none !important;
  }
  .model-card:hover {
    transform: translateY(-8px) scale(1.01);
  }
}


.model-card__body {
  position: relative;
}

.model-card__body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 160, 23, .55), transparent);
}

/* one-time glossy sheen that sweeps across each card shortly
   after the page loads, staggered per card, independent of the
   existing hover-only shine */
.model-card {
  position: relative;
  overflow: hidden;
}

.model-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%);
  transform: translateX(-140%) skewX(-16deg);
  animation: cardIntroSheen 1.2s ease-out .6s both;
  pointer-events: none;
  z-index: 3;
}

.model-card:nth-child(2) .model-card__media::after { animation-delay: .8s; }
.model-card:nth-child(3) .model-card__media::after { animation-delay: 1s; }

@keyframes cardIntroSheen {
  to { transform: translateX(140%) skewX(-16deg); }
}

/* the index number (02 / 03 / 04) now breathes gently so the
   card doesn't feel static before it's hovered */
.model-card__index {
  display: inline-block;
  animation: cardIndexBreathe 3.4s ease-in-out infinite;
}

.model-card:nth-child(2) .model-card__index { animation-delay: .3s; }
.model-card:nth-child(3) .model-card__index { animation-delay: .6s; }

@keyframes cardIndexBreathe {
  0%, 100% { opacity: .75; text-shadow: 0 0 10px rgba(212, 160, 23, .35); }
  50%      { opacity: 1;   text-shadow: 0 0 18px rgba(212, 160, 23, .6); }
}

/* category label spaces out a touch on hover, echoing the
   throttle-bracket language used in the header nav */
.model-card__cat {
  transition: letter-spacing .3s ease, color .3s ease;
}

.model-card:hover .model-card__cat {
  letter-spacing: 2.2px;
  color: #f1cf74;
}

/* the model name lifts with a soft gold glow on hover, on top
   of the existing gradient-text treatment */
.model-card__name {
  transition: filter .3s ease;
}

.model-card:hover .model-card__name {
  filter: drop-shadow(0 6px 14px rgba(212, 160, 23, .35));
}

/* spec chips pop in scale as well as float, and pick up a
   crisper border on hover for extra polish */
.model-card__specs li {
  transform-origin: center;
}

.model-card:hover .model-card__specs li {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 6px 14px rgba(212, 160, 23, .18);
}

/* permanent soft vignette in the media corners for extra depth,
   independent of the hover-only overlay already in place */
.model-card__media::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .1), transparent 55%);
  z-index: 1;
  pointer-events: none;
}

/* keyboard-accessible parity with the mouse hover state */
.model-card:focus-within {
  transform: translateY(-12px) scale(1.015) rotateX(2.5deg);
  box-shadow: 0 26px 46px rgba(0, 0, 0, .38), 0 0 0 1px rgba(212, 160, 23, .12);
}

.model-card:focus-within .model-card__img {
  transform: scale(1.12);
  filter: saturate(1.15) brightness(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .model-card__media::after,
  .model-card__index {
    animation: none !important;
  }
}

/* //////////////////////////////////////////////////////////////////////////////// */


.trend-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 88px 0 100px;
  background:
    radial-gradient(900px 420px at 92% 0%, rgba(212,160,23,.12), transparent 55%),
    radial-gradient(700px 380px at 0% 100%, rgba(212,160,23,.08), transparent 50%),
    linear-gradient(180deg, #0a0a0a 0%, #131313 50%, #0c0c0c 100%);
  color: var(--clr-white);
}

.trend-section__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}

.trend-section__glow--a {
  width: 420px;
  height: 420px;
  top: -140px;
  right: -100px;
  background: radial-gradient(circle, rgba(212,160,23,.28), transparent 70%);
}

.trend-section__glow--b {
  width: 380px;
  height: 380px;
  bottom: -160px;
  left: -100px;
  background: radial-gradient(circle, rgba(212,160,23,.16), transparent 70%);
}

.trend-section__inner {
  position: relative;
  z-index: 1;
}

/* ---------- Head + tab bar ---------- */
.trend-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 40px;
}

.trend-head__kicker {
  display: inline-block;
  margin-bottom: 10px;
  padding: 6px 14px;
  border: 1px solid rgba(212,160,23,.45);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--clr-primary);
  background: rgba(212,160,23,.08);
}

.trend-head__title {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 800;
  letter-spacing: .4px;
  margin: 0;
}

.trend-tabs {
  display: flex;
  gap: 28px;
}

.trend-tabs__btn {
  position: relative;
  padding: 6px 2px 12px;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .3px;
  color: rgba(255,255,255,.55);
  cursor: pointer;
  transition: color .25s ease;
}

.trend-tabs__btn::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--clr-primary-dark), var(--clr-primary));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}

.trend-tabs__btn:hover {
  color: rgba(255,255,255,.85);
}

.trend-tabs__btn.is-active {
  color: var(--clr-primary);
}

.trend-tabs__btn.is-active::after {
  transform: scaleX(1);
}

/* ---------- Row + arrows ---------- */
.trend-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
}

.trend-arrow {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(212,160,23,.35);
  background: rgba(255,255,255,.03);
  color: var(--clr-primary);
  font-size: 14px;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.trend-arrow:hover {
  background: var(--clr-primary);
  color: var(--clr-dark);
  border-color: var(--clr-primary);
  box-shadow: var(--shadow-glow-md);
  transform: scale(1.08);
}

.trend-arrow:active {
  transform: scale(.96);
}

/* ---------- Grid + cards ---------- */
.trend-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.trend-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-card, 14px);
  overflow: hidden;
  background: #141414;
  border: 1px solid rgba(212,160,23,.14);
  box-shadow: 0 18px 36px rgba(0,0,0,.3);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease;
  animation: trendCardRise .7s cubic-bezier(.2,.8,.2,1) both;
}

.trend-card:nth-child(1) { animation-delay: .05s; }
.trend-card:nth-child(2) { animation-delay: .15s; }
.trend-card:nth-child(3) { animation-delay: .25s; }
.trend-card:nth-child(4) { animation-delay: .35s; }

@keyframes trendCardRise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

.trend-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 26px 46px rgba(0,0,0,.4), 0 0 0 1px rgba(212,160,23,.2);
  border-color: rgba(212,160,23,.35);
}

/* --- the flip itself --- */
.trend-card__flip {
  position: relative;
  aspect-ratio: 3 / 4;
  perspective: 1400px;
}

.trend-card__flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 1.15s cubic-bezier(.19,1,.22,1);
}

.trend-card:hover .trend-card__flip-inner {
  transform: rotateY(180deg);
}

.trend-card__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.trend-card__face--back {
  transform: rotateY(180deg);
}

.trend-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* discount badge */
.trend-card__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .4px;
  color: var(--clr-dark);
  background: var(--clr-primary);
  box-shadow: 0 6px 14px rgba(212,160,23,.35);
}

/* quick-action icons, slide in on hover */
.trend-card__actions {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trend-card__action {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(10,10,10,.65);
  color: var(--clr-white);
  font-size: 12px;
  cursor: pointer;
  opacity: 0;
  transform: translateX(14px);
  transition: opacity .3s ease, transform .3s ease, background .25s ease, color .25s ease;
}

.trend-card:hover .trend-card__action {
  opacity: 1;
  transform: translateX(0);
}

.trend-card__action:nth-child(1) { transition-delay: .04s; }
.trend-card__action:nth-child(2) { transition-delay: .1s; }
.trend-card__action:nth-child(3) { transition-delay: .16s; }

.trend-card__action:hover {
  background: var(--clr-primary);
  color: var(--clr-dark);
}

/* --- body / text --- */
.trend-card__body {
  padding: 16px 16px 20px;
}

.trend-card__cat {
  display: block;
  margin-bottom: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--clr-primary);
}

.trend-card__name {
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--clr-white);
  margin: 0 0 8px;
  transition: color .25s ease;
}

.trend-card:hover .trend-card__name {
  color: var(--clr-primary);
}

.trend-card__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}

.trend-card__price--now {
  font-size: 15px;
  font-weight: 800;
  color: var(--clr-primary);
}

.trend-card__price--old {
  font-size: 12.5px;
  color: rgba(255,255,255,.4);
  text-decoration: line-through;
}

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

@media (max-width: 576px) {
  .trend-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .trend-tabs {
    gap: 18px;
    overflow-x: auto;
  }

  .trend-grid {
    grid-template-columns: 1fr;
    max-width: 340px;
    margin-inline: auto;
  }

  .trend-arrow {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trend-card,
  .trend-card__flip-inner,
  .trend-card__action {
    animation: none !important;
    transition: none !important;
  }
  .trend-card:hover .trend-card__flip-inner {
    transform: none;
  }
}

.trend-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 88px 0 100px;
  background:
    radial-gradient(900px 420px at 92% 0%, rgba(212,160,23,.12), transparent 55%),
    radial-gradient(700px 380px at 0% 100%, rgba(212,160,23,.08), transparent 50%),
    linear-gradient(180deg, #0a0a0a 0%, #131313 50%, #0c0c0c 100%);
  color: var(--clr-white);
}

.trend-section__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}

.trend-section__glow--a {
  width: 420px;
  height: 420px;
  top: -140px;
  right: -100px;
  background: radial-gradient(circle, rgba(212,160,23,.28), transparent 70%);
}

.trend-section__glow--b {
  width: 380px;
  height: 380px;
  bottom: -160px;
  left: -100px;
  background: radial-gradient(circle, rgba(212,160,23,.16), transparent 70%);
}

.trend-section__inner {
  position: relative;
  z-index: 1;
}

/* ---------- Head ---------- */
.trend-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 44px;
}

.trend-head__kicker {
  display: inline-block;
  margin-bottom: 10px;
  padding: 6px 14px;
  border: 1px solid rgba(212,160,23,.45);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--clr-primary);
  background: rgba(212,160,23,.08);
}

.trend-head__title {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 800;
  letter-spacing: .4px;
  margin: 0;
}

.trend-tabs {
  position: relative;
  display: flex;
  gap: 4px;
  padding: 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border: 1px solid rgba(212,160,23,.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 30px rgba(0,0,0,.4);
}

.trend-tabs__btn {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border: none;
  border-radius: 999px;
  background: none;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .4px;
  color: rgba(255,255,255,.55);
  cursor: pointer;
  overflow: visible;
  animation: trendTabDrop .6s cubic-bezier(.2,.8,.2,1) both;
  transition: color .35s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
}

.trend-tabs__btn:nth-child(1) { animation-delay: .05s; }
.trend-tabs__btn:nth-child(2) { animation-delay: .13s; }
.trend-tabs__btn:nth-child(3) { animation-delay: .21s; }
.trend-tabs__btn:nth-child(4) { animation-delay: .29s; }

@keyframes trendTabDrop {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.trend-tabs__btn i {
  font-size: 12px;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}

.trend-tabs__btn:hover i {
  transform: scale(1.2) rotate(-8deg);
}

/* hover glow pill (non-active tabs) */
.trend-tabs__btn:not(.is-active)::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(212,160,23,.12);
  opacity: 0;
  transform: scale(.82);
  transition: opacity .3s ease, transform .3s ease;
  z-index: -1;
  pointer-events: none;
}

.trend-tabs__btn:not(.is-active):hover::before {
  opacity: 1;
  transform: scale(1);
}

.trend-tabs__btn:not(.is-active):hover {
  color: #fff;
  transform: translateY(-2px);
}

.trend-tabs__btn:active {
  transform: translateY(0) scale(.95);
}

/* active tab: solid animated gradient pill + glow + pulse */
.trend-tabs__btn.is-active {
  color: var(--clr-dark);
  animation: trendTabDrop .6s cubic-bezier(.2,.8,.2,1) both, trendPillPulse 2.6s ease-in-out infinite;
}

.trend-tabs__btn.is-active::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--clr-primary-dark), var(--clr-primary) 45%, #f4d27a 55%, var(--clr-primary));
  background-size: 260% 260%;
  animation: trendTabShine 3.2s ease infinite;
  box-shadow: 0 10px 22px rgba(212,160,23,.45), 0 0 26px rgba(212,160,23,.3);
  z-index: -1;
}

@keyframes trendTabShine {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@keyframes trendPillPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,160,23,0); }
  50%      { box-shadow: 0 0 0 6px rgba(212,160,23,.08); }
}

@media (prefers-reduced-motion: reduce) {
  .trend-tabs__btn,
  .trend-tabs__btn.is-active,
  .trend-tabs__btn.is-active::before {
    animation: none !important;
  }
}

/* ---------- Row + arrows ---------- */
.trend-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
}

.trend-arrow {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(212,160,23,.35);
  background: rgba(255,255,255,.03);
  color: var(--clr-primary);
  font-size: 14px;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.trend-arrow:hover {
  background: var(--clr-primary);
  color: var(--clr-dark);
  border-color: var(--clr-primary);
  box-shadow: var(--shadow-glow-md);
  transform: scale(1.08);
}

.trend-arrow:active {
  transform: scale(.96);
}


.trend-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  min-width: 0;
}

/* ---------- Card ---------- */
.trend-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--radius-card, 14px);
  overflow: hidden;
  background: #141414;
  border: 1px solid rgba(212,160,23,.14);
  box-shadow: 0 18px 36px rgba(0,0,0,.3);
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease, border-color .4s ease;
  animation: trendCardRise .7s cubic-bezier(.2,.8,.2,1) both;
}

.trend-card:nth-child(1) { animation-delay: .05s; }
.trend-card:nth-child(2) { animation-delay: .15s; }
.trend-card:nth-child(3) { animation-delay: .25s; }
.trend-card:nth-child(4) { animation-delay: .35s; }

@keyframes trendCardRise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

.trend-card:hover {
  transform: translateY(-14px) rotateX(3deg) rotateY(-2deg) scale(1.02);
  box-shadow: 0 34px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(212,160,23,.28), 0 0 40px rgba(212,160,23,.14);
}

/* spinning conic-gradient ring around the card border on hover */
.trend-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from 0deg, var(--clr-primary), transparent 30%, transparent 70%, var(--clr-primary));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  animation: trendCardSpin 5s linear infinite;
  transition: opacity .4s ease;
  pointer-events: none;
  z-index: 3;
}

.trend-card:hover::before {
  opacity: .9;
}

@keyframes trendCardSpin {
  to { transform: rotate(360deg); }
}

/* --- the flip --- */
.trend-card__flip {
  position: relative;
  aspect-ratio: 3 / 4;
  perspective: 1400px;
}

/* diagonal light sweep across the image on hover */
.trend-card__flip::after {
  content: '';
  position: absolute;
  top: 0;
  left: -160%;
  width: 55%;
  height: 100%;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.32) 50%, transparent 100%);
  transform: skewX(-20deg);
  z-index: 3;
  pointer-events: none;
  transition: left .9s ease;
}

.trend-card:hover .trend-card__flip::after {
  left: 160%;
}

.trend-card__flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 1.15s cubic-bezier(.19,1,.22,1);
}

.trend-card:hover .trend-card__flip-inner {
  transform: rotateY(180deg);
}

.trend-card__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.trend-card__face--back {
  transform: rotateY(180deg);
}

.trend-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .5s ease;
}

.trend-card:hover .trend-card__img {
  transform: scale(1.08);
  filter: saturate(1.12) contrast(1.05) brightness(1.03);
}

/* discount badge */
.trend-card__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 4;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .4px;
  color: var(--clr-dark);
  background: var(--clr-primary);
  box-shadow: 0 6px 14px rgba(212,160,23,.35);
  animation: trendBadgePulse 2.2s ease-in-out infinite;
}

@keyframes trendBadgePulse {
  0%, 100% { box-shadow: 0 6px 14px rgba(212,160,23,.35); }
  50%      { box-shadow: 0 6px 20px rgba(212,160,23,.6); }
}

/* quick-action icons */
.trend-card__actions {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trend-card__action {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(10,10,10,.65);
  backdrop-filter: blur(4px);
  color: var(--clr-white);
  font-size: 12px;
  cursor: pointer;
  opacity: 0;
  transform: translateX(14px);
  transition: opacity .3s ease, transform .3s ease, background .25s ease, color .25s ease;
}

.trend-card:hover .trend-card__action {
  opacity: 1;
  transform: translateX(0);
}

.trend-card__action:nth-child(1) { transition-delay: .04s; }
.trend-card__action:nth-child(2) { transition-delay: .1s; }
.trend-card__action:nth-child(3) { transition-delay: .16s; }

.trend-card__action:hover {
  background: var(--clr-primary);
  color: var(--clr-dark);
  transform: translateX(0) scale(1.1);
}

/* =========================================================
   QUICK ADD — compact professional pill button, floats up
   from the center-bottom of the card on hover
   ========================================================= */
.trend-card__quickadd {
  position: absolute;
  left: 50%;
  bottom: 16px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--clr-dark);
  background: linear-gradient(120deg, var(--clr-primary-dark), var(--clr-primary) 45%, #f4d27a 55%, var(--clr-primary));
  background-size: 240% 240%;
  box-shadow: 0 10px 24px rgba(212,160,23,.35);
  cursor: pointer;
  white-space: nowrap;
  transform: translate(-50%, 16px) scale(.88);
  opacity: 0;
  transition: transform .5s cubic-bezier(.19,1,.22,1), opacity .4s ease, box-shadow .4s ease, background-position .8s ease;
}

.trend-card:hover .trend-card__quickadd {
  transform: translate(-50%, 0) scale(1);
  opacity: 1;
  transition-delay: .14s;
}

.trend-card__quickadd:hover {
  background-position: 100% 100%;
  box-shadow: 0 14px 30px rgba(212,160,23,.5), 0 0 26px rgba(212,160,23,.4);
  transform: translate(-50%, -3px) scale(1.05);
}

.trend-card__quickadd:active {
  transform: translate(-50%, 0) scale(.96);
}

.trend-card__quickadd i {
  font-size: 11px;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}

.trend-card__quickadd:hover i {
  transform: translateY(-1px) rotate(-10deg) scale(1.2);
}

/* --- body / text --- */
.trend-card__body {
  position: relative;
  padding: 16px 16px 20px;
}

.trend-card__cat {
  display: block;
  margin-bottom: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--clr-primary);
  transition: letter-spacing .3s ease;
}

.trend-card:hover .trend-card__cat {
  letter-spacing: 2px;
}

.trend-card__name {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--clr-white);
  margin: 0 0 8px;
  transition: color .25s ease;
}

.trend-card__name::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 1px;
  background: var(--clr-primary);
  transition: width .35s cubic-bezier(.2,.8,.2,1);
}

.trend-card:hover .trend-card__name {
  color: var(--clr-primary);
}

.trend-card:hover .trend-card__name::after {
  width: 100%;
}

.trend-card__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}

.trend-card__price--now {
  display: inline-block;
  font-size: 15px;
  font-weight: 800;
  color: var(--clr-primary);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}

.trend-card:hover .trend-card__price--now {
  transform: translateY(-2px) scale(1.05);
}

.trend-card__price--old {
  font-size: 12.5px;
  color: rgba(255,255,255,.4);
  text-decoration: line-through;
}

@media (max-width: 1200px) {
  .trend-head__title { font-size: 36px; }
}

@media (max-width: 992px) {
  .trend-section { padding: 72px 0 84px; }
  .trend-head__title { font-size: 32px; }

  .trend-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .trend-row { align-items: flex-start; }
  .trend-arrow { display: none; }
}

@media (max-width: 768px) {
  .trend-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .trend-tabs {
    max-width: 100%;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .trend-tabs::-webkit-scrollbar { display: none; }

  .trend-tabs__btn { flex: 0 0 auto; }

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

@media (max-width: 560px) {
  .trend-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (hover: none) and (pointer: coarse) {
 
  .trend-card__action {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trend-card,
  .trend-card::before,
  .trend-card__flip::after,
  .trend-card__flip-inner,
  .trend-card__action,
  .trend-card__badge,
  .trend-card__quickadd,
  .trend-tabs__btn,
  .trend-tabs__btn.is-active,
  .trend-tabs__btn.is-active::before {
    animation: none !important;
    transition: none !important;
  }
  .trend-card:hover {
    transform: translateY(-8px);
  }
  .trend-card:hover .trend-card__flip-inner {
    transform: none;
  }
  .trend-card__quickadd {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}


.trend-tabs {
  position: relative;
  display: flex;
  gap: 6px;
  padding: 8px;
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 180% at 0% 0%, rgba(212,160,23,.14), transparent 55%),
    radial-gradient(120% 180% at 100% 100%, rgba(244,210,122,.1), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  background-size: 220% 220%, 220% 220%, 100% 100%;
  animation: trendTabsAurora 9s ease-in-out infinite;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 16px 38px rgba(0,0,0,.5);
}

@keyframes trendTabsAurora {
  0%, 100% { background-position: 0% 0%, 100% 100%, 0 0; }
  50%      { background-position: 60% 40%, 40% 60%, 0 0; }
}

/* slow rotating gradient ring hugging the capsule edge */
.trend-tabs::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: 999px;
  padding: 1.5px;
  background: conic-gradient(from 0deg,
    rgba(212,160,23,.05),
    rgba(212,160,23,.6),
    rgba(244,210,122,.85),
    rgba(212,160,23,.05) 35%,
    rgba(212,160,23,.05) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: trendTabsRingSpin 8s linear infinite;
  z-index: -1;
  pointer-events: none;
}

/* faint dotted micro-texture for depth */
.trend-tabs::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 10px 10px;
  opacity: .5;
  pointer-events: none;
  z-index: -1;
}

@keyframes trendTabsRingSpin {
  to { transform: rotate(360deg); }
}

.trend-tabs__btn {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 24px 8px 8px;
  border: none;
  border-radius: 999px;
  background: none;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .4px;
  color: rgba(255,255,255,.55);
  cursor: pointer;
  overflow: visible;
  animation: trendTabDrop .6s cubic-bezier(.2,.8,.2,1) both;
  transition: color .35s ease, transform .3s cubic-bezier(.34,1.56,.64,1), letter-spacing .3s ease;
}

.trend-tabs__btn:nth-child(1) { animation-delay: .05s; }
.trend-tabs__btn:nth-child(2) { animation-delay: .13s; }
.trend-tabs__btn:nth-child(3) { animation-delay: .21s; }
.trend-tabs__btn:nth-child(4) { animation-delay: .29s; }

@keyframes trendTabDrop {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* icon lives inside its own circular badge */
.trend-tabs__btn i {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 11.5px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.65);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition: background .35s ease, color .35s ease, transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
}

/* --- hover state (inactive tabs) --- */
.trend-tabs__btn:not(.is-active)::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  opacity: 0;
  transform: scale(.82);
  transition: opacity .3s ease, transform .3s ease;
  z-index: -1;
  pointer-events: none;
}

.trend-tabs__btn:not(.is-active):hover::after {
  opacity: 1;
  transform: scale(1);
}

.trend-tabs__btn:not(.is-active):hover {
  color: #fff;
  letter-spacing: .8px;
  transform: translateY(-3px);
}

.trend-tabs__btn:not(.is-active):hover i {
  background: rgba(212,160,23,.2);
  color: var(--clr-primary);
  transform: rotate(-10deg) scale(1.12);
  box-shadow: 0 0 14px rgba(212,160,23,.35), inset 0 1px 0 rgba(255,255,255,.1);
}

/* soft glowing dot that fades in under inactive tabs on hover */
.trend-tabs__btn:not(.is-active)::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--clr-primary);
  box-shadow: 0 0 8px 2px rgba(212,160,23,.6);
  opacity: 0;
  transform: translateX(-50%) scale(.4);
  transition: opacity .3s ease, transform .3s ease;
  z-index: -1;
}

.trend-tabs__btn:not(.is-active):hover::before {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* press feedback — quick squash + flash, no JS needed */
.trend-tabs__btn:active {
  transform: scale(.94);
}

.trend-tabs__btn:active i {
  transform: scale(.88);
}

/* keyboard focus ring, kept in the brand palette */
.trend-tabs__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(10,10,10,.9), 0 0 0 4px rgba(212,160,23,.65);
}


.trend-tabs__btn.is-active {
  color: var(--clr-dark);
  padding-right: 28px;
  animation:
    trendTabDrop .6s cubic-bezier(.2,.8,.2,1) both,
    trendPillPulse 2.8s ease-in-out infinite;
}

.trend-tabs__btn.is-active::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(120deg,
    var(--clr-primary-dark) 0%,
    var(--clr-primary) 40%,
    #f4d27a 55%,
    var(--clr-primary) 100%);
  background-size: 280% 280%;
  animation: trendTabShine 3.4s ease infinite;
  box-shadow:
    0 10px 26px rgba(212,160,23,.5),
    0 0 34px rgba(212,160,23,.35),
    inset 0 1px 0 rgba(255,255,255,.4);
  z-index: -1;
}

/* thin bright sheen streak that slides across the active pill */
.trend-tabs__btn.is-active::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);
  background-size: 250% 100%;
  animation: trendTabSheenSweep 3.4s ease-in-out infinite;
  z-index: -1;
  pointer-events: none;
}

@keyframes trendTabSheenSweep {
  0%   { background-position: 150% 0; opacity: 0; }
  10%  { opacity: .8; }
  35%  { opacity: 0; }
  100% { background-position: -50% 0; opacity: 0; }
}

.trend-tabs__btn.is-active i {
  background: rgba(10,10,10,.2);
  color: var(--clr-dark);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}

/* idle pulsing ring around the active icon badge */
.trend-tabs__btn.is-active i::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid rgba(10,10,10,.35);
  animation: trendTabIconPulse 2.2s ease-out infinite;
}

@keyframes trendTabIconPulse {
  0%   { transform: scale(.7); opacity: .8; }
  100% { transform: scale(1.6); opacity: 0; }
}

.trend-tabs__btn.is-active:hover {
  transform: translateY(-2px);
}

@keyframes trendTabShine {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@keyframes trendPillPulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(212,160,23,0)); }
  50%      { filter: drop-shadow(0 0 10px rgba(212,160,23,.45)); }
}

@media (prefers-reduced-motion: reduce) {
  .trend-tabs,
  .trend-tabs::before,
  .trend-tabs__btn,
  .trend-tabs__btn.is-active,
  .trend-tabs__btn.is-active::before,
  .trend-tabs__btn.is-active::after,
  .trend-tabs__btn.is-active i::after {
    animation: none !important;
  }
}
/* ////////////////////////////////////////////////////////////////////////////////////// */


.testi-section {
  position: relative;
  padding: clamp(56px, 8vw, 96px) 0 clamp(48px, 7vw, 84px);
  background:
    radial-gradient(700px 360px at 8% 0%, rgba(212,160,23,.10), transparent 60%),
    radial-gradient(620px 320px at 96% 100%, rgba(212,160,23,.08), transparent 60%),
    linear-gradient(180deg, #0a0a0a 0%, #121212 45%, #0c0c0c 100%);
  color: var(--clr-white);
  /* deliberately no overflow:hidden / isolation here — nothing
     should ever be able to clip the heading */
}

/* faint static diagonal texture — pure background-image, no
   animation, so it adds depth for zero runtime cost */
.testi-section__inner::before {
  content: '';
  position: absolute;
  inset: 0;
   -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  background-image: repeating-linear-gradient(125deg, rgba(212,160,23,.025) 0 2px, transparent 2px 22px);
  pointer-events: none;
  z-index: -1;
}

/* thin gold seam at the top, continuing the hand-off from the
   section above it */
.testi-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: min(70%, 760px);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(212,160,23,.5) 50%, transparent);
  pointer-events: none;
}

/* two soft glow blobs — a single slow float each, transform-only
   so it's essentially free to run (no layout/paint cost) */
.testi-section__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(56px);
  pointer-events: none;
  z-index: 0;
}

.testi-section__glow--a {
  width: 320px;
  height: 320px;
  top: -100px;
  left: -70px;
  background: radial-gradient(circle, rgba(212,160,23,.2), transparent 70%);
  animation: testiFloat 12s ease-in-out infinite;
}

.testi-section__glow--b {
  width: 300px;
  height: 300px;
  bottom: -120px;
  right: -60px;
  background: radial-gradient(circle, rgba(244,210,122,.14), transparent 70%);
  animation: testiFloat 14s ease-in-out infinite reverse;
}

@keyframes testiFloat {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(12px, -10px); }
}

/* a couple of tiny drifting gold sparks riding along with the two
   glow blobs — piggybacks on elements that already exist, so no
   extra markup is needed; opacity/transform only, cheap to run */
.testi-section__glow--a::after,
.testi-section__glow--b::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--clr-primary);
  box-shadow: 0 0 10px 2px rgba(212,160,23,.6);
  opacity: 0;
  animation: testiSparkFloat 8s ease-in-out infinite;
}

.testi-section__glow--a::after { top: 60%; left: 70%; animation-delay: 1s; }
.testi-section__glow--b::after { top: 30%; left: 20%; animation-delay: 3.5s; }

@keyframes testiSparkFloat {
  0%   { opacity: 0; transform: translateY(0) scale(.6); }
  20%  { opacity: .9; }
  80%  { opacity: .5; }
  100% { opacity: 0; transform: translateY(-46px) scale(1.15); }
}

/* slow vertical scan-line sweeping through the section every few
   seconds — a subtle "premium tech" touch, single element,
   opacity + transform(top) only */
.testi-section::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 140px;
  background: linear-gradient(180deg, transparent, rgba(212,160,23,.05), transparent);
  pointer-events: none;
  z-index: 0;
  animation: testiScan 8s ease-in-out infinite;
}

@keyframes testiScan {
  0%   { top: -140px; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.testi-section__inner {
  position: relative;
  z-index: 1;
}

/* ---------- Head — always visible, on top, no fade gimmick ---------- */
.testi-head {
  position: relative;
  z-index: 2;
  max-width: 660px;
  margin: 0 auto clamp(30px, 4.5vw, 46px);
  text-align: center;
  overflow: visible;
}

/* small icon medallion floating above the kicker — pure ::before,
   no extra markup, with a slow breathing glow */
.testi-head::before {
  content: '\f0e7'; /* fa-bolt */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  border-radius: 50%;
  font-size: 16px;
  color: var(--clr-primary);
  background: radial-gradient(circle, rgba(212,160,23,.18), rgba(212,160,23,.02) 70%);
  box-shadow: 0 0 0 1px rgba(212,160,23,.35), 0 0 18px rgba(212,160,23,.2);
  animation: testiIconPulse 2.8s ease-in-out infinite;
}

@keyframes testiIconPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(212,160,23,.35), 0 0 16px rgba(212,160,23,.16); }
  50%      { box-shadow: 0 0 0 1px rgba(212,160,23,.6),  0 0 28px rgba(212,160,23,.4); }
}

.testi-head__kicker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 6px 14px;
  border: 1px solid rgba(212,160,23,.45);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--clr-primary);
  background: rgba(212,160,23,.08);
  transition: box-shadow .3s ease, transform .3s ease;
}

.testi-head__kicker:hover {
  box-shadow: 0 0 16px rgba(212,160,23,.35);
  transform: translateY(-1px);
}

/* ornamental flanking lines either side of the kicker pill */
.testi-head__kicker::before,
.testi-head__kicker::after {
  content: '';
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,160,23,.6));
}

.testi-head__kicker::after {
  transform: scaleX(-1);
}

.testi-head__title {
  display: block;
  width: 100%;
  font-family: var(--font-display);
  font-size: clamp(26px, 3.6vw, 42px);
  font-weight: 800;
  letter-spacing: .4px;
  line-height: 1.28;
  margin: 0 0 clamp(14px, 2vw, 20px);
  padding-bottom: 18px;
  position: relative;
  overflow-wrap: break-word;
  opacity: 1; /* always visible, at every width */
  /* gradient shimmer text — a slow, subtle sheen drifting across
     the letters; one small text element, cheap to keep running */
  background: linear-gradient(100deg,
    #ffffff 0%, #ffffff 38%,
    var(--clr-primary) 50%,
    #ffffff 62%, #ffffff 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: testiTitleShimmer 6s ease-in-out infinite, testiTitleGlow 3.2s ease-in-out infinite;
}

@keyframes testiTitleGlow {
  0%, 100% { text-shadow: 0 0 16px rgba(212,160,23,.14); }
  50%      { text-shadow: 0 0 30px rgba(212,160,23,.32); }
}

@keyframes testiTitleShimmer {
  0%   { background-position: 120% 0; }
  50%  { background-position: -20% 0; }
  100% { background-position: 120% 0; }
}

/* underline draws itself in once on load, then sits still */
.testi-head__title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 3px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--clr-primary-dark), var(--clr-primary));
  animation: testiUnderlineDraw 1s cubic-bezier(.2,.8,.2,1) .3s forwards;
}

@keyframes testiUnderlineDraw {
  to { width: 68px; }
}

.testi-head__desc {
  font-size: clamp(13px, 1.4vw, 15px);
  line-height: 1.8;
  color: rgba(255, 255, 255, .62);
}

/* ---------- Row + arrows ---------- */
.testi-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 22px);
  max-width: 1000px; /* a little wider than before */
  margin: 0 auto;
}

.testi-arrow {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(212,160,23,.35);
  background: rgba(255,255,255,.03);
  color: var(--clr-primary);
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.testi-arrow:hover {
  background: var(--clr-primary);
  color: var(--clr-dark);
  border-color: var(--clr-primary);
  box-shadow: 0 10px 22px rgba(212,160,23,.3);
  transform: scale(1.06);
}

.testi-arrow:active {
  transform: scale(.95);
}

/* ---------- Track (pure-CSS scroll-snap carousel) ---------- */
.testi-track {
  flex: 1;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
  border-radius: 22px;
  min-width: 0;
  perspective: 1400px; /* gives the card's hover-tilt somewhere to tilt into */
  counter-reset: testi; /* powers the auto "01 / 02 / 03" badge below */
}

.testi-track::-webkit-scrollbar {
  display: none;
}

.testi-slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  padding: 4px;
  counter-increment: testi;
}

/* ---------- Card ---------- */
.testi-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(30px, 4.4vw, 50px) clamp(22px, 5.5vw, 54px) clamp(26px, 3.6vw, 38px);
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border: 1px solid rgba(212,160,23,.2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 22px 44px rgba(0,0,0,.35);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .45s ease;
  transform-style: preserve-3d;
}

.testi-card:hover {
  transform: translateY(-6px) rotateX(3deg) rotateY(-2deg) scale(1.012);
  border-color: rgba(212,160,23,.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 30px 58px rgba(0,0,0,.44),
    0 0 30px rgba(212,160,23,.15);
}

/* giant translucent watermark quote mark sitting behind the copy —
   pure ::before with an icon glyph, no extra markup, no animation */
.testi-card::before {
  content: '\f10d'; /* fa-quote-left */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  top: -6px;
  left: 18px;
  font-size: clamp(70px, 9vw, 108px);
  line-height: 1;
  color: rgba(212,160,23,.07);
  pointer-events: none;
  z-index: 0;
}

/* one-shot diagonal sheen that sweeps across the card on hover —
   plays once per hover, costs nothing while idle */
.testi-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -160%;
  width: 55%;
  height: 100%;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.06) 50%, transparent 100%);
  transform: skewX(-20deg);
  pointer-events: none;
  z-index: 0;
  transition: left .9s ease;
}

.testi-card:hover::after {
  left: 160%;
}

.testi-card > * {
  position: relative;
  z-index: 1;
}

.testi-card__quote-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(44px, 5.6vw, 54px);
  height: clamp(44px, 5.6vw, 54px);
  margin-bottom: 18px;
  border-radius: 50%;
  font-size: clamp(15px, 2vw, 19px);
  color: var(--clr-primary);
  background: radial-gradient(circle, rgba(212,160,23,.2), rgba(212,160,23,.04) 70%);
  box-shadow: 0 0 0 1px rgba(212,160,23,.3), 0 0 20px rgba(212,160,23,.18);
  transition: box-shadow .3s ease, transform .3s ease;
}

.testi-card:hover .testi-card__quote-icon {
  box-shadow: 0 0 0 1px rgba(212,160,23,.5), 0 0 26px rgba(212,160,23,.3);
  transform: translateY(-2px) rotate(-8deg);
}

/* auto-numbered badge ("01", "02", "03"…) — driven entirely by the
   CSS counter above, so it always matches however many slides
   actually exist without editing this file again */
.testi-card__quote-icon::after {
  content: counter(testi, decimal-leading-zero);
  position: absolute;
  bottom: -6px;
  right: -10px;
  min-width: 22px;
  height: 22px;
  padding: 0 3px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--clr-dark);
  border: 1px solid rgba(212,160,23,.5);
  color: var(--clr-primary);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(0,0,0,.35);
}

.testi-card__stars {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 20px;
}

/* stars pop in once when the page loads — quick, cheap
   (opacity + transform only), then they simply stay put */
.testi-card__stars i {
  font-size: clamp(11px, 1.5vw, 13px);
  color: var(--clr-primary);
  opacity: 0;
  transform: scale(.5);
  animation: testiStarPop .4s ease forwards;
}

.testi-card__stars i:nth-child(1) { animation-delay: .05s; }
.testi-card__stars i:nth-child(2) { animation-delay: .1s; }
.testi-card__stars i:nth-child(3) { animation-delay: .15s; }
.testi-card__stars i:nth-child(4) { animation-delay: .2s; }
.testi-card__stars i:nth-child(5) { animation-delay: .25s; }

@keyframes testiStarPop {
  to { opacity: 1; transform: scale(1); }
}

/* small "5.0" rating label riding right after the stars */
.testi-card__stars::after {
  content: '5.0';
  margin-left: 4px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.55);
  opacity: 0;
  animation: testiStarPop .4s ease .3s forwards;
}

.testi-card__text {
  max-width: 640px; /* a little wider */
  font-family: var(--font-display);
  font-size: clamp(14px, 2vw, 19px);
  font-weight: 600;
  line-height: 1.65;
  color: #f2f2f2;
  margin-bottom: clamp(22px, 3.4vw, 32px);
}

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

/* gold ring around the avatar — static by default, does one clean
   360° spin only while hovered (transition-based, not infinite) */
.testi-card__avatar {
  position: relative;
  display: block;
  width: clamp(48px, 6vw, 58px);
  height: clamp(48px, 6vw, 58px);
  border-radius: 50%;
  padding: 2px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--clr-primary-dark), var(--clr-primary), #f4d27a);
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}

.testi-card:hover .testi-card__avatar {
  transform: scale(1.06) rotate(360deg);
}

.testi-card__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #0c0c0c;
}

.testi-card__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.testi-card__name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: clamp(13px, 1.6vw, 15px);
  font-weight: 800;
  letter-spacing: .3px;
  color: var(--clr-white);
}

/* verified-owner checkmark badge, pure CSS — no extra markup */
.testi-card__name::after {
  content: '\f058'; /* fa-circle-check */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 12px;
  color: var(--clr-primary);
}

.testi-card__role {
  font-size: clamp(10px, 1.3vw, 11.5px);
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--clr-primary);
  margin-top: 2px;
}

/* ---------- Dots ---------- */
.testi-dots {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: clamp(24px, 4vw, 34px);
}

/* faint connecting track running behind the dots */
.testi-dots::before {
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
  background: rgba(212,160,23,.15);
  z-index: -1;
}

.testi-dots__dot {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(212,160,23,.3);
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease, width .3s ease;
}

/* name tooltip that appears above each dot on hover — reuses the
   reviewer names already in the markup, no new HTML needed */
.testi-dots__dot::after {
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: 9px;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--clr-dark);
  border: 1px solid rgba(212,160,23,.4);
  color: var(--clr-primary);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity .25s ease, transform .25s ease;
}

.testi-dots__dot:nth-child(1)::after { content: 'Marco'; }
.testi-dots__dot:nth-child(2)::after { content: 'Sara'; }
.testi-dots__dot:nth-child(3)::after { content: 'James'; }

.testi-dots__dot:hover::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.testi-dots__dot:hover {
  background: var(--clr-primary);
  transform: scale(1.25);
  box-shadow: 0 0 10px rgba(212,160,23,.45);
}

.testi-dots__dot:first-child {
  width: 26px;
  border-radius: 999px;
  background: var(--clr-primary);
  box-shadow: 0 0 8px rgba(212,160,23,.4);
  animation: testiDotPulse 2.4s ease-in-out infinite;
}

@keyframes testiDotPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(212,160,23,.4); }
  50%      { box-shadow: 0 0 14px rgba(212,160,23,.7); }
}


@media (max-width: 1100px) {
  .testi-row {
    max-width: 880px;
  }
}

@media (max-width: 992px) {
  .testi-row {
    max-width: 720px;
  }
}

@media (max-width: 768px) {
  .testi-row {
    gap: 10px;
  }

  .testi-arrow {
    width: 38px;
    height: 38px;
    font-size: 11px;
  }

  .testi-card {
    border-radius: 16px;
  }
}

@media (max-width: 560px) {
  .testi-row {
    flex-direction: column;
  }

  .testi-arrow {
    display: none;
  }

  .testi-card__person {
    flex-direction: column;
    text-align: center;
  }

  .testi-card__meta {
    align-items: center;
    text-align: center;
  }
}

@media (max-width: 360px) {
  .testi-head__kicker {
    font-size: 9.5px;
    letter-spacing: 1.6px;
    padding: 5px 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .testi-section__glow--a,
  .testi-section__glow--b,
  .testi-section__glow--a::after,
  .testi-section__glow--b::after,
  .testi-section::after,
  .testi-head::before,
  .testi-head__title,
  .testi-head__title::after,
  .testi-dots__dot:first-child,
  .testi-card__stars i,
  .testi-card__stars::after {
    animation: none !important;
  }

  .testi-head__title {
    color: var(--clr-white);
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    text-shadow: none;
  }

  .testi-head__title::after {
    width: 68px;
  }

  .testi-card__stars i,
  .testi-card__stars::after {
    opacity: 1;
    transform: none;
  }

  .testi-card:hover {
    transform: translateY(-4px);
  }

  .testi-card:hover .testi-card__avatar,
  .testi-card:hover .testi-card__quote-icon {
    transform: none;
  }
}
/* /////////////////////////////////////////////////////////////////////////////////// */

:root {
  --clr-primary: #d4a017;
  --clr-primary-dark: #b8860b;
  --clr-dark: #0a0a0a;
  --clr-white: #fff;
  --font-display: 'Segoe UI', 'Arial Narrow', Arial, sans-serif;
  --font-body: 'Segoe UI', Tahoma, Arial, sans-serif;
  --shadow-glow-md: 0 10px 26px rgba(212, 160, 23, .26);
  --radius-card: 14px;
}

* {
  box-sizing: border-box;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 20px;
}


:root {
  --clr-primary: #d4a017;
  --clr-primary-dark: #b8860b;
  --clr-dark: #0a0a0a;
  --clr-white: #fff;
  --font-display: 'Segoe UI', 'Arial Narrow', Arial, sans-serif;
  --font-body: 'Segoe UI', Tahoma, Arial, sans-serif;
  --shadow-glow-md: 0 10px 26px rgba(212, 160, 23, .26);
  --radius-card: 14px;
}

* {
  box-sizing: border-box;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 20px;
}

:root {
  --clr-primary: #d4a017;
  --clr-primary-dark: #b8860b;
  --clr-dark: #0a0a0a;
  --clr-white: #fff;
  --font-display: 'Segoe UI', 'Arial Narrow', Arial, sans-serif;
  --font-body: 'Segoe UI', Tahoma, Arial, sans-serif;
  --shadow-glow-md: 0 10px 26px rgba(212, 160, 23, .26);
  --radius-card: 14px;
}

* {
  box-sizing: border-box;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 20px;
}

.ymk-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 96px 0 108px;
  background:
    radial-gradient(900px 420px at 6% 0%, rgba(212,160,23,.10), transparent 55%),
    radial-gradient(760px 400px at 100% 100%, rgba(212,160,23,.09), transparent 55%),
    linear-gradient(180deg, #0a0a0a 0%, #131313 50%, #0c0c0c 100%);
  color: var(--clr-white);
}

.ymk-section__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}

.ymk-section__glow--a {
  top: -120px;
  left: -100px;
  width: 340px;
  height: 340px;
  background: rgba(212,160,23,.22);
}

.ymk-section__glow--b {
  bottom: -140px;
  right: -110px;
  width: 380px;
  height: 380px;
  background: rgba(212,160,23,.16);
}

/* faint technical grid texture, pure background-image (zero runtime cost) */
.ymk-section__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .05;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(212,160,23,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,160,23,.5) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 40%, transparent 90%);
}

.ymk-section__inner {
  position: relative;
  z-index: 1;
}

/* drifting gold sparkle motes across the section — pure CSS,
   five particles on independent float/twinkle timings */
.ymk-spark {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--clr-primary);
  box-shadow: 0 0 8px 2px rgba(212,160,23,.7);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  animation: ymkSparkFloat linear infinite;
}

.ymk-spark--1 { top: 14%; left: 8%;  animation-duration: 9s;  animation-delay: 0s; }
.ymk-spark--2 { top: 68%; left: 15%; animation-duration: 12s; animation-delay: 1.5s; }
.ymk-spark--3 { top: 30%; left: 92%; animation-duration: 10s; animation-delay: .6s; }
.ymk-spark--4 { top: 80%; left: 88%; animation-duration: 13s; animation-delay: 2.2s; }
.ymk-spark--5 { top: 50%; left: 50%; animation-duration: 11s; animation-delay: 3s; }

@keyframes ymkSparkFloat {
  0%   { opacity: 0; transform: translateY(0) scale(.6); }
  15%  { opacity: .9; }
  50%  { transform: translateY(-46px) scale(1.15); }
  85%  { opacity: .7; }
  100% { opacity: 0; transform: translateY(-90px) scale(.5); }
}

/* ---------------------------------------------------------
   HEADER — the centerpiece: watermark + icon kicker +
   two-line white→gold display title + underline flourish
   --------------------------------------------------------- */
.ymk-head {
  position: relative;
  max-width: 680px;
  margin: 0 auto 56px;
  text-align: center;
}

/* huge, barely-there brand word sitting behind the title for
   showroom-poster depth — pure decoration, no layout weight */
.ymk-head__watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -54%);
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: clamp(50px, 9vw, 128px);
  font-weight: 800;
  letter-spacing: 10px;
  color: transparent;
  -webkit-text-stroke: 1px rgba(212,160,23,.14);
  z-index: -1;
  pointer-events: none;
  user-select: none;
  animation: ymkWatermarkIn 1.2s ease .1s both;
}

@keyframes ymkWatermarkIn {
  from { opacity: 0; letter-spacing: 4px; }
  to   { opacity: 1; letter-spacing: 10px; }
}

.ymk-head__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 7px 18px;
  border: 1px solid rgba(212,160,23,.45);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--clr-primary);
  background: rgba(212,160,23,.08);
  animation: ymkKickerIn .6s cubic-bezier(.2,.8,.2,1) both;
}

.ymk-head__kicker i {
  font-size: 11px;
  animation: ymkStarSpin 3.5s ease-in-out infinite;
}

@keyframes ymkStarSpin {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50%      { transform: rotate(180deg) scale(1.2); }
}

/* two-line title: line 1 white, line 2 gold-gradient with a
   subtle shimmer sweep across the gradient itself */
.ymk-head__title {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: .5px;
}

.ymk-head__title-line {
  display: block;
  font-size: clamp(36px, 5.6vw, 62px);
  animation: ymkTitleIn .7s cubic-bezier(.2,.8,.2,1) .1s both;
}

.ymk-head__title-line--gold {
  position: relative;
  margin-top: 2px;
  background: linear-gradient(100deg, var(--clr-primary-dark) 0%, var(--clr-primary) 25%, #fff0c2 50%, var(--clr-primary) 75%, var(--clr-primary-dark) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ymkTitleIn .7s cubic-bezier(.2,.8,.2,1) .22s both, ymkGoldSheen 5s linear 1s infinite;
}

.ymk-head__dot {
  color: var(--clr-primary);
  -webkit-text-fill-color: var(--clr-primary);
  animation: ymkDotBlink 1.6s ease-in-out infinite;
}

@keyframes ymkGoldSheen {
  to { background-position: -260% 0; }
}

@keyframes ymkDotBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .3; }
}

@keyframes ymkTitleIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ymk-head__desc {
  margin: 22px auto 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: rgba(255,255,255,.62);
  animation: ymkTitleIn .7s cubic-bezier(.2,.8,.2,1) .32s both;
}

@keyframes ymkKickerIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------
   ROW + ARROWS
   --------------------------------------------------------- */
.ymk-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
}

.ymk-arrow {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(212,160,23,.35);
  background: rgba(255,255,255,.03);
  color: var(--clr-primary);
  font-size: 14px;
  cursor: pointer;
  transition: background .3s ease, transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.ymk-arrow:hover {
  background: var(--clr-primary);
  color: var(--clr-dark);
  border-color: var(--clr-primary);
  box-shadow: var(--shadow-glow-md);
  transform: scale(1.08);
}

.ymk-arrow:active {
  transform: scale(.94);
}

/* ---------------------------------------------------------
   GRID — all 4 cards on one row, never wrapping on desktop
   --------------------------------------------------------- */
.ymk-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  perspective: 1400px;
}

/* ---------------------------------------------------------
   CARD SHELL
   --------------------------------------------------------- */
.ymk-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-card, 14px);
  overflow: hidden;
  background: #141414;
  border: 1px solid rgba(212,160,23,.14);
  box-shadow: 0 18px 36px rgba(0,0,0,.32);
  animation: ymkCardRise .7s cubic-bezier(.2,.8,.2,1) both;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .4s ease;
  transform-style: preserve-3d;
  will-change: transform;
}

.ymk-card:nth-child(1) { animation-delay: .05s; }
.ymk-card:nth-child(2) { animation-delay: .15s; }
.ymk-card:nth-child(3) { animation-delay: .25s; }
.ymk-card:nth-child(4) { animation-delay: .35s; }

@keyframes ymkCardRise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ymk-card:hover {
  transform: translateY(-10px) rotateX(2.5deg);
  box-shadow: 0 30px 54px rgba(0,0,0,.42), 0 0 0 1px rgba(212,160,23,.3), 0 0 34px rgba(212,160,23,.14);
  border-color: rgba(212,160,23,.4);
}

/* spinning gold ring on the border while hovered */
.ymk-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from 0deg, var(--clr-primary), transparent 30%, transparent 70%, var(--clr-primary));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  animation: ymkRingSpin 5s linear infinite;
  transition: opacity .4s ease;
  pointer-events: none;
  z-index: 3;
}

.ymk-card:hover::before {
  opacity: .85;
}

@keyframes ymkRingSpin {
  to { transform: rotate(360deg); }
}

/* corner accent brackets — same visual language as the nav's
   "throttle bracket" — snap open on hover for cross-site cohesion */
.ymk-card__corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid var(--clr-primary);
  opacity: 0;
  transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1);
  z-index: 7;
  pointer-events: none;
}

.ymk-card__corner--tl { top: 10px; left: 10px; border-right: none; border-bottom: none; transform: translate(-8px, -8px); }
.ymk-card__corner--br { bottom: 10px; right: 10px; border-left: none; border-top: none; transform: translate(8px, 8px); }

.ymk-card:hover .ymk-card__corner {
  opacity: .9;
  transform: translate(0, 0);
}

/* slow, continuous Ken-Burns drift on the base photo even at rest,
   so the grid never feels fully static (applied directly to
   .ymk-card__img--base below) */

@keyframes ymkKenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.045); }
}


.ymk-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: linear-gradient(135deg, #1c1c1c, #262626);
}

.ymk-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.ymk-card__img--base {
  z-index: 1;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .5s ease;
  animation: ymkKenBurns 14s ease-in-out infinite alternate;
}

.ymk-card:hover .ymk-card__img--base {
  animation: none;
  transform: scale(1.06);
  filter: brightness(.55) saturate(1.1);
}

/* second photo starts hidden above the frame and drops down to
   fully cover the base image on hover */
.ymk-card__img--hover {
  z-index: 2;
  transform: translateY(-100%);
  transition: transform .55s cubic-bezier(.19,1,.22,1);
}

.ymk-card:hover .ymk-card__img--hover {
  transform: translateY(0);
}

/* diagonal light sweep as the new image lands */
.ymk-card__shine {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.28) 50%, transparent 58%);
  transform: translateX(-130%);
  pointer-events: none;
}

.ymk-card:hover .ymk-card__shine {
  animation: ymkShineSweep .8s ease .18s;
}

@keyframes ymkShineSweep {
  from { transform: translateX(-130%); }
  to   { transform: translateX(130%); }
}

/* permanent soft vignette for photographic depth, deepens on hover */
.ymk-card__vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
  transition: opacity .4s ease;
  pointer-events: none;
}

.ymk-card:hover .ymk-card__vignette {
  opacity: .7;
}

/* discount badge, top-left */
.ymk-card__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;
  padding: 5px 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--clr-primary-dark), var(--clr-primary));
  color: var(--clr-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .4px;
  box-shadow: 0 6px 14px rgba(212,160,23,.35);
  animation: ymkBadgePulse 2.4s ease-in-out infinite;
}

@keyframes ymkBadgePulse {
  0%, 100% { box-shadow: 0 6px 14px rgba(212,160,23,.35); }
  50%      { box-shadow: 0 6px 20px rgba(212,160,23,.6); }
}

/* ---------------------------------------------------------
   QUICK ACTION ICONS — project's own Font Awesome set
   --------------------------------------------------------- */
.ymk-card__actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px 12px 18px;
  background: linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 70%, transparent 100%);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}

.ymk-card:hover .ymk-card__actions {
  opacity: 1;
  pointer-events: auto;
}

.ymk-card__action {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.5);
  font-size: 15px;
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transform: translateY(22px) scale(.7);
  transition: transform .45s cubic-bezier(.34,1.56,.64,1), opacity .3s ease,
              background .25s ease, color .25s ease, border-color .25s ease,
              box-shadow .3s ease;
}

.ymk-card:hover .ymk-card__action {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.ymk-card:hover .ymk-card__action:nth-child(1) { transition-delay: .18s; }
.ymk-card:hover .ymk-card__action:nth-child(2) { transition-delay: .28s; }
.ymk-card:hover .ymk-card__action:nth-child(3) { transition-delay: .38s; }

.ymk-card__action:hover {
  background: var(--clr-primary);
  border-color: var(--clr-primary);
  color: var(--clr-dark);
  transform: translateY(-4px) scale(1.12);
  box-shadow: 0 10px 22px rgba(212,160,23,.5);
}

.ymk-card__action:active {
  transform: translateY(-1px) scale(.94);
}

.ymk-card__action i {
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}

.ymk-card__action:hover i {
  transform: scale(1.12);
}

/* floating ripple ring on click — pure CSS, keyed off :active + a
   one-shot animation that restarts each time the button is pressed */
.ymk-card__action::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1.5px solid var(--clr-primary);
  opacity: 0;
  transform: scale(1);
  pointer-events: none;
}

.ymk-card__action:active::before {
  animation: ymkActionRipple .5s ease-out;
}

@keyframes ymkActionRipple {
  from { opacity: .8; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.9); }
}

/* CSS-only tooltip label, floats above the icon on hover */
.ymk-card__action::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, 6px);
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--clr-dark);
  color: var(--clr-primary);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .5px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 8px 18px rgba(0,0,0,.4);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
  pointer-events: none;
  z-index: 10;
}

.ymk-card__action:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* ---------------------------------------------------------
   BODY — category (with icon), name, price
   --------------------------------------------------------- */
.ymk-card__body {
  padding: 18px 18px 20px;
}

.ymk-card__cat {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--clr-primary);
  transition: letter-spacing .3s ease;
}

.ymk-card__cat i {
  font-size: 10px;
  transition: transform .45s cubic-bezier(.34,1.56,.64,1);
}

.ymk-card:hover .ymk-card__cat i {
  transform: rotate(-14deg) scale(1.25);
}

.ymk-card:hover .ymk-card__cat {
  letter-spacing: 2.2px;
}

.ymk-card__name {
  position: relative;
  display: inline-block;
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--clr-white);
}

.ymk-card__name::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 1px;
  background: var(--clr-primary);
  transition: width .35s cubic-bezier(.2,.8,.2,1);
}

.ymk-card:hover .ymk-card__name::after {
  width: 100%;
}

.ymk-card__price {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 0;
}

.ymk-card__price--now {
  display: inline-block;
  font-size: 16px;
  font-weight: 800;
  color: var(--clr-primary);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
  animation: ymkPriceGlow 3.2s ease-in-out infinite;
}

@keyframes ymkPriceGlow {
  0%, 100% { text-shadow: 0 0 0 rgba(212,160,23,0); }
  50%      { text-shadow: 0 0 12px rgba(212,160,23,.55); }
}

.ymk-card:hover .ymk-card__price--now {
  transform: translateY(-2px) scale(1.05);
}

.ymk-card__price--old {
  font-size: 12.5px;
  color: rgba(255,255,255,.4);
  text-decoration: line-through;
}

/* =========================================================
   RESPONSIVE — YOU MAY LIKE
   ========================================================= */
@media (max-width: 992px) {
  .ymk-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ymk-head__watermark {
    font-size: clamp(40px, 12vw, 80px);
  }
}

@media (max-width: 576px) {
  .ymk-section {
    padding: 64px 0 72px;
  }

  .ymk-row {
    gap: 10px;
  }

  .ymk-grid {
    grid-template-columns: 1fr;
    max-width: 340px;
    margin-inline: auto;
  }

  .ymk-arrow {
    width: 38px;
    height: 38px;
  }

  .ymk-head__desc {
    font-size: 13.5px;
  }

  .ymk-head__watermark {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ymk-head__watermark,
  .ymk-head__kicker,
  .ymk-head__kicker i,
  .ymk-head__title-line,
  .ymk-head__title-line--gold,
  .ymk-head__dot,
  .ymk-head__desc,
  .ymk-card,
  .ymk-card::before,
  .ymk-card__badge,
  .ymk-card__img--base,
  .ymk-card__img--hover,
  .ymk-card__shine,
  .ymk-card__action,
  .ymk-card__action i,
  .ymk-card__corner,
  .ymk-card__cat i,
  .ymk-card__price--now,
  .ymk-spark {
    animation: none !important;
    transition: none !important;
  }
  .ymk-spark {
    display: none;
  }
  .ymk-card:hover .ymk-card__img--hover {
    transform: none;
  }
  .ymk-card:hover {
    transform: translateY(-6px);
  }
}
/* ////////////////////////////////////////////////////////////////////////////////// */

:root {
  --clr-primary: #d4a017;
  --clr-primary-dark: #b8860b;
  --clr-dark: #0a0a0a;
  --clr-white: #fff;
  --font-display: 'Segoe UI', 'Arial Narrow', Arial, sans-serif;
  --font-body: 'Segoe UI', Tahoma, Arial, sans-serif;
  --shadow-glow-md: 0 10px 26px rgba(212, 160, 23, .26);
  --radius-card: 14px;
}

* {
  box-sizing: border-box;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 20px;
}


.news-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 96px 0 108px;
  background:
    radial-gradient(900px 420px at 96% 0%, rgba(212,160,23,.10), transparent 55%),
    radial-gradient(760px 400px at 2% 100%, rgba(212,160,23,.09), transparent 55%),
    linear-gradient(180deg, #0c0c0c 0%, #131313 50%, #0a0a0a 100%);
  color: var(--clr-white);
}

.news-section__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}

.news-section__glow--a {
  top: -120px;
  right: -100px;
  width: 340px;
  height: 340px;
  background: rgba(212,160,23,.2);
}

.news-section__glow--b {
  bottom: -140px;
  left: -110px;
  width: 380px;
  height: 380px;
  background: rgba(212,160,23,.14);
}

.news-section__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .05;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(212,160,23,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,160,23,.5) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 40%, transparent 90%);
}

.news-spark {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--clr-primary);
  box-shadow: 0 0 8px 2px rgba(212,160,23,.7);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  animation: newsSparkFloat linear infinite;
}

.news-spark--1 { top: 18%; left: 5%;  animation-duration: 10s; animation-delay: 0s; }
.news-spark--2 { top: 72%; left: 10%; animation-duration: 12s; animation-delay: 1.8s; }
.news-spark--3 { top: 25%; left: 94%; animation-duration: 11s; animation-delay: .7s; }
.news-spark--4 { top: 78%; left: 90%; animation-duration: 13s; animation-delay: 2.6s; }

@keyframes newsSparkFloat {
  0%   { opacity: 0; transform: translateY(0) scale(.6); }
  15%  { opacity: .9; }
  50%  { transform: translateY(-46px) scale(1.15); }
  85%  { opacity: .7; }
  100% { opacity: 0; transform: translateY(-90px) scale(.5); }
}

.news-section__inner {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------
   HEADER — watermark + icon kicker + two-line gold title
   --------------------------------------------------------- */
.news-head {
  position: relative;
  max-width: 680px;
  margin: 0 auto 56px;
  text-align: center;
}

/* slow-breathing spotlight behind the title for depth */
.news-head::before {
  content: '';
  position: absolute;
  top: 38%;
  left: 50%;
  width: 420px;
  height: 220px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(212,160,23,.16), transparent 75%);
  filter: blur(10px);
  z-index: -1;
  animation: newsSpotlightBreathe 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes newsSpotlightBreathe {
  0%, 100% { opacity: .6; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}

.news-head__watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -54%);
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: clamp(50px, 9vw, 128px);
  font-weight: 800;
  letter-spacing: 10px;
  color: transparent;
  -webkit-text-stroke: 1px rgba(212,160,23,.14);
  z-index: -1;
  pointer-events: none;
  user-select: none;
  animation: newsWatermarkIn 1.2s ease .1s both;
}

@keyframes newsWatermarkIn {
  from { opacity: 0; letter-spacing: 4px; }
  to   { opacity: 1; letter-spacing: 10px; }
}

.news-head__kicker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 7px 18px;
  border: 1px solid rgba(212,160,23,.45);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--clr-primary);
  background: rgba(212,160,23,.08);
  animation: newsKickerIn .6s cubic-bezier(.2,.8,.2,1) both;
  box-shadow: 0 0 0 0 rgba(212,160,23,.3);
}

/* soft breathing halo behind the kicker pill, like a slow pulse
   on an instrument cluster */
.news-head__kicker {
  animation: newsKickerIn .6s cubic-bezier(.2,.8,.2,1) both,
             newsKickerPulse 3.6s ease-in-out 1s infinite;
}

@keyframes newsKickerPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,160,23,.22); }
  50%      { box-shadow: 0 0 0 7px rgba(212,160,23,0); }
}

/* flanking accent lines either side of the kicker, fading outward */
.news-head__kicker::before,
.news-head__kicker::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 46px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,160,23,.55));
  transform: translateY(-50%);
}

.news-head__kicker::before {
  right: calc(100% + 14px);
}

.news-head__kicker::after {
  left: calc(100% + 14px);
  background: linear-gradient(90deg, rgba(212,160,23,.55), transparent);
}

.news-head__kicker i {
  font-size: 11px;
  animation: newsPaperFloat 3s ease-in-out infinite;
}

@keyframes newsPaperFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-2px) rotate(-6deg); }
}

.news-head__title {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: .5px;
}

.news-head__title-line {
  display: block;
  font-size: clamp(36px, 5.6vw, 62px);
  animation: newsTitleIn .7s cubic-bezier(.2,.8,.2,1) .1s both;
}

.news-head__title-line--gold {
  position: relative;
  margin-top: 2px;
  background: linear-gradient(100deg, var(--clr-primary-dark) 0%, var(--clr-primary) 25%, #fff0c2 50%, var(--clr-primary) 75%, var(--clr-primary-dark) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: newsTitleIn .7s cubic-bezier(.2,.8,.2,1) .22s both, newsGoldSheen 5s linear 1s infinite;
}

.news-head__dot {
  color: var(--clr-primary);
  -webkit-text-fill-color: var(--clr-primary);
  animation: newsDotBlink 1.6s ease-in-out infinite;
}

@keyframes newsGoldSheen {
  to { background-position: -260% 0; }
}

@keyframes newsDotBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .3; }
}

@keyframes newsTitleIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.news-head__desc {
  margin: 22px auto 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: rgba(255,255,255,.62);
  animation: newsTitleIn .7s cubic-bezier(.2,.8,.2,1) .32s both;
}

@keyframes newsKickerIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------
   GRID + CARDS
   --------------------------------------------------------- */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  perspective: 1400px;
  counter-reset: newsIndex;
}

.news-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-card, 14px);
  overflow: hidden;
  background: #141414;
  border: 1px solid rgba(212,160,23,.14);
  box-shadow: 0 18px 36px rgba(0,0,0,.32);
  animation: newsCardRise .7s cubic-bezier(.2,.8,.2,1) both;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .4s ease;
  transform-style: preserve-3d;
  counter-increment: newsIndex;
}

/* idle animated gradient hairline — a faint gold current runs
   along the card edge at rest, brightening on hover, so the grid
   never reads as fully static */
.news-card {
  background-image:
    linear-gradient(#141414, #141414),
    linear-gradient(120deg, rgba(212,160,23,.5), rgba(212,160,23,0) 30%, rgba(212,160,23,0) 70%, rgba(212,160,23,.5));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-size: 100% 100%, 300% 300%;
  animation: newsCardRise .7s cubic-bezier(.2,.8,.2,1) both, newsBorderFlow 9s linear infinite;
}

@keyframes newsBorderFlow {
  to { background-position: 0 0, -300% 0; }
}

/* numbered index badge, top-right — pure CSS counter, no markup needed */
.news-card::before {
  content: counter(newsIndex, decimal-leading-zero);
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(212,160,23,.5);
  background: rgba(10,10,10,.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  color: var(--clr-primary);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), background .3s ease, color .3s ease;
}

.news-card:hover::before {
  transform: rotate(-12deg) scale(1.1);
  background: var(--clr-primary);
  color: var(--clr-dark);
}

.news-card:nth-child(1) { animation-delay: .05s; }
.news-card:nth-child(2) { animation-delay: .18s; }
.news-card:nth-child(3) { animation-delay: .31s; }

@keyframes newsCardRise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

.news-card:hover {
  transform: translateY(-10px) rotateX(2deg);
  box-shadow: 0 30px 54px rgba(0,0,0,.42), 0 0 0 1px rgba(212,160,23,.3), 0 0 34px rgba(212,160,23,.14);
  border-color: rgba(212,160,23,.4);
}

.news-card__corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid var(--clr-primary);
  opacity: 0;
  transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1);
  z-index: 5;
  pointer-events: none;
}

.news-card__corner--tl { top: 10px; left: 10px; border-right: none; border-bottom: none; transform: translate(-8px, -8px); }
.news-card__corner--br { bottom: 10px; right: 10px; border-left: none; border-top: none; transform: translate(8px, 8px); }

.news-card:hover .news-card__corner {
  opacity: .9;
  transform: translate(0, 0);
}

/* ---------------------------------------------------------
   MEDIA — image, category pill, shine sweep, Ken Burns idle
   --------------------------------------------------------- */
.news-card__media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: linear-gradient(135deg, #1c1c1c, #262626);
  box-shadow: inset 0 0 70px rgba(0,0,0,.5);
  transition: box-shadow .5s ease;
}

.news-card:hover .news-card__media {
  box-shadow: inset 0 0 90px rgba(0,0,0,.65);
}

/* camera "focus confirm" flash — a quick soft-white pulse the
   instant you land on the card, like a lens locking focus */
.news-card__media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background: rgba(255,255,255,.55);
  opacity: 0;
  pointer-events: none;
}

.news-card:hover .news-card__media::before {
  animation: newsFocusFlash .5s ease-out;
}

@keyframes newsFocusFlash {
  0%   { opacity: .55; }
  100% { opacity: 0; }
}

.news-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.news-card__img--bg {
  display: none;
}

.news-card__img--fg {
  /* "cover" only ever crops — it can never stretch or distort
     the photo's real proportions. object-position tells it
     which part of the frame to keep centred while cropping. */
  object-fit: cover !important;
  object-position: 50% 42%;
  animation: newsKenBurns 16s ease-in-out infinite alternate;
  transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .6s ease;
  filter: saturate(1.05) contrast(1.03);
}

.news-card:hover .news-card__img--fg {
  animation: none;
  transform: scale(1.04);
  filter: saturate(1.2) contrast(1.08) brightness(.85);
}

@keyframes newsKenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.025); }
}

.news-card__shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.28) 50%, transparent 58%);
  transform: translateX(-130%);
  pointer-events: none;
}

.news-card:hover .news-card__shine {
  animation: newsShineSweep .8s ease .1s;
}

@keyframes newsShineSweep {
  from { transform: translateX(-130%); }
  to   { transform: translateX(130%); }
}

.news-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.6) 100%);
  transition: opacity .4s ease;
}

.news-card:hover .news-card__media::after {
  opacity: .75;
}

.news-card__cat {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(10,10,10,.65);
  border: 1px solid rgba(212,160,23,.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--clr-primary);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  transition: background .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
}

.news-card:hover .news-card__cat {
  background: var(--clr-primary);
  color: var(--clr-dark);
  transform: translateY(-3px);
}

/* ---------------------------------------------------------
   BODY — meta, title, excerpt, read-more link
   --------------------------------------------------------- */
.news-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 26px 26px 28px;
}

.news-card__meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .5px;
  color: rgba(255,255,255,.42);
}

.news-card__title {
  margin: 0 0 14px;
  font-size: 19px;
  line-height: 1.4;
  font-weight: 700;
}

.news-card__title a {
  color: var(--clr-white);
  text-decoration: none;
  background-image: linear-gradient(var(--clr-primary), var(--clr-primary));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size .4s cubic-bezier(.2,.8,.2,1), color .3s ease;
}

.news-card__title a:hover {
  color: var(--clr-primary);
  background-size: 100% 2px;
}

.news-card__excerpt {
  margin: 0 0 22px;
  font-size: 13.5px;
  line-height: 1.85;
  color: rgba(255,255,255,.6);
  flex: 1;
}

/* signature "Read More" link: arrow travels, gap widens, and a
   gold underline draws itself in from the left */
.news-card__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding-bottom: 4px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--clr-primary);
  text-decoration: none;
  transition: gap .35s cubic-bezier(.2,.8,.2,1), color .3s ease;
}

.news-card__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background: var(--clr-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}

.news-card__link i {
  font-size: 11px;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}

.news-card__link:hover {
  gap: 13px;
  color: #fff0c2;
}

.news-card__link:hover::after {
  transform: scaleX(1);
}

.news-card__link:hover i {
  transform: translateX(3px);
}

/* ---------------------------------------------------------
   BOTTOM CTA BUTTON — outline-gold, fills on hover
   --------------------------------------------------------- */
.news-cta {
  display: flex;
  justify-content: center;
  margin-top: 52px;
  animation: newsTitleIn .7s cubic-bezier(.2,.8,.2,1) .4s both;
}

.btn--outline-gold {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 34px;
  border: 1.5px solid var(--clr-primary);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--clr-primary);
  text-decoration: none;
  overflow: hidden;
  z-index: 1;
  transition: color .4s ease, transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
}

.btn--outline-gold::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--clr-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
  z-index: -1;
}

.btn--outline-gold i {
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}

.btn--outline-gold:hover {
  color: var(--clr-dark);
  transform: translateY(-3px);
  box-shadow: var(--shadow-glow-md);
}

.btn--outline-gold:hover::before {
  transform: scaleX(1);
}

.btn--outline-gold:hover i {
  transform: translateX(4px);
}

/* =========================================================
   RESPONSIVE — LATEST NEWS
   ========================================================= */
@media (max-width: 992px) {
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .news-card:nth-child(3) {
    grid-column: span 2;
  }

  .news-card:nth-child(3) .news-card__media {
    aspect-ratio: 16 / 9;
  }

  .news-head__watermark {
    font-size: clamp(40px, 12vw, 80px);
  }
}

@media (max-width: 640px) {
  .news-section {
    padding: 64px 0 72px;
  }

  .news-grid {
    grid-template-columns: 1fr;
  }

  .news-card:nth-child(3) {
    grid-column: span 1;
  }

  .news-card:nth-child(3) .news-card__media {
    aspect-ratio: 3 / 2;
  }

  .news-head__desc {
    font-size: 13.5px;
  }

  .news-head__watermark {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .news-head__watermark,
  .news-head__kicker,
  .news-head__kicker i,
  .news-head__title-line,
  .news-head__title-line--gold,
  .news-head__dot,
  .news-head__desc,
  .news-card,
  .news-card::before,
  .news-card__corner,
  .news-card__img--bg,
  .news-card__img--fg,
  .news-card__shine,
  .news-card__link i,
  .btn--outline-gold i,
  .news-head::before,
  .news-card__media::before,
  .news-spark {
    animation: none !important;
    transition: none !important;
  }
  .news-spark {
    display: none;
  }
  .news-card:hover {
    transform: translateY(-6px);
  }
}
/* ////////////////////////////////////////////////////////////////////////////////////////// */

:root {
  --clr-primary: #d4a017;
  --clr-primary-dark: #b8860b;
  --clr-dark: #0a0a0a;
  --clr-white: #fff;
  --font-display: 'Segoe UI', 'Arial Narrow', Arial, sans-serif;
  --font-body: 'Segoe UI', Tahoma, Arial, sans-serif;
  --shadow-glow-md: 0 10px 26px rgba(212, 160, 23, .26);
}

* {
  box-sizing: border-box;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 20px;
}

.feat-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 84px 0;
  background:
    radial-gradient(800px 380px at 50% 0%, rgba(212,160,23,.08), transparent 60%),
    linear-gradient(180deg, #0a0a0a 0%, #121212 50%, #0a0a0a 100%);
  color: var(--clr-white);
  border-top: 1px solid rgba(212,160,23,.12);
  border-bottom: 1px solid rgba(212,160,23,.12);
}

.feat-section__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

.feat-section__glow--a {
  top: -100px;
  left: 10%;
  width: 300px;
  height: 300px;
  background: rgba(212,160,23,.14);
}

.feat-section__glow--b {
  bottom: -120px;
  right: 8%;
  width: 320px;
  height: 320px;
  background: rgba(212,160,23,.1);
}

.feat-section__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .04;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(212,160,23,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,160,23,.5) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse 80% 100% at 50% 50%, #000 40%, transparent 90%);
}

.feat-section__inner {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------
   HEADER — elevated to match the site's signature treatment:
   ghost watermark, flanking accent lines, animated gold-sheen
   title, and a breathing spotlight glow behind it all.
   --------------------------------------------------------- */
.feat-head {
  position: relative;
  text-align: center;
  margin-bottom: 60px;
}

/* oversized, barely-there brand word behind the heading */
.feat-head::before {
  content: 'LAMBORGHINI';
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: clamp(42px, 8vw, 108px);
  font-weight: 800;
  letter-spacing: 9px;
  color: transparent;
  -webkit-text-stroke: 1px rgba(212,160,23,.13);
  z-index: -2;
  pointer-events: none;
  user-select: none;
  animation: featWatermarkIn 1.2s ease .1s both;
}

/* slow-breathing spotlight glow behind the title */
.feat-head::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 380px;
  height: 200px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(212,160,23,.16), transparent 75%);
  filter: blur(10px);
  z-index: -1;
  pointer-events: none;
  animation: featSpotlightBreathe 5s ease-in-out infinite;
}

@keyframes featWatermarkIn {
  from { opacity: 0; letter-spacing: 3px; }
  to   { opacity: 1; letter-spacing: 9px; }
}

@keyframes featSpotlightBreathe {
  0%, 100% { opacity: .6; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}

.feat-head__kicker {
  position: relative;
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin: 0 auto 18px;
  padding: 7px 18px;
  border: 1px solid rgba(212,160,23,.45);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--clr-primary);
  background: rgba(212,160,23,.08);
  animation: featFadeUp .6s cubic-bezier(.2,.8,.2,1) both,
             featKickerPulse 3.6s ease-in-out 1s infinite;
}

@keyframes featKickerPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,160,23,.22); }
  50%      { box-shadow: 0 0 0 7px rgba(212,160,23,0); }
}

/* flanking accent lines either side of the kicker pill */
.feat-head__kicker::before,
.feat-head__kicker::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,160,23,.55));
  transform: translateY(-50%);
}

.feat-head__kicker::before {
  right: calc(100% + 12px);
}

.feat-head__kicker::after {
  left: calc(100% + 12px);
  background: linear-gradient(90deg, rgba(212,160,23,.55), transparent);
}

.feat-head__kicker i {
  animation: featShieldTilt 3s ease-in-out infinite;
}

@keyframes featShieldTilt {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-10deg); }
}

/* headline: bold white base with an animated gold-sheen sweep
   riding across it, plus a hairline rule that draws itself in */
.feat-head__title {
  position: relative;
  display: block;
  width: fit-content;
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: clamp(30px, 4.2vw, 42px);
  font-weight: 800;
  letter-spacing: .5px;
  padding-bottom: 20px;
  color: var(--clr-white);
  background-image: linear-gradient(100deg,
    #fff 30%, var(--clr-primary) 45%, #fff9e6 50%, var(--clr-primary) 55%, #fff 70%);
  background-size: 260% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: featTitleReveal .8s cubic-bezier(.2,.8,.2,1) .1s both,
             featTitleSheen 4.5s ease-in-out 1.2s infinite;
}

@keyframes featTitleReveal {
  from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes featTitleSheen {
  0%   { background-position: 100% 0; }
  50%  { background-position: 0% 0; }
  100% { background-position: 100% 0; }
}

.feat-head__title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--clr-primary-dark), var(--clr-primary), var(--clr-primary-dark), transparent);
  transform: translateX(-50%);
  animation: featRuleGrow 1s cubic-bezier(.2,.8,.2,1) .5s both;
}

@keyframes featRuleGrow {
  from { width: 0; }
  to   { width: 140px; }
}

/* showroom-floor reflection — a faint, fading mirror of the
   title beneath it, like glossy dealership flooring */
.feat-head__title::before {
  content: 'Why Buy With Us';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  transform: scaleY(-1);
  background-image: inherit;
  background-size: inherit;
  background-position: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: .16;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.6), transparent 65%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.6), transparent 65%);
  pointer-events: none;
  z-index: -1;
}

@keyframes featFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------
   GRID — 4 columns with idle vertical hairline dividers
   --------------------------------------------------------- */
.feat-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  counter-reset: featIndex;
}

/* the "power rail" — a thin gold current running behind the row
   of icons, with a bright pulse of light travelling along it,
   like a live circuit tying every promise together */
.feat-grid::before {
  content: '';
  position: absolute;
  top: 50px;
  left: 6%;
  right: 6%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,160,23,.3) 12%, rgba(212,160,23,.3) 88%, transparent);
  z-index: 0;
}

.feat-grid::after {
  content: '';
  position: absolute;
  top: 47px;
  left: 6%;
  width: 26px;
  height: 7px;
  border-radius: 4px;
  background: linear-gradient(90deg, transparent, var(--clr-primary), transparent);
  filter: blur(1px);
  box-shadow: 0 0 12px 2px rgba(212,160,23,.6);
  z-index: 0;
  animation: featRailPulse 4.5s ease-in-out infinite;
}

@keyframes featRailPulse {
  0%   { left: 6%; opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { left: 88%; opacity: 0; }
}

.feat-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 26px 26px 30px;
  border-radius: 16px;
  counter-increment: featIndex;
  animation: featFadeUp .65s cubic-bezier(.2,.8,.2,1) both;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease;
}

.feat-card:nth-child(1) { animation-delay: .05s; }
.feat-card:nth-child(2) { animation-delay: .15s; }
.feat-card:nth-child(3) { animation-delay: .25s; }
.feat-card:nth-child(4) { animation-delay: .35s; }

/* glass panel background + animated gold-current border, both
   fade in on hover so the row stays clean and light at rest */
.feat-card {
  background-image:
    linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0)),
    linear-gradient(120deg, rgba(212,160,23,0), rgba(212,160,23,0));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 1px solid transparent;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease,
              background-image .5s ease, border-color .5s ease;
}

.feat-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 44px rgba(0,0,0,.38), 0 0 0 1px rgba(212,160,23,.22);
  background-image:
    linear-gradient(rgba(255,255,255,.035), rgba(255,255,255,.035)),
    linear-gradient(120deg, rgba(212,160,23,.55), rgba(212,160,23,0) 35%, rgba(212,160,23,0) 65%, rgba(212,160,23,.55));
}

/* numbered index badge, top-right of each card — pure CSS counter */
.feat-card::before {
  content: counter(featIndex, decimal-leading-zero);
  position: absolute;
  top: 12px;
  right: 14px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .5px;
  color: rgba(212,160,23,.4);
  transition: color .4s ease, transform .4s cubic-bezier(.34,1.56,.64,1);
}

.feat-card:hover::before {
  color: var(--clr-primary);
  transform: scale(1.15);
}

/* faint hairline between columns, fading top & bottom */
.feat-card:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 0;
  bottom: 6px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(212,160,23,.22) 50%, transparent);
}

/* ---------------------------------------------------------
   ICON — muted grey at rest, ignites gold on hover, with a
   spinning conic ring and a pair of radar-ping pulses
   --------------------------------------------------------- */
.feat-card__icon-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin-bottom: 22px;
}

/* two expanding "radar ping" rings, staggered, fired on hover */
.feat-card__icon-wrap::before,
.feat-card__icon-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(212,160,23,.6);
  opacity: 0;
  pointer-events: none;
}

.feat-card:hover .feat-card__icon-wrap::before {
  animation: featRadarPing 1.6s cubic-bezier(.2,.8,.2,1) infinite;
}

.feat-card:hover .feat-card__icon-wrap::after {
  animation: featRadarPing 1.6s cubic-bezier(.2,.8,.2,1) .5s infinite;
}

@keyframes featRadarPing {
  0%   { opacity: .55; transform: scale(.85); }
  100% { opacity: 0; transform: scale(1.6); }
}

.feat-card__icon {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.45);
  font-size: 24px;
  transition: color .4s ease, border-color .4s ease, background .4s ease,
              transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .4s ease;
}

/* diagonal shine that sweeps across the icon medallion on hover */
.feat-card__icon::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);
  transform: translateX(-140%);
}

.feat-card:hover .feat-card__icon::after {
  animation: featIconShine .9s ease .1s;
}

@keyframes featIconShine {
  from { transform: translateX(-140%); }
  to   { transform: translateX(140%); }
}

/* dashed ring, hidden at rest, spins into view on hover —
   like a rev-counter needle sweeping to life */
.feat-card__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px dashed rgba(212,160,23,.55);
  opacity: 0;
  transform: rotate(0deg) scale(.8);
  transition: opacity .4s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}

.feat-card:hover .feat-card__ring {
  opacity: 1;
  transform: rotate(140deg) scale(1);
  animation: featRingSpin 6s linear infinite;
}

@keyframes featRingSpin {
  from { transform: rotate(140deg) scale(1); }
  to   { transform: rotate(500deg) scale(1); }
}

.feat-card:hover .feat-card__icon {
  color: var(--clr-dark);
  border-color: var(--clr-primary);
  background: linear-gradient(145deg, var(--clr-primary), var(--clr-primary-dark));
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 14px 30px rgba(212,160,23,.35), 0 0 0 6px rgba(212,160,23,.08);
}

/* subtle idle float so the row never feels fully static */
.feat-card__icon-wrap {
  animation: featIconFloat 4.5s ease-in-out infinite;
}

.feat-card:nth-child(2) .feat-card__icon-wrap { animation-delay: .4s; }
.feat-card:nth-child(3) .feat-card__icon-wrap { animation-delay: .8s; }
.feat-card:nth-child(4) .feat-card__icon-wrap { animation-delay: 1.2s; }

@keyframes featIconFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* ---------------------------------------------------------
   TEXT
   --------------------------------------------------------- */
.feat-card__title {
  position: relative;
  display: inline-block;
  margin: 0 0 10px;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--clr-white);
  transition: color .3s ease;
}

.feat-card__title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: var(--clr-primary);
  transform: translateX(-50%);
  transition: width .4s cubic-bezier(.2,.8,.2,1);
}

.feat-card:hover .feat-card__title {
  color: var(--clr-primary);
}

.feat-card:hover .feat-card__title::after {
  width: 34px;
}

.feat-card__desc {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.75;
  color: rgba(255,255,255,.5);
  max-width: 240px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 992px) {
  .feat-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 44px;
  }

  .feat-grid::before,
  .feat-grid::after {
    display: none;
  }

  .feat-card:nth-child(2)::after {
    display: none;
  }

  .feat-card:nth-child(1)::after,
  .feat-card:nth-child(3)::after {
    display: none;
  }

  /* horizontal divider between rows instead of vertical between columns */
  .feat-card:nth-child(1),
  .feat-card:nth-child(2) {
    padding-bottom: 32px;
  }

  .feat-card:nth-child(1)::before,
  .feat-card:nth-child(2)::before {
    content: '';
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212,160,23,.22) 50%, transparent);
  }
}

@media (max-width: 640px) {
  .feat-section {
    padding: 56px 0;
  }

  .feat-grid {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }

  .feat-card::after,
  .feat-card::before {
    display: none;
  }

  .feat-card:not(:last-child) {
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(212,160,23,.14);
  }

  .feat-card__desc {
    max-width: 300px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feat-head::before,
  .feat-head::after,
  .feat-head__kicker,
  .feat-head__kicker::before,
  .feat-head__kicker::after,
  .feat-head__kicker i,
  .feat-head__title,
  .feat-head__title::before,
  .feat-head__title::after,
  .feat-card,
  .feat-card::before,
  .feat-grid::before,
  .feat-grid::after,
  .feat-card__icon-wrap,
  .feat-card__icon-wrap::before,
  .feat-card__icon-wrap::after,
  .feat-card__icon,
  .feat-card__icon::after,
  .feat-card__ring,
  .feat-card__title::after {
    animation: none !important;
    transition: none !important;
  }
  .feat-grid::after {
    display: none;
  }
}
/* ///////////////////////////////////////////////////////////////////////////////////////////////////// */

.auth-section {
  /* ---- brand colors (inherited from the site, with a fallback) ---- */
  --a-primary:      var(--clr-primary, #d4a017);
  --a-primary-dark: var(--clr-primary-dark, #b8860b);
  --a-primary-soft: var(--clr-primary-soft, rgba(212, 160, 23, .12));
  --a-dark:         var(--clr-dark, #0a0a0a);
  --a-text:         var(--clr-text, #1a1a1a);
  --a-muted:        var(--clr-muted, #6b6b6b);
  --a-white:        var(--clr-white, #ffffff);
  --a-font-display: var(--font-display, 'Segoe UI', Tahoma, Arial, sans-serif);
  --a-font-body:    var(--font-body, 'Segoe UI', Tahoma, Arial, sans-serif);
  --a-glow-md:      var(--shadow-glow-md, 0 10px 26px rgba(212, 160, 23, .26));

  
  --navy-deep:  #060403;
  --navy:       #15100b;
  --navy-light: #241a10;

  
  --card-1: #331616;
  --card-2: #421c1a;
  --card-3: #200d0d;
  --card-border: rgba(224, 172, 62, .45);

  /* ---- dark neumorphism tokens for inputs (wine-tinted to
     match the oxblood card) ---- */
  --input-bg:      #260f0f;
  --input-dark:    #130606;
  --input-light:   #402020;
  --cream:         #f4ecd9;
  --muted-onDark:  rgba(244, 236, 217, .5);

  position: relative;
  overflow: hidden;
  padding: clamp(64px, 8vw, 104px) 0 clamp(70px, 9vw, 112px);
  background:
    radial-gradient(760px 480px at 6% -6%, rgba(212, 160, 23, .19), transparent 58%),
    radial-gradient(680px 460px at 100% 108%, rgba(212, 160, 23, .11), transparent 60%),
    radial-gradient(900px 600px at 50% 30%, rgba(212, 160, 23, .05), transparent 65%),
    linear-gradient(155deg, var(--navy-deep) 0%, var(--navy) 55%, var(--navy-light) 100%);
  font-family: var(--a-font-body);
  direction: ltr;
  text-align: left;
}

/* faint technical grid behind the whole section, slowly panning */
.auth-section::before {
  content: '';
  position: absolute;
  inset: -20% -10%;
  background-image:
    linear-gradient(rgba(212, 160, 23, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 160, 23, .05) 1px, transparent 1px);
  background-size: 46px 46px;
  animation: authGridPan 24s linear infinite;
  pointer-events: none;
  z-index: 0;
}

.auth-section * {
  box-sizing: border-box;
}

.auth-section .container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- soft gold glow in the background ---------- */
.auth-section__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  opacity: .7;
  pointer-events: none;
  z-index: 0;
}

.auth-section__glow--a {
  width: 340px;
  height: 340px;
  top: -100px;
  left: -80px;
  background: radial-gradient(circle, rgba(212, 160, 23, .28), transparent 70%);
  animation: authFloat 12s ease-in-out infinite;
}

.auth-section__glow--b {
  width: 320px;
  height: 320px;
  bottom: -110px;
  right: -70px;
  background: radial-gradient(circle, rgba(212, 160, 23, .2), transparent 70%);
  animation: authFloat 14s ease-in-out infinite reverse;
}

@keyframes authFloat {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(14px, -10px); }
}

.auth-section__inner {
  position: relative;
  z-index: 1;
}


.auth-head {
  position: relative;
  max-width: 640px;
  margin: 0 auto clamp(30px, 4vw, 44px);
  text-align: center;
}

.auth-head::before {
  content: 'ACCESS';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--a-font-display);
  font-size: clamp(60px, 11vw, 150px);
  font-weight: 800;
  letter-spacing: 4px;
  color: transparent;
  -webkit-text-stroke: 1px rgba(212, 160, 23, .16);
  white-space: nowrap;
  pointer-events: none;
  z-index: -1;
}

.auth-head__kicker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 7px 16px;
  border: 1px solid rgba(212, 160, 23, .45);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--a-primary);
  background: rgba(212, 160, 23, .08);
  box-shadow: 0 0 0 rgba(212, 160, 23, 0);
  animation: authKickerGlow 3s ease-in-out infinite;
  transition: transform .25s ease, background .25s ease;
}

.auth-head__kicker:hover {
  transform: translateY(-2px);
  background: rgba(212, 160, 23, .16);
}

@keyframes authKickerGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(212, 160, 23, 0); }
  50%      { box-shadow: 0 0 16px rgba(212, 160, 23, .35); }
}

.auth-head__kicker::before,
.auth-head__kicker::after {
  content: '';
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 160, 23, .6));
}

.auth-head__kicker::after {
  transform: scaleX(-1);
}

.auth-head__kicker i {
  font-size: 11px;
  animation: authKeyPulse 2.8s ease-in-out infinite;
}

@keyframes authKeyPulse {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-18deg); }
}

.auth-head__title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--a-font-display);
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 800;
  line-height: 1.25;
  color: var(--a-white);
  margin: 0 0 clamp(12px, 1.8vw, 18px);
  padding-bottom: 18px;
  text-shadow: 0 0 30px rgba(212, 160, 23, .18);
}

.auth-head__gem {
  font-size: .5em;
  color: var(--a-primary);
  opacity: .85;
  animation: authGemSpin 6s linear infinite;
}

@keyframes authGemSpin {
  0%, 92%, 100% { transform: rotate(0deg) scale(1); }
  96%           { transform: rotate(180deg) scale(1.15); }
}

.auth-head__title-accent {
  background: linear-gradient(90deg, var(--a-primary), #f4d27a, var(--a-primary-dark));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.auth-head__title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 3px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--a-primary-dark), var(--a-primary));
  animation: authUnderlineDraw 1s cubic-bezier(.2, .8, .2, 1) .3s forwards;
}

@keyframes authUnderlineDraw {
  to { width: 68px; }
}

.auth-head__desc {
  font-size: clamp(13.5px, 1.4vw, 15.5px);
  line-height: 1.9;
  color: rgba(255, 255, 255, .62);
  margin-bottom: 16px;
}

/* trust row: star rating + owner count, extra icon detail
   under the description */
.auth-head__trust {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(212, 160, 23, .2);
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

.auth-head__trust:hover {
  transform: translateY(-2px);
  border-color: rgba(212, 160, 23, .5);
  background: rgba(212, 160, 23, .07);
}

.auth-head__stars {
  display: inline-flex;
  gap: 2px;
  color: var(--a-primary);
  font-size: 11px;
}

.auth-head__stars i:nth-child(1) { animation: authStarTwinkle 2.4s ease-in-out infinite; }
.auth-head__stars i:nth-child(2) { animation: authStarTwinkle 2.4s ease-in-out .15s infinite; }
.auth-head__stars i:nth-child(3) { animation: authStarTwinkle 2.4s ease-in-out .3s infinite; }
.auth-head__stars i:nth-child(4) { animation: authStarTwinkle 2.4s ease-in-out .45s infinite; }
.auth-head__stars i:nth-child(5) { animation: authStarTwinkle 2.4s ease-in-out .6s infinite; }

@keyframes authStarTwinkle {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

.auth-head__trust span {
  font-size: 11.5px;
  letter-spacing: .3px;
  color: rgba(255, 255, 255, .7);
}

.auth-head__trust strong {
  color: var(--a-primary);
  font-weight: 700;
}

/* the checkbox itself is never visible — only its :checked
   state drives everything, via the general sibling combinator */
.auth-swap-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* =========================================================
   STAGE — the element responsible for the card looking
   "exactly the same, animation included" at every screen
   size, just scaled down (instead of switching to a
   different layout on mobile).
   ========================================================= */
.auth-stage {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
  height: 540px;
}

/* ---------- card shell — deep plum-navy, distinct from the
   section's cooler navy, wrapped in a resting gold ring ---------- */
.auth-card {
  position: relative;
  flex-shrink: 0;
  z-index: 1;
  width: 1040px;
  height: 540px;
  border-radius: 26px;
  overflow: hidden;
  background:
    radial-gradient(130% 130% at 100% 0%, rgba(224, 172, 62, .12), transparent 55%),
    radial-gradient(120% 120% at 0% 100%, rgba(224, 172, 62, .07), transparent 55%),
    radial-gradient(90% 70% at 50% 50%, rgba(120, 30, 30, .18), transparent 70%),
    linear-gradient(135deg, var(--card-2) 0%, var(--card-1) 52%, var(--card-3) 100%);
  border: 1px solid var(--card-border);
  box-shadow:
    0 30px 60px rgba(0, 0, 0, .45),
    0 0 0 1px rgba(212, 160, 23, .12);
  transform: scale(1);
  transform-origin: top center;
  transition: transform .45s cubic-bezier(.25, .9, .35, 1);
  animation: authCardGlow 4s ease-in-out infinite;
}

@keyframes authCardGlow {
  0%, 100% { box-shadow: 0 30px 60px rgba(0, 0, 0, .5), 0 0 0 1px rgba(224, 172, 62, .18); }
  50%      { box-shadow: 0 30px 60px rgba(0, 0, 0, .5), 0 0 0 1px rgba(224, 172, 62, .46), 0 0 46px rgba(180, 90, 40, .24); }
}

/* gold corner brackets framing the card — a tech-luxury
   accent that echoes the gold ring line already used on the
   circular feature badges elsewhere on the site */
.auth-card__corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 2px solid var(--a-primary);
  opacity: .55;
  z-index: 26;
  pointer-events: none;
  transition: opacity .3s ease, width .3s ease, height .3s ease;
}

.auth-card:hover .auth-card__corner {
  opacity: .9;
  width: 32px;
  height: 32px;
}

.auth-card__corner--tl { top: 14px; left: 14px; border-right: none; border-bottom: none; border-radius: 6px 0 0 0; }
.auth-card__corner--tr { top: 14px; right: 14px; border-left: none; border-bottom: none; border-radius: 0 6px 0 0; }
.auth-card__corner--bl { bottom: 14px; left: 14px; border-right: none; border-top: none; border-radius: 0 0 0 6px; }
.auth-card__corner--br { bottom: 14px; right: 14px; border-left: none; border-top: none; border-radius: 0 0 6px 0; }

/* large, very faint watermark icon sitting low behind the
   center seam — pure decoration, echoes the car theme */
.auth-card__watermark {
  position: absolute;
  bottom: -46px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 210px;
  color: transparent;
  -webkit-text-stroke: 1px rgba(212, 160, 23, .09);
  z-index: 0;
  pointer-events: none;
  transition: -webkit-text-stroke-color .4s ease, transform .4s ease;
}

.auth-card:hover .auth-card__watermark {
  -webkit-text-stroke: 1px rgba(212, 160, 23, .17);
  transform: translateX(-50%) translateY(-4px);
}

/* thin diagonal sheen slowly sweeping across the whole card —
   ambient, restrained, reinforces the "polished metal" feel */
.auth-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .05) 48%, transparent 66%);
  background-size: 260% 260%;
  animation: authCardSheen 9s ease-in-out infinite;
  pointer-events: none;
  z-index: 25;
}

@keyframes authCardSheen {
  0%   { background-position: 120% -20%; }
  50%  { background-position: -20% 120%; }
  100% { background-position: 120% -20%; }
}

/* small lock emblem marking the center seam between panels */
.auth-card::after {
  content: '\f023'; /* fa-lock */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 12px;
  color: var(--a-dark);
  background: linear-gradient(145deg, #f4d27a, var(--a-primary-dark));
  box-shadow:
    0 6px 14px rgba(0, 0, 0, .4),
    0 0 0 4px rgba(212, 160, 23, .14);
  z-index: 30;
  pointer-events: none;
}

/* ---------- form panels ---------- */
.auth-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  will-change: transform, opacity;
  transition: transform .78s cubic-bezier(.34, 1.15, .28, 1), opacity .5s ease, z-index 0s .78s;
  z-index: 2;
}

.auth-form {
  width: 100%;
  padding: clamp(24px, 4.2vw, 42px) clamp(24px, 5vw, 54px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.auth-form__title {
  font-family: var(--a-font-display);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 800;
  margin-bottom: 4px;
  background: linear-gradient(100deg, var(--cream) 30%, var(--a-primary) 45%, #f4d27a 50%, var(--cream) 65%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: authTitleShimmer 5s ease-in-out infinite;
}

@keyframes authTitleShimmer {
  0%, 100% { background-position: 100% 0; }
  50%      { background-position: 0 0; }
}

.auth-form__sub {
  font-size: 12px;
  color: var(--muted-onDark);
  margin-bottom: 14px;
}

.auth-social {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  perspective: 400px;
}

.auth-social__btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--input-light), var(--input-bg));
  color: var(--cream);
  font-size: 13px;
  box-shadow:
    4px 4px 9px var(--input-dark),
    -4px -4px 9px var(--input-light),
    0 0 0 1px rgba(212, 160, 23, .12);
  transition: color .25s ease, box-shadow .25s ease, transform .3s ease;
}

.auth-social__btn:hover {
  color: var(--a-dark);
  background: linear-gradient(150deg, #f4d27a, var(--a-primary-dark));
  transform: translateY(-3px) rotateX(12deg) rotateY(-8deg);
  box-shadow:
    0 10px 18px rgba(212, 160, 23, .3),
    0 0 0 1px rgba(212, 160, 23, .4);
}

.auth-form__divider {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--muted-onDark);
  margin-bottom: 16px;
  width: 100%;
  max-width: 320px;
}

.auth-form__divider i {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 9px;
  color: var(--a-primary);
  background: rgba(212, 160, 23, .1);
  flex-shrink: 0;
  transition: transform .3s cubic-bezier(.34, 1.15, .28, 1), background .25s ease;
}

.auth-form__divider:hover i {
  transform: rotate(18deg) scale(1.12);
  background: rgba(212, 160, 23, .22);
}

.auth-form__divider::before,
.auth-form__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 160, 23, .35), transparent);
}

/* ---------- fields: floating label + icon badge + validity
   check + password toggle — dark neumorphism ---------- */
.auth-field {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin-bottom: 13px;
  transition: transform .3s ease;
}

.auth-field:focus-within {
  transform: translateY(-2px);
}

.auth-field__icon {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 11px;
  color: var(--a-primary);
  background: rgba(212, 160, 23, .1);
  border: 1px solid rgba(212, 160, 23, .3);
  transition: color .25s ease, background .25s ease, box-shadow .25s ease, transform .3s cubic-bezier(.34, 1.15, .28, 1), border-color .25s ease;
  z-index: 2;
}

/* pulsing focus ring around the icon badge, pure CSS */
.auth-field:hover .auth-field__icon,
.auth-field:focus-within .auth-field__icon {
  color: var(--a-dark);
  background: linear-gradient(150deg, #f4d27a, var(--a-primary-dark));
  border-color: transparent;
  transform: translateY(-50%) rotate(-8deg) scale(1.08);
}

.auth-field:focus-within .auth-field__icon {
  animation: authIconRing 1.6s ease-out infinite;
}

@keyframes authIconRing {
  0%   { box-shadow: 0 0 0 0 rgba(212, 160, 23, .45); }
  70%  { box-shadow: 0 0 0 7px rgba(212, 160, 23, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 160, 23, 0); }
}

.auth-field input {
  position: relative;
  width: 100%;
  padding: 21px 38px 7px 46px;
  border: none;
  border-radius: 12px;
  background: var(--input-bg);
  font: inherit;
  font-size: 13.5px;
  color: var(--cream);
  text-align: left;
  box-shadow:
    inset 4px 4px 8px var(--input-dark),
    inset -4px -4px 8px var(--input-light);
  transition: box-shadow .3s ease, background .3s ease;
  z-index: 1;
}

.auth-field:hover input {
  background: var(--input-light);
  box-shadow:
    inset 4px 4px 8px var(--input-dark),
    inset -4px -4px 8px var(--input-light),
    0 0 0 1px rgba(212, 160, 23, .18);
}

.auth-field--password input {
  padding-right: 64px;
}

.auth-field input::placeholder {
  color: transparent;
}

.auth-field input:focus {
  outline: none;
  box-shadow:
    inset 4px 4px 8px var(--input-dark),
    inset -4px -4px 8px var(--input-light),
    0 0 0 2px rgba(212, 160, 23, .45);
}

/* floating label */
.auth-field label {
  position: absolute;
  left: 46px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--muted-onDark);
  pointer-events: none;
  transition: top .25s cubic-bezier(.2, .8, .2, 1), font-size .25s ease, color .25s ease, transform .25s ease;
  z-index: 2;
}

.auth-field:hover label {
  color: rgba(244, 236, 217, .75);
}

.auth-field input:focus + label,
.auth-field input:not(:placeholder-shown) + label {
  top: 12px;
  font-size: 9.5px;
  letter-spacing: .4px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--a-primary);
  transform: translateY(0);
}

/* thin animated underline that draws in on focus */
.auth-field::after {
  content: '';
  position: absolute;
  left: 46px;
  right: 16px;
  bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--a-primary-dark), var(--a-primary), #f4d27a);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
  z-index: 2;
  pointer-events: none;
}

.auth-field:focus-within::after {
  transform: scaleX(1);
}

/* validity checkmark */
.auth-field__check {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%) scale(.4);
  font-size: 13px;
  color: #6fd08a;
  opacity: 0;
  transition: opacity .25s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
  pointer-events: none;
  z-index: 2;
}

.auth-field input:not(:placeholder-shown):valid ~ .auth-field__check {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.auth-field--password .auth-field__check {
  right: 42px;
}

/* decorative show/hide glyph on password fields */
.auth-field__toggle {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  font-size: 12px;
  color: var(--muted-onDark);
  cursor: pointer;
  transition: color .25s ease, transform .25s ease;
  z-index: 2;
}

.auth-field__toggle:hover {
  color: var(--a-primary);
  transform: translateY(-50%) scale(1.15);
}

.auth-form__forgot {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 16px;
  margin-right: calc(50% - 160px);
  font-size: 12px;
  color: var(--muted-onDark);
  transition: color .25s ease, gap .25s ease;
}

.auth-form__forgot i {
  font-size: 10px;
  color: var(--a-primary);
}

.auth-form__forgot:hover {
  color: var(--a-primary);
  gap: 9px;
}

/* ---------- buttons ---------- */
.auth-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 160px;
  padding: 12px 28px;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--a-primary), #f4d27a, var(--a-primary-dark));
  color: var(--a-dark);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .5px;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color .3s ease, transform .3s ease, box-shadow .3s ease, gap .3s ease;
}

.auth-btn > span,
.auth-btn > i {
  position: relative;
  z-index: 2;
}

.auth-btn__arrow {
  font-size: 11px;
  transform: translateX(-4px);
  opacity: .7;
  transition: transform .3s cubic-bezier(.34, 1.15, .28, 1), opacity .3s ease;
}

.auth-btn:hover .auth-btn__arrow {
  transform: translateX(3px);
  opacity: 1;
}

/* shimmer sweep across the button on hover */
.auth-btn::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg) translateX(0);
  transition: transform .6s ease;
  z-index: 1;
  pointer-events: none;
}

.auth-btn:hover::before {
  transform: skewX(-20deg) translateX(340%);
}

/* dark fill that crossfades in on hover — the button doesn't
   just glow, it visibly swaps from gold-filled to dark-filled
   with gold text, then back on mouse-out */
.auth-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, #1c1010, var(--a-dark));
  opacity: 0;
  transition: opacity .35s ease;
  z-index: 0;
  pointer-events: none;
}

.auth-btn:hover::after {
  opacity: 1;
}

.auth-btn:hover {
  color: var(--a-primary);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(212, 160, 23, .38);
}

.auth-btn:active {
  transform: translateY(0) scale(.97);
  box-shadow: 0 4px 12px rgba(212, 160, 23, .3);
}

.auth-btn--ghost {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, .5);
  color: var(--a-white);
}

.auth-btn--ghost::after {
  content: none;
}

.auth-btn--ghost:hover {
  border-color: transparent;
  color: var(--a-dark);
  background: linear-gradient(120deg, var(--a-primary), #f4d27a, var(--a-primary-dark));
}

/* small trust line under the submit button */
.auth-form__secure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 10.5px;
  color: var(--muted-onDark);
}

.auth-form__secure i {
  color: var(--a-primary);
  font-size: 10px;
}

/* mini trust-badge row: three ringed circle icons, same
   visual language as the site's "White-Glove / Secure Payment
   / Warranty" badges, scaled down for the card footer */
.auth-form__badges {
  display: flex;
  gap: 18px;
  margin-top: 16px;
}

.auth-form__badges span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.auth-form__badges i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid rgba(212, 160, 23, .4);
  color: var(--a-primary);
  font-size: 11px;
  background: rgba(212, 160, 23, .06);
  animation: authBadgeFloat 3.2s ease-in-out infinite;
  transition: transform .3s cubic-bezier(.34, 1.15, .28, 1), background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

@keyframes authBadgeFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

.auth-form__badges span:nth-child(1) i { animation-delay: 0s; }
.auth-form__badges span:nth-child(2) i { animation-delay: .3s; }
.auth-form__badges span:nth-child(3) i { animation-delay: .6s; }

.auth-form__badges small {
  font-size: 8.5px;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--muted-onDark);
}

.auth-form__badges span:hover i {
  animation-play-state: paused;
  transform: translateY(-3px) scale(1.08);
  background: linear-gradient(150deg, #f4d27a, var(--a-primary-dark));
  color: var(--a-dark);
  border-color: transparent;
  box-shadow: 0 8px 16px rgba(212, 160, 23, .3);
}

/* ---------- sliding decorative overlay ---------- */
.auth-overlay-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  will-change: transform;
  transition: transform .78s cubic-bezier(.34, 1.15, .28, 1);
  z-index: 10;
}

.auth-overlay {
  position: relative;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(600px 340px at 15% 10%, rgba(212, 160, 23, .1), transparent 60%),
    linear-gradient(155deg, var(--navy-deep) 0%, var(--navy) 55%, var(--navy-light) 100%);
  color: var(--a-white);
  overflow: hidden;
}

.auth-overlay__grid {
  position: absolute;
  inset: -20% -10%;
  background-image:
    linear-gradient(rgba(212, 160, 23, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 160, 23, .05) 1px, transparent 1px);
  background-size: 46px 46px;
  animation: authGridPan 22s linear infinite;
  pointer-events: none;
}

@keyframes authGridPan {
  to { background-position: 46px 46px, 46px 46px; }
}

.auth-overlay::before,
.auth-overlay::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(212, 160, 23, .18);
  pointer-events: none;
}

.auth-overlay::before {
  width: 340px;
  height: 340px;
  top: -140px;
  right: 12%;
  background: radial-gradient(circle at 30% 30%, rgba(212, 160, 23, .12), transparent 70%);
}

.auth-overlay::after {
  width: 280px;
  height: 280px;
  bottom: -120px;
  left: 14%;
  background: radial-gradient(circle at 70% 70%, rgba(212, 160, 23, .1), transparent 70%);
}

/* floating gold sparks drifting inside the overlay */
.auth-overlay__spark {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--a-primary);
  box-shadow: 0 0 8px 2px rgba(212, 160, 23, .6);
  opacity: 0;
  animation: authSparkDrift 6s ease-in infinite;
  pointer-events: none;
}

.auth-overlay__spark:nth-child(2) { left: 20%; bottom: 10%; animation-delay: 0s; }
.auth-overlay__spark:nth-child(3) { left: 55%; bottom: 18%; animation-delay: 1.6s; }
.auth-overlay__spark:nth-child(4) { left: 75%; bottom: 6%;  animation-delay: 3.1s; }
.auth-overlay__spark:nth-child(5) { left: 38%; bottom: 26%; animation-delay: 4.4s; }

@keyframes authSparkDrift {
  0%   { transform: translateY(0) scale(.6); opacity: 0; }
  15%  { opacity: .9; }
  85%  { opacity: .3; }
  100% { transform: translateY(-180px) scale(1.1); opacity: 0; }
}

.auth-overlay__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 clamp(28px, 4vw, 44px);
  transition: opacity .45s ease .2s, transform .45s cubic-bezier(.34, 1.15, .28, 1) .2s;
}

.auth-overlay__panel--a {
  opacity: 1;
  transform: translateX(0);
}

.auth-overlay__panel--b {
  opacity: 0;
  transform: translateX(16px);
  pointer-events: none;
}

.auth-overlay__icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-bottom: 14px;
  border-radius: 50%;
  font-size: 18px;
  color: var(--a-primary);
  background: rgba(212, 160, 23, .12);
  box-shadow: 0 0 0 1px rgba(212, 160, 23, .3), 0 0 22px rgba(212, 160, 23, .2);
  animation: authIconBreathe 3.4s ease-in-out .6s infinite;
}

@keyframes authIconBreathe {
  0%, 100% { box-shadow: 0 0 0 1px rgba(212, 160, 23, .3), 0 0 22px rgba(212, 160, 23, .2); }
  50%      { box-shadow: 0 0 0 1px rgba(212, 160, 23, .5), 0 0 30px rgba(212, 160, 23, .35); }
}

@keyframes authIconPop {
  0%   { transform: scale(.5) rotate(-12deg); opacity: 0; }
  60%  { transform: scale(1.12) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

.auth-overlay__title {
  font-family: var(--a-font-display);
  font-size: clamp(18px, 2vw, 23px);
  font-weight: 800;
  margin-bottom: 8px;
}

.auth-overlay__text {
  font-size: 12.5px;
  line-height: 1.75;
  color: rgba(255, 255, 255, .68);
  max-width: 270px;
  margin-bottom: 14px;
}

.auth-overlay__features {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.auth-overlay__features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, .82);
  transition: transform .25s ease, color .25s ease;
}

.auth-overlay__features li:hover {
  transform: translateX(4px);
  color: var(--a-primary);
}

.auth-overlay__features i {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 9px;
  color: var(--a-dark);
  background: var(--a-primary);
  flex-shrink: 0;
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}

.auth-overlay__features li:hover i {
  transform: scale(1.2) rotate(8deg);
}

/* =========================================================
   Default state (unchecked): the "Sign Up" form is visible,
   overlay covers the sign-in side.
   ========================================================= */
.auth-panel--signin {
  transform: translateX(0);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}

.auth-panel--signup {
  transform: translateX(100%);
  opacity: 1;
  z-index: 5;
}

.auth-overlay-container {
  transform: translateX(0);
}

.auth-panel--signup .auth-field--1 { animation: authFieldRise .5s cubic-bezier(.2, .8, .2, 1) .15s both; }
.auth-panel--signup .auth-field--2 { animation: authFieldRise .5s cubic-bezier(.2, .8, .2, 1) .22s both; }
.auth-panel--signup .auth-field--3 { animation: authFieldRise .5s cubic-bezier(.2, .8, .2, 1) .29s both; }

.auth-overlay__panel--a .auth-overlay__icon {
  animation: authIconPop .5s cubic-bezier(.34, 1.56, .64, 1) .2s both, authIconBreathe 3.4s ease-in-out .7s infinite;
}

@keyframes authFieldRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   Checked state: the "Sign In" form becomes visible, overlay
   slides across to cover the sign-up side. Driven purely by
   :checked — no JavaScript.
   ========================================================= */
.auth-swap-checkbox:checked ~ .auth-stage .auth-panel--signin {
  transform: translateX(0);
  opacity: 1;
  z-index: 5;
  pointer-events: auto;
}

.auth-swap-checkbox:checked ~ .auth-stage .auth-panel--signup {
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}

.auth-swap-checkbox:checked ~ .auth-stage .auth-panel--signin .auth-field--1 {
  animation: authFieldRise .5s cubic-bezier(.2, .8, .2, 1) .15s both;
}
.auth-swap-checkbox:checked ~ .auth-stage .auth-panel--signin .auth-field--2 {
  animation: authFieldRise .5s cubic-bezier(.2, .8, .2, 1) .22s both;
}

.auth-swap-checkbox:checked ~ .auth-stage .auth-overlay-container {
  transform: translateX(100%);
}

.auth-swap-checkbox:checked ~ .auth-stage .auth-overlay__panel--a {
  opacity: 0;
  transform: translateX(-16px);
  pointer-events: none;
}

.auth-swap-checkbox:checked ~ .auth-stage .auth-overlay__panel--b {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.auth-swap-checkbox:checked ~ .auth-stage .auth-overlay__panel--a .auth-overlay__icon {
  animation: none;
}

.auth-swap-checkbox:checked ~ .auth-stage .auth-overlay__panel--b .auth-overlay__icon {
  animation: authIconPop .5s cubic-bezier(.34, 1.56, .64, 1) .2s both, authIconBreathe 3.4s ease-in-out .7s infinite;
}

/* =========================================================
   RESPONSIVE via the "uniform scale" technique: the exact
   same card, layout and animation, just smaller — instead of
   switching to a different design on small screens.
   Recomputed for the new 1040×540 card (ratio ≈ .519) so the
   stage height always matches 540px × the scale exactly.
   ========================================================= */
@media (max-width: 1080px) {
  .auth-card  { transform: scale(.92); }
  .auth-stage { height: 497px; }
}

@media (max-width: 920px) {
  .auth-card  { transform: scale(.78); }
  .auth-stage { height: 421px; }
}

@media (max-width: 760px) {
  .auth-card  { transform: scale(.64); }
  .auth-stage { height: 346px; }
}

@media (max-width: 600px) {
  .auth-card  { transform: scale(.52); }
  .auth-stage { height: 281px; }
}

@media (max-width: 490px) {
  .auth-card  { transform: scale(.44); }
  .auth-stage { height: 238px; }
}

@media (max-width: 410px) {
  .auth-card  { transform: scale(.38); }
  .auth-stage { height: 205px; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-section::before,
  .auth-section__glow--a,
  .auth-section__glow--b,
  .auth-head__kicker,
  .auth-head__kicker i,
  .auth-head__gem,
  .auth-head__stars i,
  .auth-head__title::after,
  .auth-card,
  .auth-card::before,
  .auth-form__title,
  .auth-form__badges i,
  .auth-overlay__grid,
  .auth-overlay__spark,
  .auth-overlay__icon,
  .auth-field {
    animation: none !important;
  }

  .auth-head__title::after {
    width: 68px;
  }

  .auth-field {
    opacity: 1;
    transform: none;
  }

  .auth-panel,
  .auth-overlay-container,
  .auth-overlay__panel,
  .auth-btn__arrow,
  .auth-btn::before,
  .auth-field__icon,
  .auth-field label,
  .auth-field::after,
  .auth-field__check,
  .auth-social__btn,
  .auth-overlay__features li,
  .auth-overlay__features i {
    transition-duration: .01ms !important;
  }
}
/* /////////////////////////////////////////////////////////// */

:root {
  --clr-primary: #d4a017;
  --clr-primary-dark: #b8860b;
  --clr-dark: #0a0a0a;
  --clr-white: #fff;
  --font-display: 'Segoe UI', 'Arial Narrow', Arial, sans-serif;
  --font-body: 'Segoe UI', Tahoma, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 20px;
}

html {
  scroll-behavior: smooth;
}

/* shared premium easing curves, used consistently across every
   transition in this file for a coherent, high-end feel */
:root {
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --ease-smooth: cubic-bezier(.2, .8, .2, 1);
}


@property --footer-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.site-footer {
  position: relative;
  overflow-x: clip;
  background: #060606;
  color: rgba(255, 255, 255, .78);
  font-family: var(--font-body);
  isolation: isolate;
}

/* fine film-grain texture laid over the whole footer — the kind of
   subtle noise real premium/automotive sites use so large flat dark
   areas don't look flat and digital. Practically invisible on its
   own, but it's what makes the darkness feel like material rather
   than a solid CSS color. */
.site-footer::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: .035;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------
   0) TRUST STRIP
   --------------------------------------------------------- */
.footer-trust {
  position: relative;
  background: linear-gradient(180deg, #0d0d0d, #0a0a0a);
  border-bottom: 1px solid rgba(212, 160, 23, .1);
  overflow: hidden;
  perspective: 900px;
}

.footer-trust::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--clr-primary), transparent);
  background-size: 200% 100%;
  animation: footerRailFlow 7s linear infinite;
  opacity: .7;
}

.footer-trust__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 30px 20px;
}

.footer-trust__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 22px;
  perspective: 600px;
  animation: footerFadeUp .6s cubic-bezier(.2, .8, .2, 1) both;
}

.footer-trust__item:nth-child(1) { animation-delay: .04s; }
.footer-trust__item:nth-child(2) { animation-delay: .1s; }
.footer-trust__item:nth-child(3) { animation-delay: .16s; }
.footer-trust__item:nth-child(4) { animation-delay: .22s; }

/* thin divider between items, echoing the site's bracket language */
.footer-trust__item:not(:first-child)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 30px;
  background: linear-gradient(180deg, transparent, rgba(212, 160, 23, .25), transparent);
}

.footer-trust__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 16px;
  color: var(--clr-primary);
  background: rgba(212, 160, 23, .08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(212, 160, 23, .25);
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.2, .9, .25, 1.3), background .3s ease, box-shadow .3s ease, color .3s ease;
}

.footer-trust__item:hover .footer-trust__icon {
  transform: rotateY(360deg) scale(1.12);
  color: var(--clr-dark);
  background: linear-gradient(135deg, var(--clr-primary), #f0d580);
  box-shadow: 0 10px 24px rgba(212, 160, 23, .35), 0 0 18px rgba(212, 160, 23, .3);
}

.footer-trust__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .45);
}

.footer-trust__copy strong {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--clr-white);
  transition: color .3s ease;
}

.footer-trust__item:hover .footer-trust__copy strong {
  color: var(--clr-primary);
}

/* ---------------------------------------------------------
   1) NEWSLETTER BAND
   --------------------------------------------------------- */
.footer-newsletter {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #141414, #0c0c0c);
  border-bottom: 1px solid rgba(212, 160, 23, .16);
}

/* animated gold current along the very top edge */
.footer-newsletter::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--clr-primary-dark), var(--clr-primary), var(--clr-primary-dark), transparent);
  background-size: 200% 100%;
  animation: footerRailFlow 6s linear infinite;
}

@keyframes footerRailFlow {
  to { background-position: -200% 0; }
}

.footer-newsletter__glow {
  position: absolute;
  top: -140px;
  left: 50%;
  transform: translateX(-50%);
  width: 480px;
  height: 280px;
  background: radial-gradient(closest-side, rgba(212, 160, 23, .14), transparent 75%);
  filter: blur(20px);
  pointer-events: none;
  animation: featSpotlightBreathe 5s ease-in-out infinite;
}

@keyframes featSpotlightBreathe {
  0%, 100% { opacity: .6; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1; transform: translateX(-50%) scale(1.06); }
}

.footer-newsletter__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 48px 20px;
}

.footer-newsletter__copy {
  flex: 1 1 320px;
  animation: footerFadeUp .6s cubic-bezier(.2, .8, .2, 1) both;
}

.footer-newsletter__title {
  position: relative;
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--clr-white);
  letter-spacing: .3px;
  display: inline-block;
}

.footer-newsletter__title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 42px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--clr-primary-dark), var(--clr-primary), #f5dd97, var(--clr-primary));
  background-size: 240% 100%;
  animation: footerBarShimmer 3.4s ease-in-out infinite;
}

@keyframes footerBarShimmer {
  0%, 100% { background-position: 0% 0; }
  50%      { background-position: 100% 0; }
}

.footer-newsletter__desc {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .55);
  max-width: 420px;
}

.footer-newsletter__form {
  flex: 1 1 380px;
  display: flex;
  gap: 12px;
  animation: footerFadeUp .6s cubic-bezier(.2, .8, .2, 1) .1s both;
}

.footer-newsletter__field {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  background: rgba(255, 255, 255, .04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease, transform .3s ease;
}

/* soft rotating gold aura that switches on behind the field the
   moment it's focused — a slow conic sweep rather than a static ring */
.footer-newsletter__field::after {
  content: '';
  position: absolute;
  inset: -3px;
  z-index: -1;
  border-radius: 11px;
  opacity: 0;
  background: conic-gradient(from var(--footer-angle), transparent 0deg, rgba(212, 160, 23, .55) 90deg, transparent 190deg, rgba(212, 160, 23, .35) 300deg, transparent 360deg);
  filter: blur(7px);
  animation: footerAngleSpin 5s linear infinite;
  transition: opacity .4s ease;
  pointer-events: none;
}

.footer-newsletter__field:focus-within::after {
  opacity: 1;
}

@keyframes footerAngleSpin {
  to { --footer-angle: 360deg; }
}

.footer-newsletter__field:hover {
  border-color: rgba(212, 160, 23, .35);
  transform: translateY(-2px);
}

.footer-newsletter__field i {
  color: rgba(255, 255, 255, .4);
  font-size: 13px;
  transition: color .3s ease, transform .3s ease;
}

.footer-newsletter__field input {
  flex: 1;
  padding: 14px 0;
  background: transparent;
  border: none;
  color: var(--clr-white);
  font-size: 13.5px;
  font-family: var(--font-body);
}

.footer-newsletter__field input::placeholder {
  color: rgba(255, 255, 255, .35);
  transition: opacity .3s ease;
}

.footer-newsletter__field input:focus {
  outline: none;
}

.footer-newsletter__field input:focus::placeholder {
  opacity: .5;
}

.footer-newsletter__field:focus-within {
  border-color: var(--clr-primary);
  background: rgba(212, 160, 23, .06);
  box-shadow: 0 0 0 4px rgba(212, 160, 23, .1);
  transform: translateY(-2px);
}

.footer-newsletter__field:focus-within i {
  color: var(--clr-primary);
  transform: scale(1.15) rotate(-6deg);
}

.footer-newsletter__btn {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 26px;
  border: none;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.footer-newsletter__btn i {
  font-size: 11px;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}

.footer-newsletter__btn:hover i {
  transform: translateX(4px);
}

.footer-newsletter__social {
  display: flex;
  align-items: center;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
  animation: footerFadeUp .6s cubic-bezier(.2, .8, .2, 1) .2s both;
}

.footer-newsletter__social a {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .03);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .6);
  font-size: 14px;
  text-decoration: none;
  transition: color .3s ease, border-color .3s ease, background .3s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease;
}

.footer-newsletter__social a::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(212, 160, 23, 0);
  transition: border-color .3s ease, inset .3s ease;
}

.footer-newsletter__social a:hover {
  color: var(--clr-dark);
  border-color: var(--clr-primary);
  background: linear-gradient(135deg, var(--clr-primary), #f0d580);
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 10px 20px rgba(212, 160, 23, .4);
}

.footer-newsletter__social a:hover::before {
  border-color: rgba(212, 160, 23, .35);
  inset: -6px;
}

@keyframes footerFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------
   Shared button style (matches the site's primary CTA)
   --------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease;
}

.btn--dark {
  position: relative;
  overflow: hidden;
  background: var(--clr-dark);
  color: var(--clr-white);
  border-radius: 8px;
  z-index: 1;
}

.btn--dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--clr-primary-dark), var(--clr-primary));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
  z-index: -1;
}

.btn--dark::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 35%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
  z-index: 2;
  pointer-events: none;
}

.btn--dark:hover::before {
  transform: scaleX(1);
}

.btn--dark:hover::after {
  left: 130%;
}

.btn--dark:hover {
  color: var(--clr-dark);
  transform: translateY(-3px);
  box-shadow: 0 14px 26px rgba(212, 160, 23, .3);
}

/* ---------------------------------------------------------
   2) MAIN FOOTER — logo + link columns
   --------------------------------------------------------- */
.footer-main {
  position: relative;
  overflow: hidden;
  padding: 56px 0 44px;
  background:
    radial-gradient(700px 340px at 90% 0%, rgba(212, 160, 23, .07), transparent 60%),
    radial-gradient(600px 320px at 6% 100%, rgba(212, 160, 23, .05), transparent 60%),
    #080808;
}

.footer-main__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .035;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(212, 160, 23, .5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 160, 23, .5) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: footerGridPan 26s linear infinite;
}

@keyframes footerGridPan {
  to { background-position: 40px 40px, 40px 40px; }
}

.footer-main__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}

.footer-main__glow--a {
  width: 280px;
  height: 280px;
  top: -80px;
  right: 8%;
  background: radial-gradient(circle, rgba(212, 160, 23, .12), transparent 70%);
  animation: footerGlowFloat 11s ease-in-out infinite;
}

.footer-main__glow--b {
  width: 240px;
  height: 240px;
  bottom: -80px;
  left: 4%;
  background: radial-gradient(circle, rgba(212, 160, 23, .08), transparent 70%);
  animation: footerGlowFloat 13s ease-in-out infinite reverse;
}


.footer-main::before {
  content: '';
  position: absolute;
  z-index: 0;
  width: 320px;
  height: 320px;
  top: 30%;
  left: 40%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(212, 160, 23, .05), transparent 70%);
  animation: footerGlowDrift 19s ease-in-out infinite, footerHueBreathe 9s ease-in-out infinite;
}

@keyframes footerGlowFloat {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(12px, -10px); }
}

@keyframes footerGlowDrift {
  0%, 100%  { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(-40px, 20px) scale(1.15); }
  66%       { transform: translate(24px, -30px) scale(.9); }
}

@keyframes footerHueBreathe {
  0%, 100% { filter: blur(70px) hue-rotate(0deg); }
  50%      { filter: blur(70px) hue-rotate(10deg); }
}

.footer-main__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 32px;
}

.footer-col {
  animation: footerFadeUp .6s cubic-bezier(.2, .8, .2, 1) both;
}

.footer-col:nth-child(1) { animation-delay: .05s; }
.footer-col:nth-child(2) { animation-delay: .12s; }
.footer-col:nth-child(3) { animation-delay: .19s; }
.footer-col:nth-child(4) { animation-delay: .26s; }
.footer-col:nth-child(5) { animation-delay: .33s; }

/* ---- Brand column ---- */
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 16px;
  text-decoration: none;
}

.footer-logo__badge {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: var(--clr-dark);
  color: var(--clr-primary);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  border: 1px solid rgba(212, 160, 23, .4);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease;
}

.footer-logo:hover .footer-logo__badge {
  transform: rotate(90deg);
  box-shadow: 0 0 22px rgba(212, 160, 23, .45);
}

.footer-logo__text {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 1.6px;
  color: var(--clr-white);
  background: linear-gradient(90deg, var(--clr-white) 50%, var(--clr-primary) 50%);
  background-size: 220% 100%;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  transition: background-position .5s ease;
}

.footer-logo:hover .footer-logo__text {
  color: transparent;
  background-position: -100% 0;
}

.footer-col__desc {
  font-size: 13px;
  line-height: 1.75;
  color: rgba(255, 255, 255, .48);
  max-width: 260px;
  margin: 0 0 20px;
}

.footer-badges {
  margin-bottom: 26px;
}

.footer-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border: 1px solid rgba(212, 160, 23, .35);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  color: var(--clr-primary);
  background: rgba(212, 160, 23, .06);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
}

.footer-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(212, 160, 23, .4);
  animation: footerBadgePulse 2.6s ease-in-out infinite;
}

@keyframes footerBadgePulse {
  0%   { box-shadow: 0 0 0 0 rgba(212, 160, 23, .35); }
  70%  { box-shadow: 0 0 0 8px rgba(212, 160, 23, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 160, 23, 0); }
}

/* ---- Payment methods ---- */
.footer-payments {
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.footer-payments__label {
  display: block;
  margin-bottom: 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .35);
}

.footer-payments__list {
  display: flex;
  align-items: center;
  gap: 9px;
  list-style: none;
  margin: 0;
  padding: 0;
  perspective: 400px;
}

.footer-payments__list li {
  display: grid;
  place-items: center;
  width: 34px;
  height: 24px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .55);
  font-size: 14px;
  animation: footerFadeUp .5s cubic-bezier(.2, .8, .2, 1) both;
  transition: color .3s ease, border-color .3s ease, background .3s ease, transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease;
}

.footer-payments__list li:nth-child(1) { animation-delay: .1s; }
.footer-payments__list li:nth-child(2) { animation-delay: .15s; }
.footer-payments__list li:nth-child(3) { animation-delay: .2s; }
.footer-payments__list li:nth-child(4) { animation-delay: .25s; }
.footer-payments__list li:nth-child(5) { animation-delay: .3s; }

.footer-payments__list li:hover {
  color: var(--clr-primary);
  border-color: rgba(212, 160, 23, .4);
  background: rgba(212, 160, 23, .08);
  transform: translateY(-3px) rotateX(12deg);
  box-shadow: 0 8px 16px rgba(212, 160, 23, .22);
}

/* ---- Link columns ---- */
.footer-col {
  position: relative;
  padding: 18px 16px;
  margin: -18px -16px;
  border-radius: 16px;
  transition: background .5s var(--ease-smooth), box-shadow .5s var(--ease-smooth);
}

.footer-col--brand {
  padding-inline: 0;
  margin-inline: 0;
}

nav.footer-col:hover {
  background: linear-gradient(165deg, rgba(212, 160, 23, .045), rgba(255, 255, 255, .015));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 20px 40px rgba(0, 0, 0, .25);
}

/* schematic corner brackets that draw themselves in on hover —
   echoes the blueprint / configurator visual language elsewhere
   on the site */
nav.footer-col::before,
nav.footer-col::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  opacity: 0;
  transition: opacity .4s ease, width .4s var(--ease-expo), height .4s var(--ease-expo);
  pointer-events: none;
}

nav.footer-col::before {
  top: 6px;
  left: 6px;
  border-top: 1.5px solid rgba(212, 160, 23, .55);
  border-left: 1.5px solid rgba(212, 160, 23, .55);
}

nav.footer-col::after {
  bottom: 6px;
  right: 6px;
  border-bottom: 1.5px solid rgba(212, 160, 23, .55);
  border-right: 1.5px solid rgba(212, 160, 23, .55);
}

nav.footer-col:hover::before,
nav.footer-col:hover::after {
  opacity: 1;
  width: 20px;
  height: 20px;
}

.footer-col__title {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--clr-white);
}

.footer-col__title i {
  font-size: 11px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  color: var(--clr-primary);
  background: rgba(212, 160, 23, .1);
  border: 1px solid rgba(212, 160, 23, .25);
  transition: transform .4s var(--ease-bounce), background .3s ease, color .3s ease;
}

nav.footer-col:hover .footer-col__title i {
  transform: rotate(-10deg) scale(1.1);
  background: linear-gradient(135deg, var(--clr-primary), #f0d580);
  color: var(--clr-dark);
}

.footer-col__title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -9px;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--clr-primary-dark), var(--clr-primary));
  transition: width .5s var(--ease-expo);
}

nav.footer-col:hover .footer-col__title::after {
  width: 100%;
}

.footer-col > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer-col > ul > li {
  animation: footerFadeUp .5s var(--ease-smooth) both;
}

.footer-col > ul > li:nth-child(1) { animation-delay: .06s; }
.footer-col > ul > li:nth-child(2) { animation-delay: .11s; }
.footer-col > ul > li:nth-child(3) { animation-delay: .16s; }
.footer-col > ul > li:nth-child(4) { animation-delay: .21s; }
.footer-col > ul > li:nth-child(5) { animation-delay: .26s; }

/* each link is now an icon badge + label + reveal-on-hover arrow,
   sitting on a soft highlight pill that sweeps in from the left */
.footer-col a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 10px 7px 7px;
  margin-inline: -7px;
  border-radius: 9px;
  font-size: 13.3px;
  color: rgba(255, 255, 255, .58);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: color .3s ease;
}

.footer-col a::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(212, 160, 23, .12), rgba(212, 160, 23, 0));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease-expo);
}

.footer-col a:hover::before {
  transform: scaleX(1);
}

.footer-link__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 8px;
  font-size: 11px;
  color: rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .08);
  transition: transform .45s var(--ease-bounce), background .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease;
}

.footer-col a:hover .footer-link__icon {
  transform: scale(1.12) rotate(-10deg);
  color: var(--clr-dark);
  background: linear-gradient(135deg, var(--clr-primary), #f0d580);
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(212, 160, 23, .38);
}

.footer-link__text {
  flex: 1;
  min-width: 0;
  transition: transform .35s var(--ease-expo), color .3s ease;
}

.footer-col a:hover .footer-link__text {
  color: var(--clr-primary);
  transform: translateX(-3px);
}

.footer-link__arrow {
  flex-shrink: 0;
  font-size: 9px;
  color: var(--clr-primary);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .3s ease, transform .35s var(--ease-bounce);
}

.footer-col a:hover .footer-link__arrow {
  opacity: 1;
  transform: translateX(0);
}


.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: #050505;
}

.footer-bottom__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 20px;
  font-size: 12px;
  color: rgba(255, 255, 255, .4);
}

.footer-bottom__copy,
.footer-bottom__made {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* the replacement for the pulsing heart: a small gold rev-gauge
   badge that beats with the same double "lub-dub" rhythm */
.footer-pulse {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(212, 160, 23, .14);
  color: var(--clr-primary);
  font-size: 10px;
  box-shadow: 0 0 0 0 rgba(212, 160, 23, .5);
  animation: footerHeartbeat 1.8s ease-in-out infinite;
}
.footer-pulse::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px dashed rgba(212, 160, 23, .4);
  animation: footerRingSpin 10s linear infinite;
  pointer-events: none;
}

@keyframes footerHeartbeat {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(212, 160, 23, .5); }
  14%  { transform: scale(1.28); }
  28%  { transform: scale(1);    box-shadow: 0 0 0 6px rgba(212, 160, 23, 0); }
  42%  { transform: scale(1.2); }
  56%  { transform: scale(1); }
  100% { transform: scale(1); }
}

.footer-bottom__legal {
  display: flex;
  align-items: center;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-bottom__legal a {
  position: relative;
  color: rgba(255, 255, 255, .4);
  text-decoration: none;
  transition: color .3s ease;
}

.footer-bottom__legal a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 1px;
  background: var(--clr-primary);
  transition: width .3s ease;
}

.footer-bottom__legal a:hover {
  color: var(--clr-primary);
}

.footer-bottom__legal a:hover::after {
  width: 100%;
}

/* ---------------------------------------------------------
   4) BACK TO TOP
   --------------------------------------------------------- */
.footer-top-btn {
  position: absolute;
  top: -24px;
  right: 40px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-dark));
  color: var(--clr-dark);
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(212, 160, 23, .35), 0 0 0 5px #060606;
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease;
  z-index: 5;
}

/* a slow-turning dashed ring, like a gauge bezel, idling around the
   button at all times — comes alive (brighter + faster) on hover */
.footer-top-btn::before {
  content: '';
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 1.5px dashed rgba(212, 160, 23, .35);
  animation: footerRingSpin 14s linear infinite;
  transition: border-color .3s ease;
  pointer-events: none;
}

.footer-top-btn:hover::before {
  border-color: rgba(212, 160, 23, .7);
  animation-duration: 4s;
}

@keyframes footerRingSpin {
  to { transform: rotate(360deg); }
}

.footer-top-btn:hover {
  transform: translateY(-6px) scale(1.06);
  box-shadow: 0 16px 32px rgba(212, 160, 23, .48), 0 0 0 5px #060606;
}

.footer-top-btn i {
  transition: transform .3s ease;
}

.footer-top-btn:hover i {
  animation: footerChevronBounce .9s ease-in-out infinite;
}

@keyframes footerChevronBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

.site-footer a:focus-visible,
.site-footer button:focus-visible,
.site-footer input:focus-visible {
  outline: 2px solid var(--clr-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

.footer-newsletter__social a:focus-visible,
.footer-top-btn:focus-visible,
.footer-trust__icon:focus-visible {
  outline-offset: 4px;
  border-radius: 50%;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 992px) {
  .footer-trust__inner {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 24px;
  }

  .footer-trust__item:nth-child(3)::before {
    display: none;
  }

  .footer-newsletter__inner {
    flex-wrap: wrap;
  }

  .footer-newsletter__form {
    flex: 1 1 100%;
    order: 3;
  }

  .footer-main__inner {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 40px;
  }

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

  .footer-col__desc {
    max-width: 420px;
  }
}

@media (max-width: 768px) {
  .footer-trust__inner {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 26px 20px;
  }

  .footer-trust__item::before {
    display: none;
  }

  .footer-newsletter__inner {
    padding: 40px 20px;
  }

  .footer-newsletter__form {
    flex-direction: column;
  }

  .footer-newsletter__btn {
    justify-content: center;
    padding: 15px 26px;
  }

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

  .footer-bottom__inner {
    flex-direction: column;
    text-align: center;
  }

  .footer-bottom__legal {
    order: 3;
  }

  .footer-top-btn {
    top: -22px;
    right: 20px;
    width: 42px;
    height: 42px;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .footer-main__inner {
    grid-template-columns: 1fr;
    row-gap: 34px;
  }

  .footer-newsletter__social {
    justify-content: center;
    width: 100%;
  }

  .footer-payments__list {
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-newsletter::before,
  .footer-newsletter__glow,
  .footer-newsletter__copy,
  .footer-newsletter__form,
  .footer-newsletter__social,
  .footer-newsletter__title::after,
  .footer-newsletter__field::after,
  .footer-col,
  .footer-logo__badge,
  .footer-pulse,
  .footer-pulse::before,
  .footer-badge::before,
  .footer-main::before,
  .footer-main__glow--a,
  .footer-main__glow--b,
  .footer-top-btn,
  .footer-top-btn i,
  .footer-top-btn::before,
  .footer-trust__item,
  .footer-trust__icon,
  .footer-trust::after,
  .footer-payments__list li,
  .footer-main__grid,
  .footer-col > ul > li,
  .footer-col__title::after,
  .footer-col::before,
  .footer-col::after,
  .footer-link__icon,
  .footer-link__text,
  .footer-link__arrow,
  .btn--dark,
  .btn--dark::before,
  .btn--dark::after {
    animation: none !important;
    transition: none !important;
  }
}