/* arcMoor — Coming Soon (Dark Sigil Edition) */
:root{
  --bg:#030707;
  --ink:#eae7e1;
  --ink-dim:#c7c2b9;
  --blood:#751a20;
  --glow:#00c0b2;
  --veil:rgba(0,0,0,.66);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink);
  background: radial-gradient(120% 100% at 50% 0%, #051111 0 55%, #020404 100%) fixed;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  letter-spacing:.01em;
}

.hero{
  position:relative; min-height:100svh; display:grid; place-items:center; overflow:hidden;
}

.hero::before{
  content:""; position:absolute; inset:0;
  background:url('assets/img/forest.jpg') center/cover no-repeat fixed;
  filter:saturate(80%) contrast(110%) brightness(55%) hue-rotate(155deg);
  transform:scale(1.03);
  z-index:-4;
}

.hero::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(140% 100% at 50% 0%, rgba(0,0,0,.0) 0 35%, rgba(0,0,0,.65) 70%, rgba(0,0,0,.92) 100%);
  z-index:-3;
}

/* drifting fog */
.fog, .fog2{
  position:absolute; inset:-20%;
  background: url('assets/img/forest.jpg') center/cover no-repeat;
  filter: blur(18px) brightness(60%) saturate(120%) opacity(.08);
  mix-blend-mode:screen;
  animation: float 60s linear infinite;
  z-index:-2;
}
.fog2{ animation-duration:95s; animation-direction:reverse; filter: blur(22px) brightness(55%) opacity(.07) }

@keyframes float { to{ transform: translate3d(6%, -8%, 0) } }

.wrap{ width:min(1000px, 90vw); margin-inline:auto; padding:clamp(20px, 4vw, 40px) }

.panel{
  position:relative;
  padding:clamp(22px, 3.5vw, 34px);
  border-radius:22px;
  background: color-mix(in oklab, var(--veil) 88%, #001212);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(8px) saturate(120%);
  box-shadow: 0 30px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) inset;
}

/* sigil frame */
.panel::before, .panel::after{
  content:""; position:absolute; inset:12px; border-radius:18px;
  border:1px solid rgba(255,255,255,.05);
  mask: radial-gradient(130% 80% at 50% 0%, transparent 0 38%, #000 70%);
  pointer-events:none;
}
.panel::after{
  inset: -2px;
  border:1px solid rgba(117,26,32,.35);
  filter: drop-shadow(0 0 22px rgba(117,26,32,.25));
  opacity:.7;
}

.brand{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:clamp(14px, 2vw, 22px) }

.logo{
  width:min(620px, 78vw); height:auto;
  filter: drop-shadow(0 20px 45px rgba(0,0,0,.8)) drop-shadow(0 0 14px rgba(0,192,178,.25));
}

.tag{
  margin-top:2px;
  font-size: clamp(18px, 2.4vw, 22px);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-dim);
  text-shadow: 0 0 1px rgba(0,0,0,.6);
	font-weight: thin;
}

.mantra{
  font-size: clamp(82px, 6.2vw, 30px);
  line-height:1.3;
  letter-spacing:.03em;
  margin-top:6px;
  text-wrap:balance;
	font-weight: 800;
}

.hr{
  margin: clamp(14px, 2.5vw, 22px) auto;
  width:min(420px, 70%);
  height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
}

.links{
  display:flex; gap:14px; justify-content:center; align-items:center;
}

a.button{
  --b:rgba(255,255,255,.14);
  padding:.85rem 1.2rem;
  border-radius:12px;
  border:1px solid var(--b);
  background:linear-gradient(180deg, rgba(117,26,32,.22), rgba(117,26,32,.08));
  text-decoration:none; color:var(--ink);
  font-weight:700; letter-spacing:.04em;
  transition: transform .15s ease, border .2s ease, filter .2s ease;
}
a.button:hover{ transform: translateY(-1px); border-color: rgba(117,26,32,.5) }
a.button:active{ transform: translateY(1px) }

.footer{
  margin-top: clamp(16px, 3vw, 28px);
  color:var(--ink-dim);
  font-size: 13px; text-align:center;
}
.footer a{ color:var(--ink-dim); text-underline-offset:3px }