
/* RiotStation Brand-aligned CSS
   Palette: Midnight #160C28 (primary dark), Blush #F4A5AE (accent), Black #000411 (grounding)
   Type: Headings Montserrat Bold, Body Helvetica Neue or Montserrat Regular
*/
:root{
  --midnight:#160C28;
  --blush:#F4A5AE;
  --ink:#000411;
  --cream:#F7F7F2;
  --muted:#C6CCD7;
  --card:#1B2030;
  --ring: rgba(244,165,174,0.45);
  --radius: 20px;
  --shadow: 0 12px 40px rgba(0,0,0,0.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(244,165,174,0.10), transparent 60%),
    radial-gradient(900px 700px at -10% 30%, rgba(0,4,17,0.35), transparent 60%),
    linear-gradient(180deg, var(--ink) 0%, var(--midnight) 60%, #0D1220 100%);
  color: var(--cream);
  font-family: "Helvetica Neue", Montserrat, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container{width:min(1100px, 92%); margin-inline:auto}
a{color:var(--blush); text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3,h4,.brand-text{
  font-family: "Montserrat","Helvetica Neue", Arial, sans-serif;
  font-weight:800;
  letter-spacing:0.2px;
  margin:0 0 8px;
}
h1{font-size:clamp(44px, 7.5vw, 88px); line-height:0.95}
h2{font-size:clamp(28px, 3.2vw, 46px)}
h3{font-size:clamp(22px, 2.4vw, 30px)}

.site-header{
  position:sticky; top:0; z-index:10;
  background: rgba(22,12,40,0.72); backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:800}
.logo-mark{
  display:inline-grid; place-items:center;
  width:42px; height:42px; border-radius:12px;
  background: var(--midnight);
  border: 2px solid rgba(244,165,174,0.65);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.35), 0 8px 20px rgba(0,0,0,0.35);
  color: var(--blush);
  font-family:"Montserrat", system-ui, sans-serif;
  font-weight:800;
  letter-spacing:0.5px;
}
.brand-text{ font-size:28px }
.nav-links{display:flex; gap:18px; align-items:center}
.nav-links a{padding:8px 10px; border-radius:12px}
.nav-links .pill{border:1px solid rgba(255,255,255,0.10);}
.nav-toggle{display:none; background:none; border:0; font-size:22px; color:var(--cream)}

@media (max-width:860px){
  .nav-toggle{display:block}
  .nav-links{position:absolute; right:4%; top:64px; background:var(--midnight);
    border:1px solid rgba(255,255,255,0.10);
    padding:10px; border-radius:14px; flex-direction:column; display:none; min-width:220px}
  .nav-links.open{display:flex}
}

.site-main{padding:28px 0 64px}

.hero{
  display:grid; grid-template-columns: 1.2fr 0.8fr; gap:24px; align-items:center; padding:20px 0 10px;
}
.accent{
  background: linear-gradient(90deg, var(--blush), #FFDCE6);
  -webkit-background-clip:text; background-clip:text; color:transparent
}
.lede{font-size:18px; color:var(--muted); max-width:60ch}
.hero-art{min-height:240px; border-radius:24px;
  background:
    radial-gradient(220px 180px at 70% 20%, rgba(244,165,174,0.28), transparent 60%),
    radial-gradient(180px 160px at 25% 70%, rgba(0,4,17,0.35), transparent 60%),
    linear-gradient(135deg, #141A26, #0F1520);
  border:1px solid rgba(255,255,255,0.06); box-shadow: var(--shadow);
}

/* ===== Hero animated pulse + waveform ===== */
.hero-art{
  position: relative;
  overflow: hidden;
  min-height:260px; border-radius:24px;
  background:
    radial-gradient(220px 180px at 70% 20%, rgba(244,165,174,0.20), transparent 60%),
    radial-gradient(180px 160px at 25% 70%, rgba(0,4,17,0.35), transparent 60%),
    linear-gradient(135deg, #151A27, #0F1520);
  border:1px solid rgba(255,255,255,0.06); box-shadow: var(--shadow);
  animation: heroPulse 8s ease-in-out infinite;
}
.hero-art::before{
  content:"";
  position:absolute; inset:-30%;
  background: radial-gradient(closest-side, rgba(244,165,174,0.18), transparent 70%);
  filter: blur(40px);
  opacity:0.5;
  animation: auraDrift 12s ease-in-out infinite;
}

@keyframes heroPulse {
  0%,100% { box-shadow: 0 20px 60px rgba(0,0,0,0.35), inset 0 0 0 0 rgba(244,165,174,0.0); }
  50% { box-shadow: 0 26px 70px rgba(0,0,0,0.45), inset 0 0 60px 0 rgba(244,165,174,0.15); }
}
@keyframes auraDrift {
  0%   { transform: translate(-4%, -2%) scale(1); opacity:0.45 }
  50%  { transform: translate(4%, 3%) scale(1.05); opacity:0.7 }
  100% { transform: translate(-4%, -2%) scale(1); opacity:0.45 }
}

/* Equalizer bars */
.wave-eq{
  --bars: 20;
  --barW: 6px;
  --gap: 6px;
  position:absolute;
  left:50%; bottom:28px; transform: translateX(-50%);
  width: calc(var(--bars) * var(--barW) + (var(--bars) - 1) * var(--gap));
  height: 150px;
  display:flex; align-items:flex-end; gap: var(--gap);
  opacity:0.9;
}

.wave-eq span{
  width: var(--barW);
  display:block;
  background: linear-gradient(180deg, var(--blush), #FFC4D3);
  box-shadow: 0 2px 10px rgba(244,165,174,0.35);
  border-radius: 6px;
  height: 20%;
}

/* Different keyframes for variety */
@keyframes barShort {
  0%,100% { height: 20% }
  50% { height: 55% }
}
@keyframes barMedium {
  0%,100% { height: 25% }
  50% { height: 85% }
}
@keyframes barTall {
  0%,100% { height: 15% }
  50% { height: 100% }
}

/* Randomize which bars get which animation */
.wave-eq span:nth-child(odd) {
  animation: barTall 0.82s ease-in-out infinite;
}
.wave-eq span:nth-child(even) {
  animation: barShort 0.82s ease-in-out infinite;
}
.wave-eq span:nth-child(3n) {
  animation: barMedium 0.4s ease-in-out infinite;
}
.wave-eq span:nth-child(4n) {
  animation: barShort 0.6s ease-in-out infinite;
}
.wave-eq span:nth-child(5n) {
  animation: barMedium 0.6s ease-in-out infinite;
}
.wave-eq span:nth-child(7n) {
  animation: barTall 0.8s ease-in-out infinite;
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce){
  .hero-art, .hero-art::before, .wave-eq span { animation: none !important; }
}

.cards{display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top:24px}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius); padding:18px; box-shadow: var(--shadow);
}
.card h3{font-weight:800}
.link-arrow{display:inline-flex; align-items:center; gap:6px}
.link-arrow::after{content:"→"}

.player-card{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background: var(--card); padding:16px; border-radius:var(--radius);
  border:1px solid rgba(255,255,255,0.10);
}
.badge{border:1px solid rgba(255,255,255,0.12); border-radius:20px; padding:6px 10px; font-size:12px; color:var(--muted)}

.team-grid{display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:18px; margin-top:16px}
.person{background:var(--card); border:1px solid rgba(255,255,255,0.10); border-radius:var(--radius); padding:14px}
.person img{width:100%; height:220px; object-fit:cover; border-radius:12px; border:1px solid rgba(255,255,255,0.06)}
.person h3{margin:10px 0 4px}
.role{color:#cfd5e2; margin:0 0 8px}
.bio{color:var(--muted); margin:0 0 8px}
.socials{display:flex; gap:10px; list-style:none; padding:0; margin:0}

.form{background:var(--card); border:1px solid rgba(255,255,255,0.10); border-radius:var(--radius); padding:18px; margin-top:10px}
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:12px}
.field label{font-weight:600}
.field input,.field select,.field textarea{
  background:#0f1520; border:1px solid rgba(255,255,255,0.14);
  border-radius:12px; padding:10px 12px; color:var(--cream); outline: none;
  font-family: inherit;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color: var(--blush); box-shadow: 0 0 0 4px var(--ring)}

.grid{display:grid; gap:12px; grid-template-columns: repeat(2,1fr)}
@media (max-width:640px){ .grid{grid-template-columns: 1fr} }

.btn{display:inline-block; padding:11px 16px; border-radius:14px; border:1px solid rgba(255,255,255,0.14); text-decoration:none; cursor:pointer; font-weight:700}
.btn-primary{
  background: linear-gradient(90deg, var(--blush), #FFC4D3);
  color:#0A0D14;
  border-color:#FFC4D3;
}
.btn-ghost{background: transparent; color: var(--cream)}
.btn[disabled]{opacity:0.6; cursor:not-allowed}

.site-footer{margin-top:50px; border-top:1px solid rgba(255,255,255,0.10); padding:26px 0}
.footer-grid{display:grid; grid-template-columns: 1.5fr 1fr 1fr; gap:18px}
.footer-grid h4{font-weight:800}
.brand-inline{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.tiny{font-size:12px; color:var(--muted); text-align:center}
.small{font-size:13px}
.muted{color:var(--muted)}
.list{margin:0; padding-left:18px}

/* Monochrome utility for logo mark/brand when needed */
.logo--mono-white .logo-mark{ border-color: rgba(255,255,255,0.75); color:#fff; background:#111624 }
.logo--mono-black .logo-mark{ border-color: rgba(0,0,0,0.65); color:#000; background:#fff; }
.logo--mono-blush .logo-mark{ border-color: var(--blush); color:var(--blush); background:transparent }

.site-footer ul li {
    padding-left: 0px;
    text-decoration: none;
    list-style: none;
}

.founder .role { font-weight: 700; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 10px; }
.chip {
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  background: linear-gradient(90deg, var(--blush), #FFC4D3);
  color:#0A0D14;
  border:1px solid #FFC4D3;
}