.social-hub{
  position:relative;
  z-index:2;
  width:min(1180px,100%);
  margin:auto;
  padding:146px 24px 92px;
}
.social-hero{
  max-width:900px;
  margin-bottom:44px;
}
.social-hero h1{
  font:900 clamp(3rem,7.2vw,6.4rem)/1.02 "Barlow Condensed",sans-serif;
  text-transform:uppercase;
  letter-spacing:.012em;
  margin:20px 0 24px;
  text-wrap:balance;
}
.social-hero>p:last-child{
  max-width:760px;
  color:var(--muted);
  font-size:1.08rem;
  line-height:1.72;
}
.social-channel-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:16px;
  align-items:stretch;
}
.social-channel-card{
  --platform-accent:var(--cyan);
  --platform-soft:rgba(85,214,230,.11);
  --platform-mark:rgba(85,214,230,.13);
  --platform-line:rgba(85,214,230,.24);
  position:relative;
  min-height:306px;
  padding:20px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.09);
  background:
    linear-gradient(180deg,var(--platform-soft),rgba(255,255,255,0) 94px),
    linear-gradient(145deg,rgba(10,24,31,.88),rgba(4,10,13,.94));
  box-shadow:0 24px 70px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.04);
  color:var(--text);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  isolation:isolate;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.social-channel-card:before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:3px;
  background:linear-gradient(90deg,var(--platform-accent),rgba(255,255,255,.08));
}
.social-channel-card:hover{
  transform:translateY(-4px);
  border-color:var(--platform-line);
  box-shadow:0 30px 82px rgba(0,0,0,.29),inset 0 1px 0 rgba(255,255,255,.05);
}
.social-channel-card.accent-orange{
  --platform-accent:var(--orange);
  --platform-soft:rgba(240,122,34,.12);
  --platform-mark:rgba(240,122,34,.14);
  --platform-line:rgba(240,122,34,.28);
}
.platform-instagram,.platform-youtube{
  --platform-accent:var(--orange);
  --platform-soft:rgba(240,122,34,.12);
  --platform-mark:rgba(240,122,34,.14);
  --platform-line:rgba(240,122,34,.30);
}
.platform-spotify{
  --platform-accent:#1db954;
  --platform-soft:rgba(29,185,84,.12);
  --platform-mark:rgba(29,185,84,.14);
  --platform-line:rgba(29,185,84,.30);
}
.platform-discord{
  --platform-accent:#8ea1ff;
  --platform-soft:rgba(142,161,255,.12);
  --platform-mark:rgba(142,161,255,.14);
  --platform-line:rgba(142,161,255,.28);
}
.platform-x,.platform-facebook,.platform-generic{
  --platform-accent:#d8e9eb;
  --platform-soft:rgba(216,233,235,.08);
  --platform-mark:rgba(216,233,235,.10);
  --platform-line:rgba(216,233,235,.18);
}
.social-card-head,.social-card-copy,.social-card-footer{
  position:relative;
  z-index:1;
}
.social-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.social-brand-lockup{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}
.social-brand-mark{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:18px;
  border:1px solid var(--platform-line);
  background:linear-gradient(145deg,var(--platform-mark),rgba(255,255,255,.025));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.social-brand-mark svg{
  width:34px;
  height:34px;
  display:block;
}
.social-fallback-mark{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  color:var(--platform-accent);
  font:900 .95rem "Barlow Condensed",sans-serif;
  letter-spacing:.08em;
}
.social-brand-head{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.social-brand-head small{
  color:var(--platform-accent);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.14em;
  line-height:1.2;
  text-transform:uppercase;
}
.social-brand-head strong{
  color:#eef7f7;
  font:800 1rem/1.08 "Barlow Condensed",sans-serif;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-wrap:balance;
}
.social-card-copy{
  margin-top:22px;
}
.social-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:16px;
}
.social-chip{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  min-height:30px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
  color:rgba(224,238,240,.78);
  font-size:.73rem;
  font-weight:850;
  letter-spacing:.055em;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.social-chip.solid{
  color:var(--platform-accent);
  border-color:var(--platform-line);
  background:var(--platform-mark);
}
.social-channel-card h2{
  margin:0 0 12px;
  color:#fff;
  font:900 clamp(1.75rem,3vw,2.45rem)/.95 "Barlow Condensed",sans-serif;
  letter-spacing:.01em;
  text-transform:uppercase;
  text-wrap:balance;
}
.social-channel-card p{
  max-width:52ch;
  margin:0;
  color:rgba(210,225,227,.78);
  line-height:1.62;
  font-size:.95rem;
}
.social-card-footer{
  margin-top:auto;
  padding-top:22px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
}
.social-card-footer small{
  max-width:270px;
  color:rgba(214,231,233,.65);
  line-height:1.45;
}
.social-open{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:42px;
  padding:11px 15px;
  border-radius:999px;
  border:1px solid var(--platform-line);
  background:rgba(255,255,255,.045);
  color:#f7fbfb;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.055em;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
  transition:background .2s ease,transform .2s ease,border-color .2s ease;
}
.social-open:hover{
  transform:translateY(-2px);
  background:var(--platform-mark);
  border-color:var(--platform-accent);
}
.social-open.disabled{
  color:rgba(222,236,238,.56);
  border-color:rgba(255,255,255,.09);
  background:rgba(255,255,255,.025);
}
.social-open.disabled:hover{
  transform:none;
  border-color:rgba(255,255,255,.09);
  background:rgba(255,255,255,.025);
}
.twitch-spotlight{
  position:relative;
  margin-top:62px;
  padding:38px;
  border-radius:30px;
  border:1px solid rgba(85,214,230,.18);
  background:
    linear-gradient(135deg,rgba(85,214,230,.09),rgba(255,255,255,0) 42%,rgba(240,122,34,.075)),
    linear-gradient(145deg,rgba(7,18,24,.90),rgba(3,9,12,.94));
  box-shadow:0 30px 100px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
  isolation:isolate;
}
.twitch-spotlight:before{
  content:"";
  position:absolute;
  left:38px;
  right:38px;
  top:0;
  height:3px;
  background:linear-gradient(90deg,var(--cyan),rgba(255,255,255,.08),var(--orange));
}
.twitch-spotlight-head{
  max-width:820px;
  margin-bottom:26px;
}
.twitch-spotlight-head h2{
  margin:0 0 18px;
  font:900 clamp(2.45rem,5.3vw,4.8rem)/.94 "Barlow Condensed",sans-serif;
  letter-spacing:.012em;
  text-transform:uppercase;
  text-wrap:balance;
}
.twitch-spotlight-head>p:last-child{
  max-width:780px;
  color:rgba(211,228,231,.78);
  font-size:1.02rem;
  line-height:1.72;
}
.twitch-spotlight-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.twitch-channel-card{
  position:relative;
  min-height:370px;
  padding:18px;
  display:grid;
  grid-template-columns:minmax(148px,.42fr) minmax(0,.58fr);
  gap:18px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(155deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  box-shadow:0 20px 70px rgba(0,0,0,.25);
  overflow:hidden;
}
.twitch-channel-card:before{
  content:"";
  position:absolute;
  inset:auto 18px 18px 18px;
  height:1px;
  background:linear-gradient(90deg,rgba(85,214,230,.5),transparent,rgba(240,122,34,.45));
  opacity:.45;
}
.twitch-profile-frame{
  position:relative;
  min-height:100%;
  margin:0;
  border-radius:22px;
  overflow:hidden;
  background:#050d11;
  border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.twitch-profile-frame:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(3,9,12,0),rgba(3,9,12,.38));
}
.twitch-profile-frame img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  transform-origin:center center;
}
.twitch-channel-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  position:relative;
  z-index:1;
}
.twitch-live-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:30px;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid rgba(145,90,255,.28);
  background:rgba(145,90,255,.12);
  color:#d8cbff;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.twitch-live-pill i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 18px rgba(240,122,34,.62);
}
.twitch-channel-card h3{
  margin:18px 0 5px;
  font:900 clamp(2rem,3.2vw,3.1rem)/.9 "Barlow Condensed",sans-serif;
  letter-spacing:.01em;
  text-transform:uppercase;
  text-wrap:balance;
}
.twitch-channel-copy>strong{
  color:var(--cyan);
  font-size:.82rem;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.twitch-channel-copy>p{
  margin:15px 0 0;
  color:rgba(215,229,232,.78);
  line-height:1.62;
}
.twitch-channel-preview{
  width:100%;
  margin-top:auto;
  padding:15px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(145deg,rgba(4,10,13,.58),rgba(255,255,255,.035));
}
.twitch-channel-preview span{
  display:block;
  color:rgba(214,231,233,.58);
  font-size:.7rem;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
  margin-bottom:7px;
}
.twitch-channel-preview b{
  display:block;
  color:#fff;
  font:800 1.15rem/1.08 "Barlow Condensed",sans-serif;
  text-transform:uppercase;
  text-wrap:balance;
}
.twitch-channel-preview small{
  display:block;
  margin-top:10px;
  color:rgba(127,232,242,.72);
  font-weight:800;
}
.twitch-channel-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin-top:15px;
  min-height:44px;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(85,214,230,.28);
  background:rgba(85,214,230,.08);
  color:#fff;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.twitch-channel-link:after{
  content:"↗";
}
.twitch-channel-link:hover{
  background:rgba(85,214,230,.15);
  border-color:rgba(85,214,230,.48);
  transform:translateY(-2px);
}
.twitch-channel-card.twitch-denes .twitch-channel-copy>strong,
.twitch-channel-card.twitch-denes .twitch-channel-preview small{
  color:#ffc58f;
}
.twitch-channel-card.twitch-denes .twitch-channel-link{
  border-color:rgba(240,122,34,.30);
  background:rgba(240,122,34,.08);
}
.twitch-channel-card.twitch-denes .twitch-channel-link:hover{
  border-color:rgba(240,122,34,.48);
  background:rgba(240,122,34,.15);
}
.home-editor-mode .social-channel-grid[data-home-visible="0"]{
  display:grid!important;
}
.home-editor-mode .twitch-spotlight[data-home-visible="0"],
.home-editor-mode .social-hero[data-home-visible="0"],
.home-editor-mode .social-hub-footer[data-home-visible="0"]{
  display:block!important;
}
.social-hub-footer{
  text-align:center;
  padding:72px 20px 0;
}
.social-hub-footer p{
  color:var(--muted);
  margin-bottom:24px;
}
@media(max-width:900px){
  .social-hub{
    padding:126px 18px 78px;
  }
  .social-hero{
    margin-bottom:34px;
  }
  .social-hero h1{
    font-size:clamp(3rem,12vw,5.4rem);
  }
  .twitch-spotlight{
    padding:28px;
  }
  .twitch-spotlight-grid{
    grid-template-columns:1fr;
  }
  .twitch-channel-card{
    min-height:330px;
  }
}
@media(max-width:620px){
  .social-channel-grid{
    grid-template-columns:1fr;
  }
  .social-channel-card{
    min-height:0;
    padding:18px;
    border-radius:22px;
  }
  .social-card-footer{
    align-items:flex-start;
    flex-direction:column;
  }
  .social-card-footer small{
    max-width:none;
  }
  .social-open{
    width:100%;
  }
  .twitch-spotlight{
    margin-top:44px;
    padding:20px;
    border-radius:24px;
  }
  .twitch-spotlight:before{
    left:20px;
    right:20px;
  }
  .twitch-channel-card{
    grid-template-columns:1fr;
    min-height:0;
  }
  .twitch-profile-frame{
    aspect-ratio:16/12;
  }
  .twitch-channel-link{
    width:100%;
  }
}