:root{
  --bg:#06070a;
  --text:#f6f3e8;
  --muted:#cfc9bb;
  --glow:#f5e9c8;         /* kremowy glow */
  --cta:#f5e9c8;
  --cta-text:#0c0c0f;
  --ring:rgba(245,233,200,.35);
  --maxw:1400px;
}

/* reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  overflow:hidden;
}

.hero{ position:relative; width:100%; height:100svh; }

/* TŁO — podmień plik na swoje tło: bg_mmm_execute.jpg */
.bg{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 80% 10%, rgba(255,236,190,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.72)),
    url('bg_mmm_execute.jpg') center/cover no-repeat;
  z-index:-3;
  filter:saturate(1.05) contrast(1.05);
}


@keyframes twinkle{
  0%, 100% { transform:translate3d(0,0,0); }
  50%      { transform:translate3d(.4rem,-.3rem,0); }
}

/* delikatny grain */
.grain{
  position:absolute; inset:-40%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0 .06 0'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.55; mix-blend-mode:soft-light; pointer-events:none; z-index:-1;
}

.content{
  position:absolute;
  top:28%;
  left:50%;
  transform:translateX(-50%);
  text-align:center;
  width:min(92vw, var(--maxw));
  padding:0 2rem;
}

/* Tytuł z pulsującym glow */
.title{
  font-family:Montserrat,Inter,sans-serif;
  font-weight:900;
  letter-spacing:.035em;
  margin:0 0 42px;
  font-size:clamp(46px, 10vw, 160px);
  line-height:1;
  text-transform:uppercase;
  color:var(--glow);
  text-shadow:0 0 18px rgba(245,233,200,.42), 0 8px 30px rgba(0,0,0,.7);
  animation: titleGlow 4.5s ease-in-out infinite;
}
.title .accent{ filter:brightness(1.12); }

@keyframes titleGlow{
  0%,100% { text-shadow:0 0 14px rgba(245,233,200,.35), 0 8px 30px rgba(0,0,0,.7); }
  50%     { text-shadow:0 0 28px rgba(245,233,200,.6), 0 10px 36px rgba(0,0,0,.75); }
}

/* CTA z przyjemnym hoverem */
.cta{
  display:inline-block;
  margin-top:4px;
  padding:18px 44px;
  border-radius:999px;
  background:var(--cta);
  color:var(--cta-text);
  font-weight:900;
  letter-spacing:.06em;
  text-decoration:none;
  box-shadow:0 12px 36px var(--ring), inset 0 -2px 0 rgba(0,0,0,.25);
  transform:translateZ(0);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.cta:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 20px 54px var(--ring), inset 0 -2px 0 rgba(0,0,0,.3);
  filter:saturate(1.02);
}
.cta:active{ transform:translateY(0) scale(0.995); }

.price-note{
  margin:14px 0 0;
  color:var(--muted);
  font-size:1rem;
  opacity:.95;
}

/* Stopka w rogach */
.footer{
  position:absolute; left:0; right:0; bottom:18px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 24px;
  font-size:.98rem; color:var(--muted);
  pointer-events:none; /* nie zasłania CTA */
}
.footer a{ color:var(--muted); text-decoration:none; pointer-events:auto; }
.footer a:hover{ text-decoration:underline; }
.footer-left{ position:absolute; left:24px; bottom:0; }
.footer-right{ position:absolute; right:24px; bottom:0; }

/* Responsywność */
@media (max-width: 900px){
  .content{ top:24%; }
  .title{ font-size:clamp(40px, 12vw, 120px); margin-bottom:30px; }
  .footer{ font-size:.9rem; }
  .footer-left{ left:16px; }
  .footer-right{ right:16px; }
}

/* Szacunek dla preferencji użytkownika */
@media (prefers-reduced-motion: reduce){
  .stars, .title{ animation:none !important; }
}
/* --- MOBILE TWEAKS --- */
@media (max-width: 900px){
  /* pozwól przewijać na małych ekranach – bez przycinania */
  body{ overflow:auto; }

  /* użyj dynamicznej wysokości (adres bar na iOS/Android) gdy dostępna */
  @supports (height: 100dvh){
    .hero{ height:100dvh; }
  }

  .content{
    top:22%;
    padding:0 1rem;
    width:min(94vw, var(--maxw));
  }

  /* mniejszy, gęstszy tytuł + mniej letter-spacing */
  .title{
    font-size:clamp(34px, 11vw, 68px);
    letter-spacing:.02em;
    line-height:1.06;
    margin-bottom:26px;
  }

  /* CTA: duży tap-target, ale węższe marginesy; działa też jako full‑width, gdy mało miejsca */
  .cta{
    display:inline-flex;
    align-items:center; justify-content:center;
    padding:14px 28px;
    font-size:0.96rem;
    min-height:48px;            /* wygodny tap target */
    min-width:min(260px, 86vw); /* na wąskich ekranach rozciąga się */
    box-shadow:0 12px 32px var(--ring), inset 0 -2px 0 rgba(0,0,0,.25);
  }

  .price-note{
    font-size:.95rem;
    margin-top:10px;
  }

  /* stopka nie będzie zachodzić na CTA i respektuje „notcha” */
  .footer{
    position:fixed;
    left:0; right:0;
    bottom:calc(10px + env(safe-area-inset-bottom, 0px));
    padding:0 14px;
    gap:10px;
    flex-wrap:wrap;
    justify-content:space-between;
    pointer-events:none; /* dalej nie zasłania CTA */
  }
  .footer a{ pointer-events:auto; }
  .footer-left, .footer-right{
    position:static; /* zdejmujemy absolute, żeby ładnie się łamało */
  }
}

/* ultra‑wąskie telefony */
@media (max-width: 400px){
  .content{ top:20%; }
  .title{ font-size:clamp(30px, 12vw, 58px); }
  .cta{ min-width:82vw; padding:12px 22px; }
}

/* gdy użytkownik woli mniej ruchu – całość już uwzględniona, dopinamy CTA */
@media (prefers-reduced-motion: reduce){
  .cta{ transition:none; }
}