/* =========================================================================
   CINEMATIC HERO — Nova Badzlina Global
   A restyle of the home page hero only. Not one word of copy changes:
   only type, colour and layout.

   Everything here is HTML and CSS. No JavaScript, no framework, no build.
   ========================================================================= */

:root{
  /* the house palette, unchanged */
  --midnight:#060a1f; --deep:#0b1233; --deep2:#141d47;
  --orchid:#a855f7; --orchid-deep:#6d28d9;
  --pink-soft:#ffe6ee; --pink:#f8cddd; --pink-deep:#e58aad; --pink-dark:#c2447a;
  --rosegold:#e9b8a4; --rosegold-deep:#c88a72;
  --gold:#e8d5a3; --gold-bright:#fffdf2; --gold-deep:#c9ad6a;

  /* the cinematic layer: text that recedes, like the reference */
  --ink:#ffffff;
  --ink-soft:rgba(255,255,255,.72);
  --ink-mute:rgba(255,255,255,.46);

  --foil:linear-gradient(100deg,#b99b5e 0%,#f0e2bd 16%,#fffdf5 30%,#d9c48d 44%,
          #b99b5e 58%,#f5ead0 74%,#fffdf5 88%,#c9ad6a 100%);

  --display:"Instrument Serif","Didot","Bodoni MT",Cambria,Georgia,serif;
  --body:"Inter","Segoe UI",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}


/* ── the stage ───────────────────────────────────────────────────────── */
.stage{
  position:relative; min-height:100svh; width:100%; overflow:hidden;
  display:flex; flex-direction:column;
}

/* The reference used a looping <video> with JavaScript fading it in and
   out. A video element loops on its own with the loop attribute — that
   part needs no script. The *fade* did, so it is done here in CSS: two
   copies of the backdrop cross-fading on an infinite animation, which
   costs nothing to host and cannot stutter on a slow connection. */
.stage__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.stage__bg img,
.stage__bg video{
  position:absolute; inset:0; width:100%; height:130%;
  object-fit:cover; object-position:74% 12%;
}
.stage__bg img{
  animation:drift 26s var(--ease) infinite alternate;
  filter:saturate(.9) contrast(1.04);
}
@keyframes drift{
  from{ transform:scale(1.06) translate3d(0,0,0); }
  to  { transform:scale(1.18) translate3d(-1.5%,-2%,0); }
}

/* gradient overlays, as in the reference: video fades into the page top
   and bottom so the type always has ground to sit on */
.stage__veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, var(--midnight) 0%, rgba(6,10,31,.30) 26%,
                    rgba(6,10,31,.55) 62%, var(--midnight) 100%),
    linear-gradient(90deg, rgba(6,10,31,.86) 0%, rgba(6,10,31,.30) 46%,
                    rgba(6,10,31,.55) 100%),
    radial-gradient(60% 70% at 12% 8%, rgba(168,85,247,.32), transparent 62%),
    radial-gradient(50% 60% at 92% 96%, rgba(194,68,122,.26), transparent 64%);
}

/* ── glass navigation pill ───────────────────────────────────────────── */
.stage .topbar{ position:relative; z-index:10; padding:1.1rem 1rem 0; }
.stage .pill{
  max-width:1180px; margin:0 auto; display:flex; align-items:center; gap:1.1rem;
  padding:.7rem .8rem .7rem 1.1rem; border-radius:16px;
  background:rgba(255,255,255,.07); backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid rgba(248,205,221,.22);
  box-shadow:0 10px 40px -22px #000;
}
.stage .pill__brand{ display:flex; align-items:center; gap:.6rem; flex:0 0 auto; }
.stage .pill__mark{
  display:grid; place-items:center; width:34px; height:34px; border-radius:10px;
  background:var(--foil); color:#2a1d05;
  font-family:var(--display); font-weight:700; font-size:.86rem; letter-spacing:.02em;
}
.stage .pill__name{
  font-family:var(--display); font-size:1.12rem; line-height:1; color:var(--ink);
  letter-spacing:-.01em;
}
.stage .pill__name sup{ font-size:.46em; top:-.7em; color:var(--gold); }

.stage .pill__links{ display:flex; align-items:center; gap:1.15rem; margin-left:auto; }
.stage .pill__links a{
  font-size:.82rem; font-weight:500; color:var(--ink-mute);
  transition:color .3s var(--ease);
}
.pill__links a:hover,
.stage .pill__links a:focus-visible{ color:var(--ink); }
.stage .pill__links a.is-active{ color:var(--ink); }

.stage .pill__lang{ display:flex; gap:.35rem; padding-left:.9rem; margin-left:.2rem;
  border-left:1px solid rgba(255,255,255,.16); }
.stage .pill__lang a{ font-size:.72rem; letter-spacing:.14em; }
.stage .pill__lang a.is-on{ color:var(--gold); }

