/* ---------- Hero ---------- */
.hero{background:var(--black);color:#fff;padding:5.5rem 0 6.5rem}
.carbon{background-color:var(--black);
  background-image:linear-gradient(45deg,rgba(255,255,255,.025) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.025) 75%),
                   linear-gradient(45deg,rgba(255,255,255,.025) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.025) 75%);
  background-position:0 0,4px 4px;background-size:8px 8px}
.hero-kicker{display:flex;align-items:center;gap:.8rem;color:var(--red-light);font-family:var(--font-01);font-style:italic;
  font-weight:700;text-transform:uppercase;letter-spacing:3px;font-size:.95rem}
.hero-kicker span{width:44px;height:3px;background:var(--red);transform:skewX(-20deg)}
.hero-title{font-family:var(--font-01);font-style:italic;font-weight:900;text-transform:uppercase;
  font-size:clamp(3rem,6.5vw,5.4rem);line-height:.92;margin:1rem 0 0;color:#fff;text-shadow:0 8px 30px rgba(0,0,0,.6)}
.text-metal{background:linear-gradient(180deg,#ffffff 0%,#d9dde2 38%,#8d939c 68%,#eef0f2 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.text-red{color:var(--red)}
.text-gold{color:var(--gold)}
.hero-swoosh{width:230px;height:10px;background:linear-gradient(90deg,var(--red),transparent);transform:skewX(-20deg);margin-top:1.2rem}
.hero-lead{color:#b9bec6;font-size:1.06rem;max-width:34rem}
.hero-stars i{color:var(--gold)!important;font-size:.95rem}
.hero-stars span:last-child{color:#9aa0a8;font-size:.85rem;letter-spacing:1px;text-transform:uppercase}
.hero-visual{position:relative}
.hero-visual::after{content:"";position:absolute;right:-12%;bottom:-14%;width:65%;height:65%;z-index:-1;
  background:radial-gradient(circle,rgba(200,16,46,.4),transparent 62%);filter:blur(12px)}
.img-frame{position:relative}
.img-frame::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(210deg,rgba(200,16,46,.16),rgba(8,8,10,.55) 72%)}
.img-frame img{border-radius:inherit;box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.07)}
.hero-cards{position:relative;margin-top:1.5rem}
@media (min-width:992px){
  .hero-cards{position:absolute;left:-3.5rem;top:6%;width:330px;margin-top:0;z-index:3}
}
.glass-card{background:rgba(20,20,24,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:.9rem 1.1rem;box-shadow:0 20px 40px rgba(0,0,0,.45);
  transition:box-shadow .3s;will-change:transform}
.glass-card:hover{box-shadow:0 26px 50px rgba(200,16,46,.25)}
.glass-card b{display:block;font-family:var(--font-01);font-style:italic;font-weight:800;font-size:1.15rem;text-transform:uppercase;color:#fff}
.glass-card small{color:#aeb3ba;font-size:.78rem}
.gc-icon{width:44px;height:44px;flex:0 0 44px;border-radius:10px;display:grid;place-items:center;font-size:1.15rem;color:#fff;transform:skewX(-6deg)}
.gc-icon i{transform:skewX(6deg)}
.gc-icon.red{background:linear-gradient(180deg,var(--red-light),var(--red-dark))}
.gc-icon.gold{background:linear-gradient(180deg,var(--gold),#c77b00);color:#241500}
.speed-swoosh{position:absolute;left:0;bottom:0;width:46%;height:26px;
  background:repeating-linear-gradient(180deg,var(--red) 0 4px,transparent 4px 9px);transform:skewY(-3deg);opacity:.85;
  clip-path:polygon(0 30%,100% 0,100% 55%,0 100%)}

/* ============ HERO v2 — slider styled like the mockup ============ */
.hero-visual{position:relative}
.hero-slide{aspect-ratio:4/3;overflow:hidden;position:relative}
.hero-slide img{width:100%;height:100%;object-fit:cover}
.carousel-item{position:relative}

/* slide label chip */
.slide-chip{position:absolute;top:14px;right:14px;z-index:5;background:rgba(14,14,18,.72);
  backdrop-filter:blur(8px);border-left:3px solid var(--red);color:#fff;
  font-family:var(--font-head);font-style:italic;font-weight:700;text-transform:uppercase;
  letter-spacing:1.5px;font-size:.8rem;padding:.42rem .85rem;border-radius:4px}

/* indicators = skewed red dashes, bottom-left */
.hero-dots{bottom:16px;left:18px;right:auto;justify-content:flex-start;margin:0;gap:7px;z-index:6}
.hero-dots [data-bs-target]{box-sizing:border-box;width:26px;height:4px;border-radius:2px;border:none;
  background:rgba(255,255,255,.35);opacity:1;transform:skewX(-12deg);transition:.3s;margin:0}
.hero-dots .active{background:var(--red);width:36px;box-shadow:0 0 12px rgba(200,16,46,.8)}

/* arrows = round glass buttons, bottom-right */
.hero-arrow{position:absolute;bottom:14px;top:auto;width:44px;height:44px;border-radius:50%;
  background:rgba(14,14,18,.65);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px);opacity:1;transition:.3s}
.hero-arrow i{color:#fff;font-size:1.1rem}
.hero-arrow:hover{background:var(--red);border-color:var(--red)}
.carousel-control-prev.hero-arrow{left:auto;right:72px}
.carousel-control-next.hero-arrow{right:16px}

/* glass cards float OVER the slider's left edge, staggered (mockup look) */
.hero-cards{position:absolute;left:-3.2rem;top:50%;transform:translateY(-50%);
  width:min(340px,86%);display:flex;flex-direction:column;gap:1rem;z-index:7}
.hero-cards .glass-card:nth-child(1){margin-left:3.2rem;animation:cardIn .7s .2s ease backwards}
.hero-cards .glass-card:nth-child(2){animation:cardIn .7s .35s ease backwards}
.hero-cards .glass-card:nth-child(3){margin-left:1.6rem;animation:cardIn .7s .5s ease backwards}
@keyframes cardIn{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}

/* brushed-metal icon strip under hero */
.hero-strip{background:linear-gradient(180deg,#f8f9fa 0%,#d7dade 25%,#9aa0a8 55%,#e8eaed 75%,#b9bec6 100%);
  padding:.85rem 0;box-shadow:inset 0 2px 6px rgba(0,0,0,.28);position:relative;z-index:3}
.strip-track{gap:2.4rem}
.strip-icon{font-size:1.45rem;color:#4b5058!important;text-shadow:0 1px 0 #fff}
.strip-icon.gold{color:#a97a10!important}

/* mobile: cards stack neatly under the slider */
@media (max-width:991.98px){
  .hero-cards{position:static;transform:none;width:auto;margin-top:1.2rem;flex-direction:row;flex-wrap:wrap}
  .hero-cards .glass-card{flex:1 1 240px;margin-left:0!important;animation:none}
  .hero-slide{aspect-ratio:16/10}
  .carousel-control-prev.hero-arrow{right:68px}
}

/* ============ HERO v3 — SWIPER slider (mockup design) ============ */
.hero-visual{position:relative}

/* slider frame */
.hero-slider{border-radius:1.2rem;overflow:hidden;aspect-ratio:4/3;background:#101014;
  box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.07)}
.hero-slider .swiper-slide{position:relative;overflow:hidden}
.hero-slider .hero-slide{width:100%;height:100%;aspect-ratio:auto;overflow:hidden}
.hero-slider .hero-slide img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);transition:transform 7s linear}           /* Ken-Burns base */
.hero-slider .swiper-slide-active .hero-slide img{transform:scale(1.12)} /* slow zoom while active */

/* slide label chip */
.slide-chip{position:absolute;top:14px;right:14px;z-index:5;background:rgba(14,14,18,.72);
  backdrop-filter:blur(8px);border-left:3px solid var(--red);color:#fff;
  font-family:var(--font-head);font-style:italic;font-weight:700;text-transform:uppercase;
  letter-spacing:1.5px;font-size:.8rem;padding:.42rem .85rem;border-radius:4px}

/* pagination = skewed red dashes, bottom-left */
.hero-slider .swiper-pagination{bottom:16px;left:18px;right:auto;width:auto;text-align:left}
.hero-slider .swiper-pagination-bullet{width:26px;height:4px;border-radius:2px;
  background:rgba(255,255,255,.35);opacity:1;transform:skewX(-12deg);transition:.3s;margin:0 3px!important}
.hero-slider .swiper-pagination-bullet-active{background:var(--red);width:36px;
  box-shadow:0 0 12px rgba(200,16,46,.8)}

/* round glass arrows, bottom-right */
.hero-nav{position:absolute;bottom:14px;right:16px;display:flex;gap:10px;z-index:8}
.hero-nav .hero-arrow{position:static;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.16);background:rgba(14,14,18,.65);
  backdrop-filter:blur(8px);color:#fff;display:grid;place-items:center;transition:.3s}
.hero-nav .hero-arrow i{font-size:1.1rem}
.hero-nav .hero-arrow:hover{background:var(--red);border-color:var(--red);transform:translateY(-2px)}
.hero-nav .hero-arrow.swiper-button-disabled{opacity:.4;pointer-events:none}

/* glass cards floating over slider's left edge (staggered, animated in) */
.hero-cards{position:absolute;left:-3.2rem;top:50%;transform:translateY(-50%);
  width:min(340px,86%);display:flex;flex-direction:column;gap:1rem;z-index:7}
.hero-cards .glass-card:nth-child(1){margin-left:3.2rem;animation:cardIn .7s .2s ease backwards}
.hero-cards .glass-card:nth-child(2){animation:cardIn .7s .35s ease backwards}
.hero-cards .glass-card:nth-child(3){margin-left:1.6rem;animation:cardIn .7s .5s ease backwards}
@keyframes cardIn{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}

/* brushed-metal icon strip under hero */
.hero-strip{background:linear-gradient(180deg,#f8f9fa 0%,#d7dade 25%,#9aa0a8 55%,#e8eaed 75%,#b9bec6 100%);
  padding:.85rem 0;box-shadow:inset 0 2px 6px rgba(0,0,0,.28);position:relative;z-index:3}
.strip-track{gap:2.4rem}
.strip-icon{font-size:1.45rem;color:#4b5058!important;text-shadow:0 1px 0 #fff}
.strip-icon.gold{color:#a97a10!important}

/* mobile: cards stack under slider */
@media (max-width:991.98px){
  .hero-slider{aspect-ratio:16/10}
  .hero-cards{position:static;transform:none;width:auto;margin-top:1.2rem;flex-direction:row;flex-wrap:wrap}
  .hero-cards .glass-card{flex:1 1 240px;margin-left:0!important;animation:none}
  .hero-nav{right:12px;bottom:12px}
  .hero-nav .hero-arrow{width:38px;height:38px}
}

/* ---------- Brand marquee ---------- */
.brand-strip{background:linear-gradient(180deg,#f8f9fa 0%,#d7dade 25%,#9aa0a8 55%,#e8eaed 75%,#b9bec6 100%);
  padding:1rem 0;box-shadow:inset 0 2px 6px rgba(0,0,0,.25)}
.strip-label{font-family:var(--font-01);font-style:italic;font-weight:800;text-transform:uppercase;letter-spacing:2px;color:#3d4148;white-space:nowrap;font-size:.95rem}
.marquee-track{display:flex;align-items:center;gap:3rem;width:max-content;animation:marquee 26s linear infinite;padding:.2rem 0}
.marquee:hover .marquee-track{animation-play-state:paused}
.brand-item{font-family:var(--font-01);font-style:italic;font-weight:800;font-size:1.5rem;text-transform:uppercase;
  letter-spacing:1px;color:#4b5058;text-shadow:0 1px 0 #fff;white-space:nowrap}
.diamond{color:var(--red)!important;font-size:.6rem}
@keyframes marquee{to{transform:translateX(-50%)}}