*{box-sizing:border-box}
:root{
  --bg:#030712;
  --bg2:#07101c;
  --text:#d9e1ea;
  --gold:#d8b06f;
}
html,body{margin:0;min-height:100%;background:var(--bg)}
body{
  color:var(--text);
  font-family:Georgia,"Times New Roman",serif;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 50% 25%,rgba(47,83,122,.16),transparent 34%),
    radial-gradient(circle at 50% 76%,rgba(29,58,92,.13),transparent 30%),
    linear-gradient(180deg,#030712 0%,#07101c 52%,#030712 100%);
}
body::before{
  content:"";
  position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(circle at center,transparent 38%,rgba(0,0,0,.42) 100%);
}
.landing{
  min-height:100svh;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:clamp(28px,4vw,72px);
  padding:clamp(38px,5vw,80px);
  position:relative;
}
.brand{
  min-width:0;
  display:grid;
  place-items:center;
}
.brand-inner{
  width:100%;
  max-width:620px;
  text-align:center;
}
.logo{
  display:block;
  margin:0 auto;
  max-width:100%;
  height:auto;
  filter:drop-shadow(0 0 34px rgba(73,119,169,.12));
}
.logo-mystic{width:min(100%,620px)}
.logo-crescent{width:min(100%,500px)}
.tagline{
  margin:clamp(20px,2.3vw,32px) auto 0;
  max-width:560px;
  font-size:clamp(1rem,1.5vw,1.28rem);
  line-height:1.55;
  color:#d5dee8;
  letter-spacing:.015em;
}
.divider{
  width:1px;
  height:min(56vh,520px);
  background:linear-gradient(180deg,transparent,rgba(216,176,111,.42),transparent);
  box-shadow:0 0 18px rgba(216,176,111,.08);
}
@media(max-width:900px){
  .landing{
    min-height:auto;
    grid-template-columns:1fr;
    gap:34px;
    padding:56px 22px 64px;
  }
  .divider{
    width:min(72vw,520px);
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(216,176,111,.42),transparent);
  }
  .brand-inner{max-width:680px}
  .logo-mystic{width:min(92vw,640px)}
  .logo-crescent{width:min(82vw,520px)}
}