:root{
  --bg:#fbfbfd;
  --bg2:#ffffff;
  --fg:#0b0b0f;
  --muted:rgba(11,11,15,.72);
  --muted2:rgba(11,11,15,.55);
  --line:rgba(11,11,15,.10);
  --card:rgba(255,255,255,.86);
  --shadow:0 30px 80px rgba(11,11,15,.10);
  --r:18px;
  --r2:26px;
  --maxw:1160px;
  --black:#0b0b0f;
  --gold:#C6A24D;
  --gold2:#a8893f;
}

[data-theme="dark"]{
  --bg:#060607;
  --bg2:#0b0b0f;
  --fg:#ffffff;
  --muted:rgba(255,255,255,.70);
  --muted2:rgba(255,255,255,.52);
  --line:rgba(255,255,255,.10);
  --card:rgba(255,255,255,.06);
  --shadow:0 30px 80px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "SF Pro Display", "SF Pro Text", Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(1000px 520px at 55% -10%, rgba(198,162,77,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(11,11,15,.04), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  color:var(--fg);
}

a{color:inherit;text-decoration:none}
.container{width:min(var(--maxw), calc(100% - 32px)); margin:0 auto;}

.topbar{
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--line);
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(14px);
}
[data-theme="dark"] .topbar{background: rgba(10,10,12,.70)}

.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;}

.brand{display:flex;align-items:center;gap:12px}
.logo{
  width:40px;height:40px;border-radius:14px;
  background: var(--black);
  display:grid;place-items:center;
  box-shadow: 0 18px 50px rgba(11,11,15,.18);
}
.logo span{
  font-weight:950;
  letter-spacing:.04em;
  color: var(--gold);
  font-size:13px;
}
.brand__name{font-weight:950;font-size:14px;line-height:1.1}
.brand__sub{font-size:12px;color:var(--muted2)}

.nav{display:none;gap:18px}
.nav__link{font-size:13px;color:var(--muted2)}
.nav__link:hover{color:var(--fg)}

.right{display:flex;align-items:center;gap:10px}

.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 12px;border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.75);
  font-size:12px;color:var(--muted);
}
[data-theme="dark"] .pill{background: rgba(255,255,255,.06)}
.dot{width:8px;height:8px;border-radius:99px;background: rgba(198,162,77,.8)}

.lang{display:flex;gap:6px;align-items:center}
.lang__btn{
  border:1px solid var(--line);
  background: rgba(255,255,255,.75);
  color: var(--muted);
  border-radius: 14px;
  padding:8px 10px;
  cursor:pointer;
  font-weight:900;
  font-size:12px;
}
[data-theme="dark"] .lang__btn{background: rgba(255,255,255,.06)}
.lang__btn:hover{border-color: rgba(198,162,77,.45)}
.lang__btn.is-active{
  background: var(--black);
  color:#fff;
  border-color: rgba(198,162,77,.55);
  box-shadow: 0 18px 45px rgba(11,11,15,.12);
}
.lang__btn.is-active::after{
  content:"";
  width:6px;height:6px;border-radius:99px;
  background: var(--gold);
  display:inline-block;
  margin-left:8px;
}

.theme__btn{
  border:1px solid var(--line);
  background: rgba(255,255,255,.75);
  color: var(--muted);
  border-radius: 14px;
  padding:8px 10px;
  cursor:pointer;
  font-weight:900;
  font-size:12px;
}
[data-theme="dark"] .theme__btn{background: rgba(255,255,255,.06)}

.hero{padding: 46px 0 62px;}
.grid{display:grid;grid-template-columns:1fr;gap:22px}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.badge{
  padding:7px 12px;border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.75);
  font-size:12px;color:var(--muted);
}
[data-theme="dark"] .badge{background: rgba(255,255,255,.06)}
.badge.gold{
  border-color: rgba(198,162,77,.45);
}

.h1{font-size:34px;line-height:1.06;letter-spacing:-.02em;margin:0;font-weight:950}
.lead{margin:14px 0 0;color:var(--muted);font-size:16px;line-height:1.65;max-width:52ch}
.tagline{margin-top:14px;font-size:12px;color:var(--muted2);letter-spacing:.04em}

.btnrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:11px 14px;border-radius:16px;border:1px solid var(--line);
  font-weight:950;font-size:14px;
  transition: transform .08s ease, border-color .18s ease, background .18s ease;
}
.btn:active{transform:scale(.98)}
.btn.primary{
  background: var(--black);
  color:#fff;
  border-color: rgba(198,162,77,.55);
  box-shadow: 0 22px 55px rgba(11,11,15,.14);
}
.btn.primary:hover{border-color: rgba(198,162,77,.80)}
.btn.ghost{
  background: rgba(255,255,255,.75);
  color: var(--fg);
}
[data-theme="dark"] .btn.ghost{background: rgba(255,255,255,.06); color: #fff;}
.btn.ghost:hover{border-color: rgba(198,162,77,.40)}

.card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--r2);
  padding:18px;
  box-shadow: var(--shadow);
}
.section{padding:56px 0}
.kicker{
  font-size:12px;
  letter-spacing:.18em;
  color: var(--muted2);
  font-weight:950;
}
.h2{margin:10px 0 0;font-size:26px;font-weight:950}
.p{color:var(--muted);font-size:15px;line-height:1.75;margin:0 0 10px}
.cards{display:grid;grid-template-columns:1fr;gap:14px;margin-top:18px}
.cardTitle{font-weight:950}
.small{font-size:12px;color:var(--muted2);line-height:1.55}

.streamGrid{
  display:grid;grid-template-columns:1fr;gap:10px;margin-top:14px;
}
.linkBtn{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border-radius:16px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.78);
  transition: border-color .18s ease, transform .12s ease;
}
[data-theme="dark"] .linkBtn{background: rgba(255,255,255,.06)}
.linkBtn:hover{border-color: rgba(198,162,77,.50); transform: translateY(-1px)}
.linkBtn .left{display:flex;flex-direction:column;gap:2px}
.linkBtn .name{font-weight:950}
.linkBtn .hint{font-size:12px;color:var(--muted2)}
.linkBtn .open{font-weight:950;color: rgba(198,162,77,.95)}

.footer{
  border-top:1px solid var(--line);
  background: rgba(255,255,255,.72);
}
[data-theme="dark"] .footer{background: rgba(10,10,12,.70)}
.footer__inner{
  display:flex;flex-direction:column;gap:10px;
  padding:18px 0;
  color: var(--muted2);
  font-size:13px;
}
.footer__links{display:flex;flex-wrap:wrap;gap:14px}
.footer__links a:hover{color:var(--fg)}

@media (min-width: 900px){
  .nav{display:flex}
  .grid{grid-template-columns:1.05fr .95fr;gap:26px}
  .cards{grid-template-columns:1fr 1fr 1fr}
  .streamGrid{grid-template-columns:1fr 1fr}
  .footer__inner{flex-direction:row;align-items:center;justify-content:space-between}
  .h1{font-size:46px}
  .lead{font-size:17px}
}

/* Studio Mosaic Master — subtle animated background (no video, low CPU) */
body::before{
  content:"";
  position:fixed;
  inset:-12%;
  z-index:-1;
  pointer-events:none;
  opacity:.55;
  background-image:
    linear-gradient(120deg, rgba(198,162,77,.10) 0 16%, transparent 16% 34%, rgba(11,11,15,.035) 34% 50%, transparent 50% 70%, rgba(198,162,77,.08) 70% 100%),
    linear-gradient( 45deg, rgba(11,11,15,.045) 0 14%, transparent 14% 36%, rgba(198,162,77,.07) 36% 52%, transparent 52% 76%, rgba(11,11,15,.03) 76% 100%),
    linear-gradient( 90deg, rgba(11,11,15,.02) 0 10%, transparent 10% 20%, rgba(198,162,77,.04) 20% 30%, transparent 30% 40%, rgba(11,11,15,.02) 40% 50%, transparent 50% 60%, rgba(198,162,77,.03) 60% 70%, transparent 70% 80%, rgba(11,11,15,.02) 80% 90%, transparent 90% 100%);
  background-size: 820px 520px, 980px 640px, 620px 420px;
  background-position: 0 0, 120px 60px, -80px 120px;
  filter: blur(0px);
  transform: translateZ(0);
  animation: mosaicDrift 22s ease-in-out infinite alternate;
}

body::after{
  content:"";
  position:fixed;
  inset:-6%;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(900px 520px at 60% -10%, rgba(198,162,77,.10), transparent 60%),
    radial-gradient(900px 520px at 0% 30%, rgba(11,11,15,.045), transparent 60%);
  opacity:.85;
  filter: blur(10px);
  transform: translateZ(0);
}

@keyframes mosaicDrift{
  0%   { background-position: 0 0, 120px 60px, -80px 120px; }
  50%  { background-position: -90px 70px, 40px 0px, -20px 60px; }
  100% { background-position: -160px 120px, -30px 40px, 60px 10px; }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce){
  body::before{animation:none;}
}