:root{
  --bg: #12151C;
  --accent: #f74fa4;
  --accent-2: #e51e63;
  --brand-accent: #f74fa4;
  --brand-accent-2: #e51e63;
  --text: #f8f7fb;
  --text-dim: #bcbdd3;
  --page-bg-image: radial-gradient(ellipse 900px 600px at 8% -5%, rgba(140, 38, 55, 0.35) 0%, rgba(18,21,28,0) 60%), radial-gradient(ellipse 900px 550px at 22% 8%, rgba(18,21,28,0.4) 0%, rgba(18,21,28,0.18) 40%, rgba(5,6,10,0) 72%), linear-gradient(135deg, rgba(8, 9, 14, 0.96) 0%, rgba(14, 13, 24, 0.92) 50%, rgba(18, 21, 28, 0.9) 100%);
  --page-bg-image-next: radial-gradient(ellipse 900px 600px at 8% -5%, rgba(140, 38, 55, 0.35) 0%, rgba(18,21,28,0) 60%), radial-gradient(ellipse 900px 550px at 22% 8%, rgba(18,21,28,0.4) 0%, rgba(18,21,28,0.18) 40%, rgba(5,6,10,0) 72%), linear-gradient(135deg, rgba(8, 9, 14, 0.96) 0%, rgba(14, 13, 24, 0.92) 50%, rgba(18, 21, 28, 0.9) 100%);
  --page-bg-color: #12151c;
  --surface-bg: rgba(8, 10, 16, 0.72);
  --surface-border: rgba(255,255,255,0.14);
  --badge-bg: rgba(255,255,255,0.1);
}

*{box-sizing:border-box; margin:0; padding:0;}
body{
  min-height:100vh;
  font-family: 'Rubik', 'Segoe UI', 'Inter', Arial, sans-serif;
  background-color: var(--page-bg-color);
  color:var(--text);
  transition: background-color .55s ease, color .35s ease;
  position:relative;
  overflow:hidden;
}

.welcome-background{
  position:fixed;
  inset:0;
  z-index:0;
  background-color: var(--page-bg-color);
  background-image: var(--page-bg-image);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  pointer-events:none;
  filter:saturate(0.55) brightness(1.15);
}
.welcome-background::after{
  content:"";
  position:absolute;
  inset:0;
  background: transparent;
  pointer-events:none;
}

.welcome-screen{
  min-height:100vh;
  display:flex;
  align-items:stretch;
  justify-content:center;
  padding:0 24px 0;
  overflow:hidden;
  position:relative;
  z-index:1;
}

.welcome-card{
  width:min(100%, 920px);
  max-width:920px;
  min-height:100vh;
  margin:0 auto;
  margin-top:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:24px 0 8px;
  position:relative;
  animation: fadeUp .7s ease both;
}

.hero-content{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  justify-content:center;
  flex:1;
  padding-top:0;
  padding-bottom:0;
  margin-top:clamp(40px, 11vh, 160px);
}

.poster-wall{
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  width:100vw;
  height:100vh;
  display:grid;
  grid-template-columns:repeat(14, 1fr);
  align-content:start;
  gap:4px 4px;
  z-index:0;
  pointer-events:none;
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.85) 35%, rgba(0,0,0,0.85) 100%),
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.85) 12%, rgba(0,0,0,0.85) 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.85) 35%, rgba(0,0,0,0.85) 100%),
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.85) 12%, rgba(0,0,0,0.85) 88%, transparent 100%);
  mask-composite: intersect;
}
.poster-wall::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background: linear-gradient(180deg,rgba(18, 21, 28, 0.75) 0%, rgba(18, 21, 28, 0.82) 29%, rgba(18, 21, 28, 0.9) 61%, rgba(18, 21, 28, 1) 87%);
}
.poster-wall-tile{
  border-radius:6px;
  overflow:hidden;
  aspect-ratio:2/3;
  opacity:0.9;
}
.poster-wall-tile--wide{
  aspect-ratio:16/9;
}
.poster-wall-tile--flash{
  animation: posterFlash 1.2s ease;
}
@keyframes posterFlash{
  0%{ filter:brightness(1) saturate(0.9); opacity:0.9; }
  45%{ filter:brightness(3.0) saturate(2.0); opacity:1; }
  100%{ filter:brightness(1) saturate(0.9); opacity:0.9; }
}
.poster-wall-tile img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(0.9);
}

.welcome-logo{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  font-size:32px;
  font-weight:900;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:#ffb0bf;
  margin-bottom:24px;
  text-align:center;
}

.welcome-logo img{ width:220px; height:220px; }