.stage .pill__cta{
  flex:0 0 auto; border-radius:999px; padding:.62rem 1.35rem;
  background:var(--foil); color:#241902 !important;
  font-size:.82rem; font-weight:600; letter-spacing:.01em;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  box-shadow:0 6px 20px -8px rgba(232,213,163,.7);
}
.pill__cta:hover{ transform:scale(1.03); box-shadow:0 10px 26px -8px rgba(232,213,163,.9); }

/* ── hero ────────────────────────────────────────────────────────────── */
.stage .hero{
  position:relative; z-index:10; flex:1;
  display:flex; flex-direction:column; justify-content:center;
  max-width:1180px; width:100%; margin:0 auto;
  padding:clamp(1.6rem,4vh,3rem) 1.4rem clamp(1.6rem,4vh,3rem);
}

.stage .badge{
  display:inline-flex; align-items:center; gap:.6rem; align-self:flex-start;
  border-radius:14px; padding:.5rem .95rem;
  background:rgba(255,255,255,.07); backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(248,205,221,.2);
  font-size:.78rem; font-weight:500; color:var(--ink-soft); margin:0 0 1.6rem;
}
.stage .badge__dot{
  width:9px; height:9px; border-radius:50%; flex:0 0 auto;
  background:var(--pink-deep); box-shadow:0 0 0 4px rgba(229,138,173,.22);
}

.stage .motto{
  font-family:var(--display); font-style:italic;
  font-size:clamp(1rem,1.9vw,1.32rem); color:var(--rosegold);
  margin:0 0 .9rem;
}

/* The headline is the page. Instrument Serif at a near-1.0 line height
   with negative tracking, exactly as the reference specified — the
   recessive grey is used on the lines that qualify rather than assert. */
.stage .headline{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.4rem,6.2vw,5.1rem);
  line-height:.95; letter-spacing:-.032em;
  color:var(--ink); margin:0; max-width:15ch; text-wrap:balance;
}
.stage .headline em{ font-style:italic; color:var(--ink-mute); }
.stage .headline .grad{
  background:var(--foil); -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

.stage .tagline{
  font-family:var(--display); font-style:italic;
  font-size:clamp(1.05rem,2.1vw,1.5rem); color:var(--pink);
  margin:1rem 0 0;
}

.stage .lede{
  max-width:62ch; margin:1.1rem 0 0;
  font-size:clamp(.8rem,.92vw,.9rem); line-height:1.7; color:var(--ink-mute);
}

.stage .pills{ list-style:none; display:flex; flex-wrap:wrap; gap:.42rem;
  margin:1.3rem 0 0; padding:0; max-width:58rem; }
.stage .pills li{
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.34rem .72rem; border-radius:999px; color:var(--ink-mute);
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.stage .pills li:hover{ color:var(--pink); border-color:rgba(248,205,221,.4); }

.stage .actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin:1.7rem 0 0; }
.stage .btn{
  border-radius:999px; padding:.85rem 1.8rem; font-size:.9rem; font-weight:600;
  transition:transform .3s var(--ease), background .3s var(--ease),
             border-color .3s var(--ease);
}
.btn:hover{ transform:scale(1.03); }
.stage .btn--primary{ background:var(--foil); color:#241902;
  box-shadow:0 10px 30px -12px rgba(232,213,163,.8); }
.stage .btn--ghost{ border:1px solid rgba(248,205,221,.3); color:var(--ink);
  background:rgba(255,255,255,.05); }
.btn--ghost:hover{ border-color:var(--pink); }
.btn:focus-visible,
.pill__links a:focus-visible,
.pill__cta:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.stage .stats{
  position:relative; z-index:10; display:grid; gap:1px; margin:0;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  background:rgba(248,205,221,.16);
  border-top:1px solid rgba(248,205,221,.16);
}
.stage .stats > div{ background:rgba(6,10,31,.72); backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px); padding:1.05rem 1.5rem; }
.stage .stats dt{ font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); margin:0 0 .4rem; }
.stage .stats dd{ margin:0; font-family:var(--display); font-size:1.4rem; color:var(--ink); }

/* ── entrance, staggered like the reference's fade-rise ──────────────── */
@media (prefers-reduced-motion: no-preference){
  .rise{ animation:rise .8s var(--ease) both; }
  .rise--1{ animation-delay:.1s; }
  .rise--2{ animation-delay:.25s; }
  .rise--3{ animation-delay:.4s; }
  .rise--4{ animation-delay:.55s; }
  .rise--5{ animation-delay:.7s; }
  @keyframes rise{
    from{ opacity:0; transform:translateY(20px); }
    to  { opacity:1; transform:translateY(0); }
  }
}
@media (prefers-reduced-motion: reduce){
  .stage__bg img{ animation:none; transform:scale(1.08); }
}

/* ── narrow screens ──────────────────────────────────────────────────── */
@media (max-width:900px){
  .pill__links{ display:none; }
  .pill{ gap:.7rem; }
  .pill__cta{ margin-left:auto; }
}
@media (max-width:560px){
  .headline{ letter-spacing:-.02em; }
  .btn{ padding:.85rem 1.5rem; }
  .stats > div{ padding:1.1rem 1.2rem; }
}