:root{
  --bg:#0b0b0b;
  --panel:#121212;
  --muted:#bdb6ad;
  --accent:#a33b2e;
  --glass: rgba(255,255,255,0.03);
  color-scheme: dark;
}
body{
  background: linear-gradient(180deg,var(--bg), #070707);
  color:var(--muted);
  line-height:1.45;
}
.tfa-nav{ position:fixed; top:18px; left:24px; right:24px; display:flex; justify-content:space-between; align-items:center; z-index:80 }
.tfa-nav .logo{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--muted) }
.tfa-nav .logo img{ height:44px; width:auto; filter:grayscale(10%) contrast(.95) }
.tfa-nav .logo span{ font: 500 13px/1 "Rubik",system-ui,sans-serif; letter-spacing:.6px }
.tfa-nav .nav-links{ display:flex; gap:18px; align-items:center; font-family:"Rubik",system-ui,sans-serif; letter-spacing:.6px }
.tfa-nav .nav-links a{ color:var(--muted); text-decoration:none; padding:8px 12px; border-radius:6px; transition:.18s }
.tfa-nav .nav-links a:hover{ background:rgba(255,255,255,.02); color:#fff }

.tfa-hero{ position:relative; height:100vh; min-height:640px; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden }
.bg-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; filter:grayscale(.05) contrast(.95) brightness(.65); transform:scale(1.03) }
.tfa-hero::after{ content:""; position:absolute; inset:0; background: radial-gradient(60% 60% at 50% 40%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.85) 100%); z-index:1; pointer-events:none }
.hero-inner{ position:relative; z-index:10; max-width:1100px; width:100%; padding:48px 24px; display:grid; grid-template-columns:1fr 420px; gap:36px; align-items:center }
.brand-block{text-align:left}
.site-title{ font:700 clamp(28px,6vw,48px)/1 "Rubik",sans-serif; color:#fff; letter-spacing:.8px; margin:0 0 8px; animation: floaty 9s ease-in-out infinite; opacity:.98 }
.tagline{ color:var(--muted); font-style:italic; margin:0 0 18px; max-width:60ch }
.cta-row{ margin-top:18px }
.enter-button{ display:inline-flex; align-items:center; gap:10px; background: linear-gradient(90deg, rgba(163,59,46,.14) 0%, rgba(163,59,46,.08) 100%); border:1px solid rgba(163,59,46,.16); color:var(--accent); padding:12px 18px; border-radius:10px; text-decoration:none; font:600 16px/1 "Rubik",sans-serif; backdrop-filter: blur(4px); transition:.16s; box-shadow:0 6px 20px rgba(0,0,0,.5) }
.enter-button:hover{ transform: translateY(-4px); box-shadow:0 14px 40px rgba(0,0,0,.6) }
.secondary{ margin-left:12px; color:var(--muted); font-size:13px; text-decoration:underline }
.release-note{ margin-top:18px; color:rgba(189,182,173,.8); font-size:13px; max-width:44ch }

.media-card{ background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.03); border-radius:12px; padding:18px; backdrop-filter: blur(6px); box-shadow:0 8px 30px rgba(0,0,0,.6) }
.cover{ width:100%; height:220px; border-radius:8px; overflow:hidden; background:linear-gradient(120deg, rgba(10,10,10,.6), rgba(20,20,20,.6)); display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:13px; margin-bottom:14px }
.player{ display:flex; flex-direction:column; gap:10px }
.track{ display:flex; gap:10px; align-items:center }
.track button{ border:0; background:transparent; color:var(--muted); width:40px; height:40px; border-radius:8px; cursor:pointer; font-size:16px; transition:.12s }
.track button:hover{ transform:scale(1.06); color:#fff }
.track .meta{ flex:1; font-size:14px }
.track .meta .title{ font-family:"Rubik",sans-serif; color:#fff; font-weight:600 }
.track .meta .sub{ color:var(--muted); font-size:13px; margin-top:4px }

.scrolldown{ position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:40; text-align:center; color:var(--muted); font: 500 13px/1 "Rubik",sans-serif; display:flex; gap:10px; align-items:center; opacity:.95 }
.scrolldown .chev{ width:36px; height:36px; border-radius:9px; border:1px solid rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; backdrop-filter: blur(4px) }

.tfa-container{ padding:84px 24px 160px; max-width:1100px; margin:0 auto }
.two-col{ display:grid; grid-template-columns:1fr 380px; gap:32px; align-items:start }
.about{ background:var(--panel); padding:22px; border-radius:10px; border:1px solid rgba(255,255,255,.02) }
.about h2, .news h3, .two-col h3 { color:#fff; font-family:"Rubik",sans-serif; margin:0 0 12px }
.about p{ margin-top:6px; color:var(--muted) }
.about-meta{ margin-top:16px; color:var(--muted); font-size:13px }
.art-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px }
.art-grid img{ width:100%; height:110px; object-fit:cover; border-radius:6px; display:block }
.grid-note{ margin-top:12px; color:var(--muted); font-size:13px }

.news{ margin-top:36px }
.news-cards{ display:flex; gap:12px; flex-wrap:wrap }
.news .card{ flex:1; min-width:220px; background:var(--panel); padding:14px; border-radius:8px; border:1px solid rgba(255,255,255,.02) }

.tfa-footer{ margin-top:64px; padding:22px 0 80px; color:var(--muted); text-align:center; font-size:13px }
.tfa-footer p{ margin:.5rem 0 }
.tfa-footer a{ color:var(--muted); text-decoration:underline }
.tfa-footer .copyright{ color:rgba(189,182,173,.7) }

@media (max-width:980px){
  .hero-inner{ grid-template-columns:1fr; text-align:center }
  .two-col{ grid-template-columns:1fr }
  .media-card{ order:-1; margin-bottom:18px }
  .tfa-nav{ padding:0 12px }
}
@media (max-width:520px){
  .cover{ height:180px }
  .art-grid img{ height:88px }
  .tfa-nav .nav-links{ display:none }
}

@keyframes floaty { 0%{transform:translateY(0)} 50%{transform:translateY(-6px)} 100%{transform:translateY(0)} }