/* ==========================================================================
   FIGHT IQ — RAGE GUARD
   Design tokens
   ========================================================================== */
:root{
  --black:#000000;
  --white:#ffffff;
  --gold:#D4AF37;
  --gold-light:#e8c968;
  --dark-gray:#2A2A2A;
  --light-gray:#F5F5F5;
  --neutral:#666666;
  --error:#FF4444;

  --font-display:'Bebas Neue', 'Inter', sans-serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --shadow-subtle: 0 10px 30px rgba(0,0,0,0.08);
  --shadow-medium: 0 20px 60px rgba(0,0,0,0.15);
  --shadow-heavy: 0 40px 100px rgba(0,0,0,0.25);

  --section-gap: 120px;
  --ease-out: cubic-bezier(0.25,0.46,0.45,0.94);
}

@media (max-width: 900px){
  :root{ --section-gap: 72px; }
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: auto; }
body{
  margin:0;
  background: var(--white);
  color: var(--dark-gray);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Grain overlay for premium texture */
.grain-overlay{
  position: fixed; inset:0; pointer-events:none; z-index: 9998;
  opacity: 0.025; mix-blend-mode: overlay;
  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.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.scroll-progress{ position:fixed; top:0; left:0; width:100%; height:3px; z-index:9999; background:transparent; }
.scroll-progress__bar{ height:100%; width:0%; background: linear-gradient(90deg, var(--gold), var(--gold-light)); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-block;
  padding: 16px 34px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), background .3s, color .3s;
  will-change: transform;
}
.btn:hover{ transform: translateY(-3px); }
.btn--gold{ background: var(--gold); color: var(--black); }
.btn--gold:hover{ background: var(--gold-light); box-shadow: var(--shadow-medium); }
.btn--white{ background:var(--white); color:var(--black); }
.btn--white:hover{ box-shadow: var(--shadow-medium); }
.btn--outline{ background:transparent; color:var(--black); border-color: var(--black); }
.btn--outline:hover{ background:var(--black); color:var(--white); }
.btn--outline-sm{ background:transparent; color:var(--black); border-color: var(--dark-gray); padding:12px 22px; font-size:11px; letter-spacing:1.5px; }
.btn--outline-sm:hover{ background:var(--black); color:var(--white); }
.btn--sm{ padding:12px 24px; font-size:11px; }
.btn--block{ display:block; width:100%; text-align:center; }

.eyebrow{
  display:block; font-size: 12px; font-weight:700; letter-spacing: 3px;
  color: var(--gold); text-transform: uppercase; margin-bottom: 16px;
}
.eyebrow--center{ text-align:center; }

.section-title{
  font-family: var(--font-display);
  font-size: clamp(38px, 6vw, 56px);
  line-height: 1.02;
  letter-spacing: 1px;
  margin: 0 0 24px;
  text-transform: uppercase;
}
.section-title--center{ text-align:center; }

/* ==========================================================================
   Header
   ========================================================================== */
.header{
  position: fixed; top:0; left:0; width:100%; z-index: 500;
  transition: background .4s var(--ease-out), padding .4s var(--ease-out), border-color .4s;
  padding: 26px 0;
  border-bottom: 1px solid transparent;
}
.header.is-scrolled{
  background: rgba(0,0,0,0.9);
  backdrop-filter: blur(10px);
  padding: 14px 0;
  border-color: rgba(255,255,255,0.08);
}
.header__inner{
  max-width: 1440px; margin:0 auto; padding: 0 40px;
  display:flex; align-items:center; justify-content:space-between;
}
.logo{ display:flex; align-items:center; gap:10px; color:var(--white); }
.header:not(.is-scrolled) .logo{ color: var(--white); }
.logo__brain{ display:flex; color: var(--gold); }
.logo__text{
  font-family: var(--font-display); font-size: 24px; letter-spacing: 2px; color: var(--white);
}
.logo__text--light{ color: var(--white); }
.logo__dash{ color: var(--gold); }

.nav{ display:flex; gap: 40px; }
.nav a{
  color: var(--white); font-size: 13px; font-weight:600; letter-spacing: 1.5px;
  position:relative; padding-bottom:4px;
}
.nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background: var(--gold);
  transition: width .35s var(--ease-out);
}
.nav a:hover::after{ width:100%; }

