.fav-promo{
  --bg:#090A18;
  --pink:#ff2d87;
  --green:#1fd18d;
  --navy:#171a4a;
  --text:#ffffff;
  --muted:#c9cbe0;
  --card-border:rgba(255,255,255,.08);
  --font:"Roboto Condensed","Arial Narrow","Liberation Sans Narrow",Arial,sans-serif;
  background:var(--bg);color:var(--text);font-family:var(--font);
  -webkit-font-smoothing:antialiased;color-scheme:dark;
  text-align:left;line-height:normal;font-weight:400;
  text-transform:none;letter-spacing:normal;
}
.fav-promo,.fav-promo *,.fav-promo *::before,.fav-promo *::after{box-sizing:border-box}
/* protecție față de stilurile site-ului (font, majuscule, spațiere) */
.fav-promo *{font-family:inherit;text-transform:inherit;letter-spacing:inherit;line-height:inherit}
.fav-promo :where(h1,p,ol,li,summary,details){margin:0;padding:0;font-family:inherit}
.fav-promo :where(img){display:block;border:0}

/* ---------- page ---------- */
.fav-promo{
  position:relative;overflow:hidden;isolation:isolate;
  padding:36px 20px 80px;
}
.fav-promo__glow{
  position:absolute;z-index:-2;left:50%;top:0;
  width:1548px;max-width:none;transform:translateX(-50%);
  pointer-events:none;
}

.fav-promo__glow-mob{
  display:none;
  position:absolute;z-index:-2;top:0;left:50%;
  width:max(100%,375px);height:auto;max-width:none;
  transform:translateX(-50%);pointer-events:none;
}

/* fundalul se estompează singur (mască în imagine), fără overlay */
.fav-promo::before{display:none}

/* ---------- header ---------- */
.fav-hero{text-align:center}
.fav-hero__title{
  font-weight:900;font-size:62px;line-height:1;letter-spacing:-.5px;text-transform:uppercase;    font-family: 'FB-Display';

}
.fav-hero__title span{color:var(--pink);display:inline-block}
.fav-hero__sub{
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  margin-top:40px;font-size:18px;color:var(--muted);
}
.fav-tag{
  display:inline-flex;align-items:center;justify-content:center;
  width:146px;height:28px;padding-top:1px;
  background:url("https://www.favbet.ro/minio/new-promo/mobile-app/fs.png") center/100% 100% no-repeat;color:#fff;
  font-weight:900;font-size:19px;letter-spacing:.3px;text-transform:uppercase;
}
.fav-tag b{font-weight:900;    font-family: 'FB-Display';
}

