/* Toate dimensiunile sunt in "unitati Figma" (cadru 1440px) inmultite cu --u,
   astfel pagina e full width si scaleaza proportional cu latimea ecranului. */
:root {
  --u: calc(100vw / 1440);
  --red: #e2001a;
  --dark: #0f1110;
  --white: #fff; }

*, *::before, *::after {
  box-sizing: border-box; }

body {
  margin: 0;
  background: var(--dark);
  color: var(--white);
  font-family: 'UniCredit', Arial, sans-serif;
  -webkit-font-smoothing: antialiased; }

h1, h2, p {
  margin: 0; }

img {
  display: block; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; }

.lp {
  overflow: hidden; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: calc(790 * var(--u));
  padding: calc(181 * var(--u)) 0 0 calc(121 * var(--u));
  background: #000 url("../images/top-bg.jpg") center top / calc(1440 * var(--u)) calc(800 * var(--u)) no-repeat; }
  .hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(156 * var(--u));
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--dark)); }
  .hero > * {
    position: relative;
    z-index: 1; }

.hero__title {
  font-weight: 400; }

.hero__line {
  display: block;
  white-space: nowrap; }

.hero__line--1,
.hero__line--2 {
  font-size: calc(96 * var(--u));
  line-height: calc(96 * var(--u)); }

.hero__line--2 {
  margin: calc(-4 * var(--u)) 0 0 calc(173 * var(--u)); }
  .hero__line--2 strong {
    font-weight: 900; }

.hero__line--3 {
  margin: calc(-3 * var(--u)) 0 0 calc(38 * var(--u));
  font-size: calc(128 * var(--u));
  line-height: calc(118 * var(--u));
  font-weight: 900;
  font-style: italic; }

.hero__pill {
  position: relative;
  width: calc(582 * var(--u));
  height: calc(62 * var(--u));
  margin-top: calc(49 * var(--u));
  background: url("../images/pill-bg.svg") 0 0 / 100% 100% no-repeat; }

.hero__pill-text {
  position: absolute;
  left: calc(59 * var(--u));
  top: calc(8 * var(--u));
  font-size: calc(38 * var(--u));
  line-height: calc(44 * var(--u));
  font-weight: 700;
  white-space: pre; }

.hero__pill-dividers {
  position: absolute;
  left: calc(161 * var(--u));
  top: calc(14 * var(--u));
  width: calc(147.5 * var(--u));
  height: calc(38 * var(--u)); }

.hero__date {
  display: flex;
  align-items: flex-start;
  margin-top: calc(17 * var(--u)); }
  .hero__date img {
    width: calc(105 * var(--u));
    height: calc(81 * var(--u)); }
  .hero__date p {
    margin: calc(27 * var(--u)) 0 0 calc(16 * var(--u));
    font-size: calc(50 * var(--u));
    line-height: calc(44 * var(--u));
    font-weight: 700;
    font-style: italic;
    white-space: nowrap; }

.hero__prize {
  display: none; }

/* ---------- Countdown ---------- */
.countdown {
  position: relative;
  height: calc(324 * var(--u));
  background: var(--dark); }

/* Imaginea e verticala in Figma si rotita 90deg; fereastra de 1440x454 incepe la y=790 */
.countdown__swoosh {
  position: absolute;
  inset: 0;
  overflow: hidden; }
  .countdown__swoosh img {
    position: absolute;
    left: calc(-1185.47 * var(--u));
    top: calc(-2824.53 * var(--u));
    width: calc(1296 * var(--u));
    height: calc(6297.06 * var(--u));
    max-width: none;
    object-fit: cover;
    transform: rotate(90deg); }

.countdown__title {
  position: relative;
  z-index: 2;
  top: calc(-23 * var(--u));
  font-size: calc(38 * var(--u));
  line-height: calc(26 * var(--u));
  font-weight: 500;
  text-align: center; }

.countdown__timer {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: calc(86 * var(--u));
  margin-top: calc(48 * var(--u));
  /* in Figma randul e centrat la x=707, nu la 720 */
  padding-right: calc(26 * var(--u)); }

.countdown__box {
  width: calc(128 * var(--u));
  height: calc(88.8 * var(--u));
  padding-top: calc(17.2 * var(--u));
  border: 0.8px solid var(--red);
  border-radius: calc(17 * var(--u));
  background: rgba(113, 113, 113, 0.36);
  -webkit-backdrop-filter: blur(11.25px);
  backdrop-filter: blur(11.25px);
  text-align: center; }

.countdown__value,
.countdown__label {
  display: block;
  line-height: calc(26 * var(--u)); }

.countdown__value {
  font-size: calc(50 * var(--u));
  font-weight: 900;
  font-variant-numeric: tabular-nums; }

.countdown__label {
  font-size: calc(22 * var(--u)); }

/* ---------- Mobil (nu exista in Figma - propunere) ---------- */
@media (max-width: 767px) {
  :root {
    --u: calc(100vw / 660); }
  .hero {
    height: auto;
    padding: calc(70 * var(--u)) 16px calc(90 * var(--u));
    /* premiul vine din mobile-prize.png, asa ca din KV aratam doar drumul */
    background-size: cover;
    background-position: 25% 100%; }
  .hero__prize {
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
    margin: calc(30 * var(--u)) auto 0; }
  .hero__line--2,
  .hero__line--3 {
    margin-left: 0; }
  .hero__line--3 {
    font-size: calc(84 * var(--u));
    line-height: calc(80 * var(--u));
    margin-top: calc(4 * var(--u)); }
  .hero__pill {
    margin-top: calc(36 * var(--u)); }
  .hero__date {
    margin-top: calc(24 * var(--u)); }
  .countdown {
    height: calc(240 * var(--u)); }
  .countdown__timer {
    gap: calc(16 * var(--u));
    padding-right: 0; } }