:root{
  --bg:#050607;
  --ink:#f5f5f3;
  --muted:#a7abb2;
  --soft:#d8dadd;
  --faint:#858a93;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;min-height:100%;background:var(--bg)}
body{
  color:var(--ink);
  font-family:"Segoe UI Variable","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
::selection{background:rgba(255,255,255,.18);color:#fff}

/* Animated black / graphite background. A static gradient remains underneath as fallback. */
.aurora{
  position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;
  background:
    radial-gradient(80% 62% at 28% 18%,rgba(255,255,255,.065),transparent 60%),
    radial-gradient(72% 58% at 78% 40%,rgba(115,120,130,.055),transparent 63%),
    radial-gradient(68% 60% at 48% 86%,rgba(72,76,84,.05),transparent 66%),
    linear-gradient(145deg,#030405 0%,#0a0b0d 48%,#050607 100%);
}
.veil{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(110% 92% at 50% 44%,transparent 34%,rgba(5,6,7,.30) 74%,rgba(5,6,7,.78) 100%),
    linear-gradient(rgba(5,6,7,.10),rgba(5,6,7,.18));
}
.grain{
  position:fixed;inset:-50%;z-index:2;pointer-events:none;opacity:.022;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-2%)}
  60%{transform:translate(-2%,3%)}
  80%{transform:translate(3%,1%)}
}

.landing{
  position:relative;z-index:3;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:42px 22px 34px;
}
.hero{
  width:min(780px,94vw);
  min-height:650px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:36px 24px 40px;
}
.logo{
  width:min(390px,70vw);
  height:auto;
  display:block;
  filter:drop-shadow(0 20px 44px rgba(0,0,0,.42));
  margin-bottom:30px;
}
.danbala-copy{max-width:690px}
.coming{
  font-family:"Bahnschrift SemiCondensed","Bahnschrift","Arial Narrow","Aptos Narrow",sans-serif;
  font-stretch:condensed;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.26em;
  color:var(--soft);
  margin-bottom:10px;
}
h1{
  font-family:"Bahnschrift SemiBold Condensed","Bahnschrift SemiCondensed","Bahnschrift","Arial Narrow","Aptos Narrow",sans-serif;
  font-stretch:condensed;
  font-size:clamp(1.85rem,4.6vw,3.25rem);
  line-height:1;
  letter-spacing:.075em;
  font-weight:600;
  text-shadow:0 0 26px rgba(255,255,255,.035);
}
.subtitle{
  margin:14px auto 0;
  max-width:650px;
  color:var(--muted);
  font-size:clamp(.82rem,1.55vw,.98rem);
  line-height:1.6;
  letter-spacing:.025em;
}
.tagline{
  margin-top:34px;
  font-family:"Bahnschrift SemiCondensed","Bahnschrift","Arial Narrow","Aptos Narrow",sans-serif;
  font-stretch:condensed;
  font-size:clamp(1.2rem,2.7vw,1.72rem);
  line-height:1.2;
  font-weight:600;
  letter-spacing:.035em;
  color:#ecece9;
}
.footer-copy{
  margin-top:auto;
  padding-top:18px;
  text-align:center;
  color:var(--faint);
  font-size:.79rem;
  line-height:1.8;
}
.studio-line{color:#afb3ba;font-weight:500;letter-spacing:.035em}
.footer-copy a{display:inline-block;margin-top:2px;color:#c9ccd1;transition:color .2s ease}
.footer-copy a:hover{color:#fff}

@media (max-width:700px){
  .landing{padding:24px 16px 26px}
  .hero{width:100%;min-height:76vh;padding:28px 10px 32px}
  .logo{width:min(330px,78vw);margin-bottom:26px}
  h1{letter-spacing:.06em}
  .subtitle{max-width:94%}
  .tagline{margin-top:28px;max-width:92%}
  .footer-copy{font-size:.74rem}
}
@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
}