.header__actions{ display:flex; align-items:center; gap: 22px; }
.socials--header{ display:flex; gap:16px; }
.socials--header a{ color: var(--white); opacity:.85; transition:opacity .3s, color .3s; }
.socials--header a:hover{ opacity:1; color: var(--gold); }

.cart-btn{ position:relative; color:var(--white); display:flex; }
.cart-btn__count{
  position:absolute; top:-8px; right:-10px; background: var(--gold); color: var(--black);
  font-size:10px; font-weight:800; width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.burger{ display:none; flex-direction:column; gap:5px; width:24px; }
.burger span{ height:2px; background:var(--white); width:100%; transition: transform .3s, opacity .3s; }

.mobile-nav{
  position: fixed; top:0; right:-100%; width: min(320px, 80vw); height:100vh; z-index: 700;
  background: var(--black); padding: 100px 32px; display:flex; flex-direction:column; gap:28px;
  transition: right .45s var(--ease-out);
}
.mobile-nav.is-open{ right:0; }
.mobile-nav a{ color: var(--white); font-family: var(--font-display); font-size:26px; letter-spacing:1px; }

/* Cart drawer */
.cart-drawer{
  position:fixed; top:0; right:-100%; width: min(400px, 90vw); height:100vh; z-index:800;
  background: var(--white); display:flex; flex-direction:column;
  box-shadow: var(--shadow-heavy);
  transition: right .45s var(--ease-out);
}
.cart-drawer.is-open{ right:0; }
.cart-drawer__header{
  display:flex; justify-content:space-between; align-items:center;
  padding: 26px 28px; border-bottom:1px solid #eee;
}
.cart-drawer__header h3{ font-family: var(--font-display); letter-spacing:2px; margin:0; font-size:22px; }
.cart-drawer__header button{ font-size:28px; line-height:1; color:var(--dark-gray); }
.cart-drawer__items{ flex:1; overflow-y:auto; padding: 20px 28px; }
.cart-drawer__empty{ color: var(--neutral); font-size:14px; }
.cart-item{ display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid #f0f0f0; gap:12px; }
.cart-item__name{ font-size:14px; font-weight:600; }
.cart-item__qty{ font-size:12px; color:var(--neutral); }
.cart-item__remove{ font-size: 18px; color: var(--neutral); }
.cart-item__remove:hover{ color: var(--error); }
.cart-drawer__footer{ padding: 24px 28px; border-top:1px solid #eee; }
.cart-drawer__total{ display:flex; justify-content:space-between; font-weight:700; margin-bottom:16px; font-size:15px; }

.overlay{
  position: fixed; inset:0; background: rgba(0,0,0,0.5); z-index:600;
  opacity:0; pointer-events:none; transition: opacity .4s;
}
.overlay.is-active{ opacity:1; pointer-events:auto; }

@media (max-width: 900px){
  .nav{ display:none; }
  .burger{ display:flex; }
  .socials--header{ display:none; }
  .header__inner{ padding: 0 20px; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative; height:100svh; min-height:600px; background: var(--black); color: var(--white);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.hero__orbit-stage{ position:absolute; inset:0; }
.hero__orbit{ position:relative; width:100%; height:100%; }
.hero__orbit-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position: center 15%;
  opacity:0; transition: opacity 1.4s ease;
}
.hero__orbit-img.is-active{ opacity: 1; }
.hero__vignette{
  position:absolute; inset:0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.75) 75%, rgba(0,0,0,0.92) 100%);
}
.hero__content{
  position:relative; z-index:2; text-align:center; padding: 0 20px;
}
.hero__number{
  display:block; font-family: var(--font-display); font-size: 18px; letter-spacing: 6px; color: var(--gold);
  margin-bottom: 18px; opacity:0; transform: translateY(20px);
}
.hero__title{
  font-family: var(--font-display); font-size: clamp(56px, 12vw, 128px); line-height: 0.9;
  letter-spacing: 4px; margin: 0 0 18px; text-shadow: 0 10px 40px rgba(0,0,0,0.5);
  opacity:0; transform: translateY(30px);
}
.hero__tagline{
  font-size: clamp(14px, 2vw, 19px); font-weight:300; letter-spacing: 1px; color: rgba(255,255,255,0.85);
  margin: 0 0 40px; opacity:0; transform: translateY(20px);
}
.hero__content .btn{ opacity:0; transform: translateY(20px); }

.hero__wave{ position:absolute; bottom:-2px; left:0; width:100%; height:auto; z-index:1; }
.hero__scroll-cue{
  position:absolute; bottom: 40px; left:50%; transform: translateX(-50%); z-index:2;
  color: rgba(255,255,255,0.6); font-size:10px; letter-spacing:3px; display:flex; flex-direction:column; align-items:center; gap:8px;
}
.hero__scroll-cue span{
  width:1px; height:34px; background: linear-gradient(rgba(255,255,255,0), var(--gold));
  animation: scrollCue 1.8s ease-in-out infinite;
}
@keyframes scrollCue{ 0%{ opacity:0; transform:scaleY(0.4);} 50%{opacity:1; transform:scaleY(1);} 100%{opacity:0; transform:scaleY(0.4);} }

@media (max-width: 700px){
  .hero__orbit-img{ display:none; }
  .hero__orbit-img:nth-child(-n+4){ display:block; }
}

/* ==========================================================================
   Marquee
   ========================================================================== */
.marquee{
  background: var(--black); color: var(--white); overflow:hidden; padding: 26px 0;
  border-top:1px solid #1a1a1a; border-bottom:1px solid #1a1a1a;
}
.marquee__track{
  display:flex; white-space:nowrap; width:max-content;
  font-family: var(--font-display); font-size: clamp(20px, 3vw, 32px); letter-spacing:2px;
  animation: marqueeScroll 22s linear infinite;
}
.marquee__dot{ color: var(--gold); padding: 0 6px; }
@keyframes marqueeScroll{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

/* ==========================================================================
   Story
   ========================================================================== */
.story{
  display:grid; grid-template-columns: 1.1fr 0.9fr; align-items:center;
  max-width:1440px; margin:0 auto; padding: var(--section-gap) 40px; gap: 60px;
}
.story__media{ position:relative; overflow:hidden; aspect-ratio: 4/5; box-shadow: var(--shadow-medium); }
.story__media img{ width:100%; height:120%; object-fit:cover; position:relative; top:-10%; }
.story__text{ font-size:17px; line-height:1.7; margin: 0 0 18px; font-weight:500; }
.story__text--muted{ color: var(--neutral); font-weight:400; }
.story .btn{ margin-top: 12px; }

@media (max-width: 900px){
  .story{ grid-template-columns: 1fr; padding: var(--section-gap) 24px; gap: 32px; }
}

/* ==========================================================================
   Explode
   ========================================================================== */
.explode{ background: var(--light-gray); padding: var(--section-gap) 40px; text-align:center; }
.explode__stage{
  max-width: 900px; margin: 60px auto 0; display:grid; gap:18px;
}
.explode__layer{
  display:flex; align-items:center; gap:24px; background: var(--white); padding: 22px 28px;
  box-shadow: var(--shadow-subtle); text-align:left;
  opacity:0; transform: translateX(-40px) scale(0.96);
}
.explode__layer:nth-child(even){ transform: translateX(40px) scale(0.96); }
.explode__swatch{ width:56px; height:56px; flex-shrink:0; border-radius:6px; }
.explode__swatch--shell{ background: linear-gradient(135deg, #1a1a1a, #3a3a3a); }
.explode__swatch--weave{ background: linear-gradient(135deg, var(--gold), #8a6e1f); }
.explode__swatch--moisture{ background: linear-gradient(135deg, #cfd8dc, #90a4ae); }
.explode__swatch--support{ background: linear-gradient(135deg, #2A2A2A, var(--gold)); }
.explode__label b{ display:block; font-size:17px; margin-bottom:4px; }
.explode__label span{ color: var(--neutral); font-size:14px; }

.explode__specs{
  max-width: 900px; margin: 60px auto 0; display:grid; grid-template-columns: repeat(4,1fr); gap: 20px;
}
.spec{ display:flex; flex-direction:column; gap:6px; }
.spec__num{ font-family: var(--font-display); font-size: 34px; color: var(--black); }
.spec__label{ font-size:12px; letter-spacing:1px; color: var(--neutral); text-transform:uppercase; }

@media (max-width:700px){
  .explode__specs{ grid-template-columns: repeat(2,1fr); }
  .explode__layer, .explode__layer:nth-child(even){ transform: translateY(30px); }
}

/* ==========================================================================
   Flex reveal
   ========================================================================== */
.flex-section{ padding: var(--section-gap) 40px; text-align:center; background: var(--white); }
.flex-reveal{
  position:relative; max-width: 900px; margin: 50px auto 0; aspect-ratio: 4/5;
  overflow:hidden; box-shadow: var(--shadow-medium);
}
.flex-reveal__before, .flex-reveal__after{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.flex-reveal__after-wrap{
  position:absolute; inset:0; clip-path: inset(100% 0 0 0);
}
.flex-reveal__tag{
  position:absolute; bottom:20px; z-index:3; font-family: var(--font-display);
  letter-spacing:2px; font-size:13px; background: rgba(0,0,0,0.65); color:var(--white); padding: 6px 14px;
}
.flex-reveal__tag--left{ left:20px; }
.flex-reveal__tag--right{ right:20px; color: var(--gold); }
.flex-progress{ max-width:900px; height:3px; background:#eee; margin: 20px auto 0; }
.flex-progress__bar{ height:100%; width:0%; background: var(--gold); }
.flex-caption{ margin-top:24px; font-size:16px; color: var(--neutral); font-style:italic; }

/* ==========================================================================
   Impact
   ========================================================================== */
.impact{
  position:relative; background: var(--black); color:var(--white); padding: var(--section-gap) 40px;
  overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.impact__waves{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:.5; }
.impact__waves svg{ width: min(700px, 90vw); height:auto; }
.impact__ring{
  fill:none; stroke: var(--gold); stroke-width:1; opacity:0;
  animation: impactRing 2.4s ease-out infinite;
  transform-origin: 200px 200px;
}
@keyframes impactRing{
  0%{ r:20; opacity:.9; }
  100%{ r:190; opacity:0; }
}
.impact__content{ position:relative; z-index:2; text-align:center; max-width:640px; }
.impact__content .eyebrow{ text-align:center; }
.impact__content .section-title{ text-align:center; }

.gauge{ margin: 30px auto; display:flex; flex-direction:column; align-items:center; }
.gauge__score{ font-family: var(--font-display); font-size:40px; margin-top:-10px; color: var(--gold); }
.gauge__max{ font-size:18px; color: var(--neutral); }
.gauge__label{ font-size:12px; letter-spacing:2px; text-transform:uppercase; color: var(--neutral); margin-top:4px; }

.impact__phases{ display:flex; flex-direction:column; gap:14px; margin-top: 30px; text-align:left; max-width:420px; margin-inline:auto; }
.impact__phases li{ display:flex; align-items:center; gap:16px; font-size:15px; color: rgba(255,255,255,0.85); }
.impact__phase-num{ font-family: var(--font-display); color: var(--gold); font-size:20px; width:32px; }

/* ==========================================================================
   Collection
   ========================================================================== */
.collection{ padding: var(--section-gap) 40px; background: var(--white); }
.collection__grid{
  max-width:1440px; margin: 50px auto 0; display:grid;
  grid-template-columns: repeat(6, 1fr); gap: 24px;
}
.product-card{
  position:relative; grid-column: span 2; overflow:hidden; background: var(--light-gray);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
  display:flex; flex-direction:column;
}
.product-card:hover{ transform: scale(1.02); box-shadow: var(--shadow-medium); z-index:2; }
.product-card--large{ grid-column: span 3; }
.product-card__media{ aspect-ratio: 3/4; overflow:hidden; background:#111; }
.product-card__media img{ width:100%; height:100%; object-fit:cover; object-position: top center; transition: transform .6s var(--ease-out); }
.product-card:hover .product-card__media img{ transform: scale(1.06); }
.product-card__media--icon{ display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg,#141414,#000); color:var(--gold); }
.product-card__info{ padding: 22px 24px 26px; flex:1; display:flex; flex-direction:column; gap:8px; }
.product-card__tag{
  align-self:flex-start; font-size:10px; letter-spacing:1.5px; font-weight:800; color: var(--black);
  background: var(--gold); padding:4px 10px;
}
.product-card__info h3{ font-family: var(--font-display); font-size:24px; letter-spacing:1px; margin:6px 0 2px; line-height:1.05; }
.product-card__sub{ color: var(--neutral); font-size:13px; margin:0; }
.product-card__price{ font-weight:700; font-size:17px; margin: 4px 0 10px; }
.product-card .btn{ align-self:flex-start; }

@media (max-width: 1100px){
  .collection__grid{ grid-template-columns: repeat(2,1fr); }
  .product-card, .product-card--large{ grid-column: span 1; }
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonials{ background: var(--light-gray); padding: var(--section-gap) 40px; }
.testimonials__track{
  max-width: 1440px; margin: 50px auto 0; display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom: 10px; scrollbar-width:none;
}
.testimonials__track::-webkit-scrollbar{ display:none; }
.testimonial{
  scroll-snap-align:start; flex: 0 0 min(340px, 82vw); background: var(--white); padding: 32px 28px;
  box-shadow: var(--shadow-subtle); text-align:center;
}
.testimonial__photo{ width:64px; height:64px; border-radius:50%; object-fit:cover; margin: 0 auto 16px; border: 2px solid var(--gold); }
.testimonial__stars{ color: var(--gold); letter-spacing:2px; margin: 0 0 12px; }
.testimonial__quote{ font-size:15px; line-height:1.6; color: var(--dark-gray); min-height:96px; }
.testimonial__name{ font-weight:700; font-size:14px; margin-top:16px; }
.testimonial__name span{ font-weight:400; color: var(--neutral); }
.testimonials__dots{ display:flex; justify-content:center; gap:8px; margin-top:22px; }
.testimonials__dots span{ width:7px; height:7px; border-radius:50%; background:#ccc; transition: background .3s, transform .3s; cursor:pointer; }
.testimonials__dots span.is-active{ background: var(--gold); transform: scale(1.3); }

/* ==========================================================================
   Fullscreen visual
   ========================================================================== */
.fullscreen-visual{ position:relative; height:85vh; min-height:480px; overflow:hidden; }
.fullscreen-visual__media{ position:absolute; inset:0; }
.fullscreen-visual__media img{ width:100%; height:130%; object-fit:cover; position:relative; top:-15%; }
.fullscreen-visual__overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.75) 100%);
}
.fullscreen-visual__content{
  position:relative; z-index:2; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; text-align:center; padding: 0 20px;
}
.fullscreen-visual__content h2{
  font-family: var(--font-display); color: var(--white); font-size: clamp(38px, 7vw, 70px);
  letter-spacing:2px; margin:0; line-height:1;
}

/* ==========================================================================
   Sizing + FAQ
   ========================================================================== */
.sizing{ padding: var(--section-gap) 40px; background: var(--white); }
.sizing__grid{
  max-width:1200px; margin: 50px auto 0; display:grid; grid-template-columns: 1fr 1fr; gap: 60px;
}
.sizing__chart{ width:100%; border-collapse:collapse; }
.sizing__chart th, .sizing__chart td{ padding: 14px 12px; text-align:center; border-bottom:1px solid #eee; font-size:14px; }
.sizing__chart th{ font-family: var(--font-display); letter-spacing:1px; background: var(--black); color:var(--white); }
.sizing__chart tr:nth-child(even) td{ background: var(--light-gray); }

.faq__item{ border-bottom: 1px solid #e6e6e6; }
.faq__q{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  padding: 20px 4px; font-size:15px; font-weight:600; text-align:left;
}
.faq__icon{ position:relative; width:16px; height:16px; flex-shrink:0; }
.faq__icon::before, .faq__icon::after{
  content:''; position:absolute; background: var(--dark-gray); transition: transform .35s var(--ease-out);
}
.faq__icon::before{ top:7px; left:0; width:16px; height:2px; }
.faq__icon::after{ top:0; left:7px; width:2px; height:16px; }
.faq__q[aria-expanded="true"] .faq__icon::after{ transform: rotate(90deg); opacity:0; }
.faq__a{ max-height:0; overflow:hidden; transition: max-height .4s var(--ease-out); }
.faq__a p{ margin:0 0 20px; color: var(--neutral); font-size:14px; line-height:1.7; padding-right: 20px; }

@media (max-width: 900px){
  .sizing__grid{ grid-template-columns:1fr; gap: 40px; }
}

/* ==========================================================================
   Newsletter + Footer
   ========================================================================== */
.newsletter{
  background: var(--gold); color: var(--black); text-align:center; padding: 90px 24px;
}
.newsletter h2{ font-family: var(--font-display); font-size: clamp(32px,5vw,48px); letter-spacing:1px; margin:0 0 10px; }
.newsletter p{ margin:0 0 30px; opacity:.8; }
.newsletter__form{ display:flex; max-width:440px; margin:0 auto; gap:0; }
.newsletter__form input{
  flex:1; padding: 16px 18px; border:2px solid var(--black); border-right:none; font-size:14px; background:var(--white);
}
.newsletter__form input:focus{ outline:none; }
.newsletter__form .btn{ border:2px solid var(--black); background: var(--black); color: var(--white); }
.newsletter__form .btn:hover{ background: var(--dark-gray); }
.newsletter__msg{ margin-top:14px; font-size:13px; font-weight:600; min-height:18px; }

.footer{ background: var(--black); color: rgba(255,255,255,0.75); padding: 80px 40px 30px; }
.footer__top{
  max-width:1440px; margin:0 auto; display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 50px; padding-bottom: 50px; border-bottom:1px solid #1c1c1c;
}
.footer__brand p{ font-size:14px; margin: 14px 0 20px; color: rgba(255,255,255,0.55); }
.footer__links h4{ color: var(--white); font-size:12px; letter-spacing:2px; margin: 0 0 18px; }
.footer__links{ display:flex; flex-direction:column; }
.footer__links a{ padding: 6px 0; font-size:14px; color: rgba(255,255,255,0.6); transition: color .3s; }
.footer__links a:hover{ color: var(--gold); }
.footer__bottom{
  max-width:1440px; margin: 24px auto 0; display:flex; justify-content:space-between; align-items:center; font-size:12px; flex-wrap:wrap; gap:14px;
}
.footer__payments{ display:flex; gap:16px; opacity:.6; letter-spacing:1px; }

@media (max-width: 900px){
  .footer__top{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .footer__top{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   Scroll to top
   ========================================================================== */
.scroll-top{
  position:fixed; bottom: 28px; right: 28px; width:48px; height:48px; border-radius:50%;
  background: var(--gold); color: var(--black); display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-medium); z-index: 400; opacity:0; pointer-events:none; transform: translateY(10px);
  transition: opacity .3s, transform .3s;
}
.scroll-top.is-visible{ opacity:1; pointer-events:auto; transform:translateY(0); }

/* Fade helper (JS-controlled via GSAP, this is just a safe fallback) */
[data-fade]{ will-change: transform, opacity; }