.logo-word{
  display:inline-block;
}

.logo-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:0 10px 24px rgba(0,0,0,0.24);
}

.tv-icon{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:18px;
}

.tv-screen{
  display:block;
  width:20px;
  height:13px;
  border:2px solid #fff;
  border-radius:3px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,0.08);
}

.tv-stand{
  position:absolute;
  bottom:-5px;
  width:10px;
  height:3px;
  background:#fff;
  border-radius:999px;
}

.welcome-card h1{
  position:relative;
  z-index:1;
  font-size:34px;
  margin-bottom:18px;
  line-height:1.05;
  font-weight:900;
  letter-spacing:-0.04em;
  text-transform:uppercase;
  max-width:none;
  text-align:center;
  font-family: 'Rubik', 'Segoe UI', 'Inter', Arial, sans-serif;
}

.welcome-card p{
  position:relative;
  z-index:1;
  color:var(--text-dim);
  font-size:15px;
  line-height:1.75;
  margin-bottom:28px;
  max-width:none;
  text-align:center;
}

.welcome-actions{
  position:relative;
  z-index:1;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  margin-bottom:0;
  margin-top:8px;
  width:100%;
}

.welcome-swoosh{
  position:relative;
  margin-top:28px;
  width:min(100%, 840px);
  aspect-ratio:714/164;
  overflow:hidden;
  z-index:0;
  opacity:0.55;
  pointer-events:none;
}
.welcome-swoosh svg{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  display:block;
}

.welcome-footer-link{
  position:relative;
  z-index:1;
  display:block;
  margin-top:18px;
  color:var(--text-dim);
  font-size:12px;
  text-decoration:none;
}
.welcome-footer-link:hover{ color:var(--text); text-decoration:underline; }

.welcome-btn{
  display:inline-block;
  border-radius:999px;
  padding:13px 22px;
  font-weight:700;
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease;
}

.welcome-btn:hover{transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.2);}

.welcome-btn.primary{
  background: linear-gradient(135deg, var(--brand-accent), var(--brand-accent-2));
  color:#fff;
}

.welcome-btn.secondary{
  background: rgba(255,255,255,0.08);
  color:#f8f7fb;
  border:1px solid rgba(255,255,255,0.14);
}

@keyframes fadeUp{
  from{opacity:0; transform:translateY(16px);} 
to{opacity:1; transform:translateY(0);} 
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px){
  .welcome-screen{ padding:0; align-items:stretch; }
  .welcome-card{ justify-content:flex-end; padding:0 0 44px; min-height:100vh; }
  .welcome-background{ background-image:none; background-color:var(--page-bg-color); filter:none; }
  .welcome-background::after{
    background: var(--page-bg-color);
  }
  .welcome-logo{ margin-bottom:18px; }
  .welcome-logo img{ width:185px; height:auto; }
  .poster-wall{ display:none; }
  .welcome-screen .poster-wall{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    grid-auto-rows:calc((100vw - 28px - 64px) / 5 * 1.5);
    align-items:start;
    gap:16px;
    padding:14px 14px 0;
    -webkit-mask-image:none;
    mask-image:none;
  }
  .welcome-screen .poster-wall .poster-wall-tile--wide{
    aspect-ratio:2/3;
  }
  .welcome-screen .poster-wall::after{
    background: linear-gradient(180deg,
      rgba(18,21,28,0) 0%,
      rgba(18,21,28,0.05) 20%,
      rgba(18,21,28,0.4) 34%,
      rgba(18,21,28,0.85) 44%,
      rgba(18,21,28,1) 50%,
      rgba(18,21,28,1) 100%);
  }
  .welcome-swoosh{ display:none; }
  .hero-content{ padding:0 22px; padding-bottom:0; justify-content:flex-end; align-items:center; }
  .welcome-card h1{ font-size:32px; margin-bottom:140px; text-align:center; }
  .welcome-card p{ font-size:13.5px; margin-bottom:22px; text-align:center; }
  .welcome-actions{ flex-direction:row; gap:10px; margin-top:34px; flex-wrap:nowrap; }
  .welcome-btn{ flex:1; width:auto; text-align:center; padding:15px 16px; font-size:15px; }
  .welcome-btn.secondary{ background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14); text-decoration:none; }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px){
  .welcome-screen{
    padding:0 24px 24px;
    align-items:flex-start;
  }

  .welcome-card h1{
    font-size:38px;
  }

  .welcome-logo{
    flex-wrap:wrap;
    gap:8px;
    font-size:62px;
    letter-spacing:0.16em;
  }

  .logo-badge{
    width:40px;
    height:40px;
  }
}