/* Layout: text stânga (centru vertical), spațiu dreapta */
.hero{ min-height:100svh; display:block; }
.hero-inner{
  min-height:100svh;
  display:grid;
  grid-template-columns: min(980px, 55vw) 1fr;
  gap:clamp(16px, 3vw, 36px);
  padding:
    calc(var(--navH, 64px) + clamp(48px, 5vw, 72px))
    clamp(16px, 4vw, 48px)
    clamp(48px, 5vw, 72px)
    clamp(16px, 4vw, 48px);
  position:relative;
  align-items:center;
}
@media (max-width: 1000px){
  .hero-inner{ grid-template-columns: 1fr; align-items:flex-start; }
}

.hero-left{ display:flex; flex-direction:column; justify-content:center; gap:16px; }
.headline{ display:grid; gap:0.12em; align-content:start; }
.row{ display:flex; align-items:flex-start; gap:0.8rem; }

.huge{ font-size:clamp(42px, 12vw, 160px); font-weight:800; letter-spacing:-0.04em; line-height:0.95; }
.serif{ font-weight:800; font-family:"Playfair Display", Georgia, "Times New Roman", serif; }

/* Wipe (cortină) pentru “ștergerea” pe rânduri la scroll */
.line-wrap{ position:relative; display:inline-block; }
.line-wrap .wipe{
  position:absolute; left:0; right:0; bottom:0; height:0%;
  background: var(--bg, #fff); /* în tema light = alb */
  will-change: height; pointer-events:none;
}

/* by TANIC în colțul dreapta-jos */
.bytag{
  position:absolute; right: clamp(16px, 4vw, 48px); bottom: clamp(16px, 3vw, 40px);
  display:flex; align-items:baseline; gap:8px; pointer-events:none;
  transform-origin: bottom right;
  z-index: 5; color: var(--fg);
}
.by{ font-size: clamp(14px, 1.2vw, 16px); opacity: 1; }
.tanic{
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 900; letter-spacing: .08em; line-height: 0.9;
  white-space: nowrap; /* un singur rând, chiar dacă iese în afara ecranului */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}
.n-letter{ display:inline-block; }

/* Mobile tweaks */
@media (max-width: 768px){
  .hero-inner{
    align-items:flex-start;
    padding:
      calc(var(--navH, 64px) + clamp(40px, 8vw, 64px) + env(safe-area-inset-top))
      clamp(16px, 5vw, 28px)
      clamp(48px, 8vw, 72px)
      clamp(16px, 5vw, 28px);
  }
  .headline{ gap: 0.2em; }
  .bytag{ z-index: 5; }
}