/* ---------- stage (desktop: cards | phone | cards) ---------- */
.fav-stage{
  position:relative;max-width:808px;margin:50px auto 0;
  display:grid;grid-template-columns:1fr 208px 1fr;column-gap:16px;align-items:start;
}
.fav-steps{display:flex;flex-direction:column;gap:18px;list-style:none;position:relative;z-index:3}
.fav-steps--left{grid-column:1;grid-row:1}
.fav-steps--right{grid-column:3;grid-row:1}
.fav-step{
  display:flex;align-items:center;gap:30px;min-height:87px;padding:12px 20px 12px 36px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
  border:1px solid var(--card-border);border-radius:6px;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.fav-step__num{
  flex:0 0 32px;text-align:center;color:var(--pink);
  font-weight:400;font-size:62px;line-height:.9;
}
.fav-step__text{font-weight:500;font-size:18px;line-height:1.22;white-space:nowrap}

.fav-phone{grid-column:2;grid-row:1 / span 2;position:relative;z-index:2;margin:-10px 0 -70px}
.fav-phone__inner{position:relative;width:169%;margin-left:-20.2%}
.fav-phone__img{width:100%;height:auto}

.fav-deco{position:absolute;pointer-events:none;z-index:3}
.fav-deco--crown{width:80px;left:118px;top:292px}
.fav-deco--thunder{width:52px;right:128px;top:252px}

/* ---------- CTA with pulse effect (from the CodePen) ---------- */
@keyframes fav-shadow-pulse{
  0%  {box-shadow:0 0 0 0 rgba(31,209,141,.55)}
  100%{box-shadow:0 0 7px 25px rgba(31,209,141,0)}
}
.fav-cta{
  position:absolute;left:41.5%;top:62.5%;
  width:36%;padding:12px 0 11px;
  transform:translate(-50%,-50%) rotate(5deg);
  background:var(--green);color: #000055;
  font-family:var(--font);font-weight:800;font-size:15px;letter-spacing:.2px;
  text-transform:uppercase;text-align:center;text-decoration:none;white-space:nowrap;
  border-radius:5px;border:0;cursor:pointer;
  animation:fav-shadow-pulse 1.5s infinite;
  transition:background-color .2s,filter .2s;
}
.fav-cta:hover{background:#2fe39e}
.fav-cta:active{filter:brightness(.92)}
.fav-cta:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* ---------- footnote, badges, terms ---------- */
.fav-note{
  text-align:center;color:var(--muted);font-size:18px;line-height:1.5;margin-top:66px;
}
.fav-note em{font-style:normal;color:var(--pink)}
.fav-stores{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.fav-store{
  display:flex;align-items:center;gap:8px;height:36px;padding:0 12px 0 10px;
  background:#000;color:#fff;text-decoration:none;
  border:1px solid #a6a6a6;border-radius:7px;min-width:118px;
}
.fav-store img{width:auto;height:20px}
.fav-store small{display:block;font-size:8px;line-height:1;letter-spacing:.2px;font-family:Arial,sans-serif}
.fav-store strong{display:block;font-size:16px;line-height:1.05;font-weight:500;font-family:Arial,sans-serif;letter-spacing:-.2px}
.fav-store:focus-visible{outline:2px solid #fff;outline-offset:2px}

.fav-terms{max-width:514px;margin:53px auto 0}
.fav-terms summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  padding:8px 0;font-weight:700;font-size:18px;color:#d3d9ea;
  border-bottom:1px solid #2c2c3f;
}
.fav-terms summary::-webkit-details-marker{display:none}
.fav-terms summary::after{
  content: "";
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M10.8928 4.5573C11.2182 4.26178 11.2182 3.75011 10.8928 3.45459C10.6088 3.19675 10.1755 3.19675 9.8915 3.45459L6.67223 6.37771C6.29094 6.72393 5.70906 6.72393 5.32777 6.37771L2.1085 3.45459C1.82453 3.19675 1.39118 3.19675 1.10722 3.45459C0.781751 3.75011 0.781751 4.26178 1.10722 4.5573L4.89214 7.99405L5.32777 8.38961C5.70906 8.73582 6.29094 8.73582 6.67223 8.3896L7.10786 7.99405L10.8928 4.5573Z' fill='%23D3D9EA'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .25s;
}
.fav-terms[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.fav-terms summary:focus-visible{outline:2px solid #fff;outline-offset:2px}
.fav-terms__body{padding:14px 0 16px;font-size:16px;line-height:1.6;color:#d3d9ea}
.fav-terms__body ol{padding-left:18px;display:grid;gap:6px}

/* ---------- mobile ---------- */
@media (max-width:860px){
  .fav-promo{padding:28px 16px 48px}
  .fav-promo::before{display:none}
  .fav-promo__glow{display:none}
  .fav-promo__glow-mob{display:block}
  .fav-hero__title{line-height:1.05;font-size:50px}

.fav-phone__inner {
      width: 400px;
    margin-left: -87.2%;
}
  .fav-hero__title span{display:block}
  .fav-hero__sub{flex-direction:column;gap:8px;margin-top:10px;font-size: 17px;}
  .fav-tag{  width: 200px;height: 40px;font-size: 24px;}

  .fav-stage{display:flex;flex-direction:column;align-items:stretch;margin-top:18px;max-width:460px}
  .fav-phone{order:0;width:130px;margin:0 auto -30px;align-self:center}
  .fav-steps{gap:14px}
  .fav-steps--left{order:1;margin:32px 0 0}
  .fav-steps--right{order:2;margin:14px 0 0}
  .fav-step{        padding: 19px 24px 19px 63px;gap:18px;min-height:64px}
  .fav-step__text{white-space:normal}
  .fav-step__num{        font-size: 65px;
}
  .fav-step__text{font-size:16px}
  .fav-cta{        font-size: 16px;
        padding: 12px 0 12px;;border-radius:4px}
  @keyframes fav-shadow-pulse{
    0%  {box-shadow:0 0 0 0 rgba(31,209,141,.55)}
    100%{box-shadow:0 0 5px 16px rgba(31,209,141,0)}
  }
  .fav-deco--crown{        width: 80px;
        left: calc(30% - 125px);
        top: 8%;}
  .fav-deco--thunder{        width: 85px;
        left: calc(57% + 72px);
        right: auto;
        top: 44%;}

  .fav-note{        font-size: 16px;margin-top:32px;padding:0 6px}
  .fav-stores{display:flex;gap:10px;flex-wrap:wrap}
  .fav-store{height:30px;min-width:0;        padding: 16px 14px 16px 14px;gap:6px;border-radius:6px}
  .fav-store img{        height: 22px}
  .fav-store small{        font-size: 9px}
  .fav-store strong{        font-size: 15px}
  .fav-terms{margin-top:24px}

  .fav-terms summary {
        font-size: 18px;

  }

  .fav-terms__body li {
        font-size: 16px;

  }
}
@media (max-width:360px){
  .fav-hero__title{font-size:30px}
  .fav-deco--crown{left:4px}
}
@media (prefers-reduced-motion:reduce){
  .fav-cta{animation:none;box-shadow:0 0 0 4px rgba(31,209,141,.25)}
}