/* Hero — unified with site dark theme and gold accent */

:root{
  --hero-gap:24px;
  --hero-max-w:1180px;
  --hero-radius:12px;
  --hero-shadow: var(--shadow, 0 14px 36px rgba(0,0,0,.45));
  --hero-accent: var(--gold, #c082d7);
}

/* container */
.hero{padding:28px 12px;color:var(--ivory);}
.hero .container{max-width:var(--hero-max-w);margin:0 auto;padding:0 16px;}

/* layout */
.hero-inner{display:grid;gap:var(--hero-gap);grid-template-columns:1fr;align-items:center;}

/* text column */
.hero-col{display:flex;align-items:center;justify-content:center;padding:6px 0;}
.hero-content{width:100%;max-width:820px;}
.hero-content h1{margin:0 0 12px 0;font-size:clamp(22px,4.8vw,56px);line-height:1.02;font-weight:800;}
.hero-content p{margin:0 0 18px 0;font-size:clamp(14px,2.2vw,18px);color:#ddd6c6;}

/* CTA — scoped to hero to avoid global overrides */
.hero .cta-buttons{display:flex;gap:12px;flex-wrap:wrap;}
.hero .btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border-radius:999px;text-decoration:none;font-weight:700;min-height:44px;box-sizing:border-box;
}
.hero .btn-primary{background:var(--hero-accent);color:#07101a;box-shadow:0 10px 20px rgba(212,175,55,.26);}
.hero .btn-primary:hover{transform:translateY(-2px);}
.hero .btn-secondary{background:transparent;color:var(--ivory);border:1px solid #3b3b3d;}
.hero .btn-secondary:hover{border-color:var(--hero-accent);color:var(--hero-accent);}

/* media box */
.hero-box{width:100%;display:flex;justify-content:center;align-items:center;padding:6px 0;box-sizing:border-box;}
.hero-3d{
  width:100%;border-radius:var(--hero-radius);overflow:hidden;position:relative;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  box-shadow:var(--hero-shadow);transition:transform .24s ease,box-shadow .24s ease;
  min-height:clamp(220px,32vw,520px);
}

/* product host */
.product-3d,#hero-canvas{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block!important;
}

/* fallback image */
.hero-3d img{width:100%;height:100%;object-fit:cover;display:block;}

/* larger screens */
@media(min-width:720px){
  .hero-inner{grid-template-columns:1fr minmax(360px,44%);gap:28px;align-items:center;}
  .hero-content{text-align:left;padding-right:12px;}
}

/* very large */
@media(min-width:1100px){
  .hero-inner{grid-template-columns:1fr minmax(460px,46%);gap:36px;}
  .hero-3d{min-height:520px;}
}

/* small screens */
@media(max-width:719px){
  .hero-content{text-align:center;}
  .hero .cta-buttons{justify-content:center;}
  .hero-3d{min-height:260px;border-radius:10px;}
}

/* reduced motion */
@media(prefers-reduced-motion:reduce){.hero-3d{transition:none;transform:none;}}
.hero .cta-buttons .btn{z-index:5;position:relative;}
.product-3d canvas{width:100%!important;height:100%!important;display:block!important;}
/* move the 3D box slightly left on wider screens */
@media (min-width:768px){
  .hero-3d{
    transform: translate(calc(-1 * min(28px, 3vw)), -50%);
  }
}