/* ============================================
   HERO SECTION
   ============================================ */
.hero {
  position:relative; min-height:580px;
  display:grid; grid-template-columns:1fr var(--hero-img-w, 460px);
  align-items:center; overflow:hidden; background:var(--c-p800);
  border-radius:24px; margin:0 24px;
}
.hero-bg {
  position:absolute; inset:0;
  background:linear-gradient(140deg, var(--c-p900) 0%, var(--c-p600) 45%, var(--c-p700) 100%);
}
.hero-bg::after {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 380px 380px at 15% 80%, color-mix(in srgb, var(--c-a500) 6%, transparent) 0%, transparent 65%),
    radial-gradient(ellipse 500px 400px at 70% 10%, color-mix(in srgb, var(--c-p500) 50%, transparent) 0%, transparent 60%);
}
.hero-letter {
  position:absolute; right:-10px; top:50%; transform:translateY(-50%);
  font-family:var(--fd); font-size:clamp(220px,26vw,400px);
  font-weight:400; font-style:italic; color:rgba(255,255,255,.018);
  line-height:1; pointer-events:none; user-select:none;
}
.hero-left {
  position:relative; z-index:2; padding:72px 40px 72px 56px;
  display:flex; flex-direction:column;
  /* min-width:0 keeps 1fr column from overflowing its grid track.
     No overflow:hidden — that was clipping translated h1 titles. */
  min-width:0;
}
.hero-over {
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.12em; color:var(--c-a500); margin-bottom:20px;
  display:flex; align-items:center; gap:10px;
}
.hero-over::before { content:''; width:28px; height:1px; background:var(--c-a500); }
.hero-h {
  font-family:var(--fd); font-size:clamp(32px,4.2vw,74px);
  font-weight:300; line-height:1.1; letter-spacing:-.03em; color:var(--txi);
  /* Allow long translated titles to wrap naturally onto multiple lines
     instead of overflowing into the image column */
  overflow-wrap:break-word;
  word-break:break-word;
  hyphens:auto;
  min-width:0;
}
.hero-h em { color:var(--c-a400); font-style:italic; }
.hero-sub {
  font-size:clamp(15px,1.2vw,18px); color:rgba(255,255,255,.6);
  line-height:1.6; margin-top:14px; max-width:520px;
}
.hero-proof {
  display:flex; align-items:center; gap:8px; margin-top:32px;
  font-size:13px; color:rgba(255,255,255,.4);
}
.hero-proof strong { color:rgba(255,255,255,.7); }
.hero__mobile-cta { display:none; }

/* ============================================
   HERO IMAGE (RIGHT COLUMN)
   ============================================ */
.hero-img {
  position:relative; z-index:3;
  margin:36px auto 36px var(--hero-img-pos, -48px);
  border-radius:20px; overflow:hidden;
  background:var(--hero-img-bg, rgba(255,255,255,.08));
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 28px 72px rgba(0,0,0,.38), 0 2px 8px rgba(0,0,0,.2);
  border:1px solid rgba(255,255,255,.12);
  aspect-ratio:4/5;
  display:flex; align-items:center; justify-content:center;
}
.hero-img img {
  max-width:100%; max-height:100%; object-fit:contain; display:block;
}
.hero-img-badge {
  position:absolute; bottom:20px; left:20px;
  background:color-mix(in srgb, var(--c-p800) 75%, transparent); backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12); border-radius:10px;
  padding:10px 16px; display:flex; flex-direction:column; gap:3px;
}
.hero-img-badge-over {
  font-size:9px; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; color:var(--c-a400);
}
.hero-img-badge-text {
  font-family:var(--fd); font-size:16px; font-weight:400; color:var(--txi); line-height:1.2;
}