/* ===== CTA BRAND (light) ===== */
#cta-brand.cta--light{
  background:#fff; color:#000;
  position:relative;
  isolation:isolate;
}

#cta-brand .cta-inner{
  min-height: 92svh;                 /* pe desktop ocupă aproape tot ecranul */
  width: min(1400px, 92vw);
  margin: 0 auto;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: clamp(20px, 6vh, 64px);
}

/* Headline centrat, rânduri cu gap mic */
#cta-brand .cta-headline{
  margin: 0;
  display: grid;
  gap: clamp(6px, 1.4vw, 14px);
  line-height: .95;
  width: 100%;
  justify-items: center;            /* centrează fiecare rând */
}
#cta-brand .row{
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  white-space: nowrap;
}

/* fonturi */
#cta-brand .s{
  font-family:"Inter", system-ui, sans-serif;
  font-weight:900;
  letter-spacing:-.01em;
  font-size: clamp(26px, 7.6vw, 120px);
}
#cta-brand .r{
  font-family:"Playfair Display", Georgia, serif;
  font-weight:800;
  letter-spacing:-.01em;
  font-size: clamp(28px, 8.2vw, 126px);
}

/* ===== Mobile: spațiu mai mic, fără full-height forțat ===== */
@media (max-width:768px){
  #cta-brand .cta-inner{
    min-height:auto;
    padding-block: clamp(12px, 4vh, 28px);
  }
  #cta-brand .s{ font-size: clamp(22px, 9vw, 44px); }
  #cta-brand .r{ font-size: clamp(24px, 9.6vw, 48px); }
}


/* Link negru, bară animată la hover */
#cta-brand .cta-start{
  position: relative;
  color: #000;                     /* text negru */
  text-decoration: none;           /* fără subliniere clasică */
}

#cta-brand .cta-start::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.25em;
  height: 2px;
  background: currentColor;        /* folosește culoarea textului => negru */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s ease;
}

#cta-brand .cta-start:hover,
#cta-brand .cta-start:focus-visible{
  color: #000;                     /* rămâne negru la hover */
}

#cta-brand .cta-start:hover::after,
#cta-brand .cta-start:focus-visible::after{
  transform: scaleX(1);            /* bara crește stânga -> dreapta */
}


@media (max-width: 768px){
  #cta-brand .cta-action{
    display: none !important;
  }
}