/* ============================================================
   STREAM WITH LIEN — Home page styles + shared section heads
   ============================================================ */

/* ---------- Shared section head ---------- */
.sec-head { max-width: 640px; margin-bottom: 44px; }
.sec-head__h { font-size: clamp(34px, 5vw, 56px); margin: 16px 0 14px; }
.sec-head__p { font-size: 18px; max-width: 560px; }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(28px, 5vw, 56px); overflow: hidden; }
.hero__inner {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center;
  padding-bottom: clamp(40px, 6vw, 72px);
}
.hero__title { font-size: clamp(44px, 7vw, 92px); line-height: 0.98; letter-spacing: -0.03em; }
.hero__title .hl { color: var(--coral); position: relative; }
.hero__title .hl::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: 0.08em; height: 0.16em;
  background: var(--coral-soft); z-index: -1; border-radius: 4px; transform: rotate(-1deg);
}
.hero__lede { font-size: 19px; max-width: 520px; margin: 26px 0 32px; }

.hero__media { position: relative; }
.hero__photo { padding: 14px; position: relative; transform: rotate(1.4deg); background: var(--card-2); }
.hero__photo .ph { width: 100%; }
.hero__sticker { position: absolute; }
.hero__sticker--np {
  left: -34px; bottom: 36px; transform: rotate(-4deg);
  display: flex; align-items: center; gap: 12px;
  background: var(--card-2); padding: 12px 18px 12px 14px;
}
.np-eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 24px; }
.np-eq i { width: 4px; background: var(--coral); border-radius: 2px; animation: eq 0.9s ease-in-out infinite; }
.np-eq i:nth-child(1){ height: 40%; animation-delay: 0s; }
.np-eq i:nth-child(2){ height: 90%; animation-delay: .2s; }
.np-eq i:nth-child(3){ height: 60%; animation-delay: .4s; }
.np-eq i:nth-child(4){ height: 100%; animation-delay: .1s; }
@keyframes eq { 0%,100%{ transform: scaleY(.4); } 50%{ transform: scaleY(1); } }
.np-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }
.np-track { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.hero__sticker--fam {
  right: -22px; top: 28px; transform: rotate(6deg);
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--coral); color: #fff; font-family: var(--font-display); font-weight: 800;
  font-size: 16px; padding: 10px 16px; border: var(--bw) solid var(--line);
  border-radius: var(--r-pill); box-shadow: var(--shadow-sticker-sm);
}
.hero__sticker--fam svg { color: #fff; }

@media (prefers-reduced-motion: reduce) { .np-eq i { animation: none; } }

/* ---------- Marquee band ---------- */
.hero__marquee {
  background: var(--ink); color: var(--paper);
  border-top: var(--bw) solid var(--line); border-bottom: var(--bw) solid var(--line);
  padding: 16px 0;
}
.marquee__row { display: inline-flex; }
.marquee__item {
  font-family: var(--font-display); font-weight: 800; font-size: 26px;
  letter-spacing: 0.02em; text-transform: uppercase; padding: 0 26px;
  display: inline-flex; align-items: center; gap: 26px; white-space: nowrap;
}
.marquee__star { color: var(--coral); font-style: normal; font-size: 18px; }

/* ---------- About ---------- */
.about__inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items: center; }
.about__media { position: relative; }
.about__ph { transform: rotate(-1.6deg); }
.about__badge {
  position: absolute; right: -20px; bottom: -22px; background: var(--coral);
  width: 116px; height: 116px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transform: rotate(-8deg); color: #fff;
}
.about__badge-big { font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1; }
.about__badge-sm { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 4px; }
.about__h { font-size: clamp(30px, 4.4vw, 46px); margin: 14px 0 18px; }
.about__p { font-size: 17.5px; margin: 0 0 16px; max-width: 540px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 30px; }
.stat { background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-md); padding: 16px 14px; box-shadow: var(--shadow-sticker-sm); }
.stat__v { display: block; font-family: var(--font-display); font-weight: 800; font-size: 30px; color: var(--coral-deep); line-height: 1; }
.stat__l { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-mute); margin-top: 6px; }

/* ---------- Community / platforms ---------- */
.community__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.plat {
  display: flex; flex-direction: column; gap: 12px;
  border: var(--bw) solid var(--line); border-radius: var(--r-lg);
  padding: 32px; box-shadow: var(--shadow-sticker); cursor: pointer;
  transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s ease;
  color: var(--ink); min-height: 230px;
}
.plat:hover { transform: translate(-3px,-3px); box-shadow: 8px 9px 0 var(--ink); }
.plat--twitch { background: color-mix(in oklab, var(--twitch) 14%, var(--card)); }
.plat--discord { background: color-mix(in oklab, var(--discord) 14%, var(--card)); }
.plat__top { display: flex; align-items: flex-start; justify-content: space-between; }
.plat__icon { width: 56px; height: 56px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; border: var(--bw) solid var(--line); }
.plat--twitch .plat__icon { background: var(--twitch); color: #fff; }
.plat--discord .plat__icon { background: var(--discord); color: #fff; }
.plat__top > svg { color: var(--ink); }
.plat__name { font-size: 30px; margin-top: auto; }
.plat__desc { font-size: 16px; color: var(--ink-soft); margin: 0; max-width: 90%; }
.plat__cta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--coral-deep); }
.plat:hover .plat__cta svg { transform: translateX(4px); transition: transform .15s; }

/* ---------- Social block ---------- */
.social-block__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
  background: var(--ink); border-radius: var(--r-xl); padding: 44px 48px; color: var(--paper);
}
.social-block__h { font-size: clamp(28px, 4vw, 44px); color: var(--paper); margin-top: 10px; }
.social-block .eyebrow { color: var(--coral-soft); }
.social-block .social-btn { background: rgba(255,255,255,0.06); border-color: var(--paper); color: var(--paper); box-shadow: 4px 5px 0 rgba(0,0,0,0.4); }
.social-block .social-btn:hover { background: var(--coral); border-color: var(--coral); color: #fff; }

/* ---------- Explore tiles ---------- */
.explore__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.tile {
  position: relative; text-align: left; cursor: pointer;
  background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-lg);
  padding: 18px; box-shadow: var(--shadow-sticker);
  transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s ease;
  display: flex; flex-direction: column;
}
.tile:hover { transform: translate(-3px,-3px); box-shadow: 8px 9px 0 var(--ink); }
.tile__num { position: absolute; top: 14px; left: 14px; z-index: 2; font-family: var(--font-display); font-weight: 800; font-size: 13px; background: var(--card-2); border: 2px solid var(--line); border-radius: 999px; padding: 3px 9px; }
.tile__ph { margin-bottom: 16px; }
.tile__t { font-size: 21px; margin-bottom: 8px; }
.tile__d { font-size: 14.5px; margin: 0; }
.tile__go { position: absolute; bottom: 18px; right: 18px; color: var(--ink-mute); transition: transform .15s, color .15s; }
.tile:hover .tile__go { transform: translate(3px,-3px); color: var(--coral); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .hero__media { max-width: 460px; }
  .about__inner { grid-template-columns: 1fr; gap: 56px; }
  .community__grid { grid-template-columns: 1fr; }
  .explore__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .explore__grid { grid-template-columns: 1fr; }
  .social-block__inner { padding: 32px 26px; }
  .hero__sticker--np { left: -10px; }
  .hero__sticker--fam { right: -6px; }
}