:root{
  --black:#020202;
  --iron:#0b0b0b;
  --charcoal:#12100d;
  --blood:#650000;
  --gold:#c9a44c;
  --gold-light:#f2d27a;
  --bronze:#8d6b2f;
  --text:#e9ddbd;
}

*{box-sizing:border-box}

body{
  margin:0;
  min-height:100vh;
  overflow:hidden;
  color:var(--text);
  background:radial-gradient(circle at center, #15110a 0%, #050505 42%, #000 100%);
  font-family:'Merriweather', serif;
}

#matrix-bg{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  opacity:.72;
}

.vignette{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at center, transparent 0%, rgba(0,0,0,.45) 46%, rgba(0,0,0,.94) 100%),
    linear-gradient(90deg, rgba(0,0,0,.55), transparent 30%, transparent 70%, rgba(0,0,0,.55));
}

.portal{
  position:relative;
  z-index:2;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:26px;
}

.sigil-card{
  width:min(920px, 96vw);
  padding:34px 38px 40px;
  text-align:center;
  background:
    linear-gradient(135deg, rgba(12,10,7,.94), rgba(3,3,3,.96)),
    repeating-linear-gradient(45deg, rgba(201,164,76,.05) 0 2px, transparent 2px 8px);
  border:1px solid rgba(201,164,76,.5);
  box-shadow:
    0 0 0 4px rgba(0,0,0,.9),
    0 0 0 6px rgba(141,107,47,.45),
    0 30px 90px rgba(0,0,0,.9),
    inset 0 0 42px rgba(201,164,76,.12);
  border-radius:24px;
  position:relative;
  animation:cardRise 1.2s ease both;
}

.sigil-card:before,
.sigil-card:after{
  content:"";
  position:absolute;
  inset:14px;
  border:1px solid rgba(201,164,76,.28);
  border-radius:18px;
  pointer-events:none;
}

.sigil-card:after{
  inset:24px;
  border-style:dashed;
  opacity:.42;
}

.brand-logo{
  width:min(310px, 70vw);
  filter:drop-shadow(0 0 18px rgba(201,164,76,.5));
  animation:logoPulse 3.8s ease-in-out infinite;
}

.creed{
  margin:10px 0 8px;
  font-family:'Cinzel', serif;
  color:var(--gold-light);
  letter-spacing:2px;
  font-size:.78rem;
  opacity:.9;
}

h1{
  margin:6px 0 8px;
  font-family:'Cinzel Decorative', serif;
  font-size:clamp(2rem, 5vw, 4.4rem);
  color:var(--gold);
  text-shadow:0 0 18px rgba(201,164,76,.35), 0 3px 0 #000;
}

.intro{
  max-width:660px;
  margin:0 auto 30px;
  line-height:1.7;
  color:#d8c89c;
}

.portal-links{
  display:grid;
  grid-template-columns:repeat(2, minmax(220px,1fr));
  gap:22px;
}

.gate{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:180px;
  justify-content:center;
  padding:26px 20px;
  text-decoration:none;
  color:var(--text);
  background:
    radial-gradient(circle at top, rgba(201,164,76,.18), transparent 42%),
    linear-gradient(160deg, rgba(25,20,11,.95), rgba(3,3,3,.95));
  border:1px solid rgba(201,164,76,.55);
  border-radius:18px;
  box-shadow:inset 0 0 28px rgba(0,0,0,.8), 0 16px 40px rgba(0,0,0,.55);
  position:relative;
  overflow:hidden;
  transition:.35s ease;
}

.gate:before{
  content:"";
  position:absolute;
  inset:-80px;
  background:conic-gradient(from 0deg, transparent, rgba(242,210,122,.28), transparent 28%);
  opacity:0;
  transition:.35s ease;
  animation:spin 5s linear infinite;
}

.gate:hover{
  transform:translateY(-8px) scale(1.02);
  border-color:var(--gold-light);
  box-shadow:0 0 34px rgba(201,164,76,.35), inset 0 0 32px rgba(201,164,76,.12);
}

.gate:hover:before{opacity:1}

.gate *{position:relative; z-index:1}

.gate-icon{font-size:2.1rem}
.gate strong{
  font-family:'Cinzel Decorative', serif;
  font-size:1.35rem;
  color:var(--gold-light);
}
.gate small{
  color:#cfc09a;
  line-height:1.5;
}

.ornament{
  font-family:'Cinzel', serif;
  color:var(--bronze);
  letter-spacing:4px;
  opacity:.92;
}

.top{margin-bottom:10px}
.bottom{margin-top:28px}

@keyframes cardRise{
  from{opacity:0; transform:translateY(25px) scale(.96); filter:blur(6px)}
  to{opacity:1; transform:translateY(0) scale(1); filter:blur(0)}
}

@keyframes logoPulse{
  0%,100%{filter:drop-shadow(0 0 14px rgba(201,164,76,.42))}
  50%{filter:drop-shadow(0 0 28px rgba(242,210,122,.7))}
}

@keyframes spin{to{transform:rotate(360deg)}}

@media(max-width:720px){
  body{overflow:auto}
  .portal-links{grid-template-columns:1fr}
  .sigil-card{padding:26px 20px 32px}
  .brand-logo{width:min(250px, 72vw)}
}