/* v2.9.6 hero/header refinement */
:root{
  --hero-x:50%;
  --hero-y:30%;
}

.site-header{
  border-bottom:1px solid rgba(255,255,255,.1);
  box-shadow:0 18px 50px rgba(2,8,21,.18);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.site-header .brand{
  letter-spacing:-.02em;
}

.brand-mark{
  box-shadow:0 12px 30px rgba(24,168,255,.22), inset 0 1px 0 rgba(255,255,255,.28);
}

.site-header nav a:first-child{
  background:rgba(255,255,255,.1);
  color:#fff;
}

.store-hero{
  isolation:isolate;
}

.store-hero::before{
  content:"";
  position:absolute;
  inset:0 calc(50% - 50vw);
  z-index:-2;
  background:
    radial-gradient(circle at var(--hero-x) var(--hero-y), rgba(24,168,255,.2), transparent 26rem),
    linear-gradient(120deg, rgba(0,163,122,.12), transparent 42%),
    linear-gradient(300deg, rgba(255,122,26,.1), transparent 44%);
  pointer-events:none;
}

.store-hero::after{
  content:"";
  position:absolute;
  inset:clamp(28px,5vw,70px) calc(50% - 50vw);
  z-index:-1;
  background-image:
    linear-gradient(rgba(0,99,154,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,99,154,.12) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(circle at 50% 32%, #000 0 16%, transparent 58%);
  opacity:.45;
  pointer-events:none;
}

.hero-copy{
  position:relative;
}

.hero-copy h1{
  max-width:13ch;
  text-wrap:balance;
}

.hero-copy>p:not(.eyebrow){
  max-width:860px;
  font-size:clamp(1rem,1.35vw,1.18rem);
}

.hero-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:28px;
  max-width:760px;
}

.hero-metric{
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.5);
  box-shadow:0 14px 34px rgba(14,24,38,.08);
}

html[data-vensco-theme=dark] .hero-metric{
  background:rgba(255,255,255,.06);
}

.hero-metric strong{
  display:block;
  font-size:1.2rem;
  color:var(--text);
}

.hero-metric span{
  color:var(--muted);
  font-size:.86rem;
}

.floating-card{
  border-left:0;
  border-radius:18px;
  background:linear-gradient(145deg, rgba(2,8,21,.9), rgba(0,99,154,.74));
  box-shadow:0 26px 70px rgba(2,8,21,.25);
}

html[data-vensco-lang=ar] .floating-card{
  border-right:4px solid var(--gold);
}

html[data-vensco-lang=en] .floating-card{
  border-left:4px solid var(--gold);
}

.floating-card::after{
  content:"";
  position:absolute;
  inset:auto 14px 14px auto;
  width:54px;
  height:54px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(24,168,255,.7), transparent 64%);
  filter:blur(2px);
  opacity:.8;
}

.hero-actions .btn{
  min-width:180px;
}

@media(max-width:900px){
  .hero-copy h1{
    max-width:10ch;
    margin-inline:auto;
  }

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

/* v2.9.7 logo + AI hero image */
.brand-logo img{display:block;width:clamp(138px,15vw,220px);max-height:72px;object-fit:contain;filter:drop-shadow(0 10px 22px rgba(0,0,0,.22))}
.floating-card{position:relative}
.hero-showcase{position:relative;display:grid;gap:18px;align-self:center}
.hero-image-card{position:relative;margin:0;padding:12px;border-radius:24px;overflow:hidden;transform:perspective(1200px) rotateY(-4deg) rotateX(2deg)}
html[data-vensco-lang=ar] .hero-image-card{transform:perspective(1200px) rotateY(4deg) rotateX(2deg)}
.hero-image-card::after{content:"";position:absolute;inset:12px;border-radius:18px;background:linear-gradient(135deg,rgba(24,168,255,.22),transparent 38%,rgba(255,122,26,.2));pointer-events:none}
.hero-image-card img{display:block;width:100%;min-height:320px;aspect-ratio:4/3;object-fit:cover;border-radius:18px}
@media(max-width:900px){.brand-logo img{width:150px;max-height:58px}.hero-showcase{max-width:360px;margin-inline:auto}.hero-image-card{transform:none!important}.hero-image-card img{min-height:230px}}