:root{
  --bg:#070a0d;
  --ink:#ecf1f6;
  --muted:#a6b0ba;
  --emerald:#00c087;
  --gold:#c9a14a;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--ink); background: var(--bg); overflow-x:hidden;
}

.intro{
  position:fixed; inset:0; background:#000; display:flex; align-items:center; justify-content:center;
  flex-direction:column; z-index:50; opacity:1; transition: opacity .6s ease;
}
.intro.hidden{ opacity:0; pointer-events:none }
.intro-glow{
  position:absolute; inset:0;
  background: radial-gradient(800px 400px at 50% 60%, rgba(0,192,135,.14), transparent 70%),
              radial-gradient(600px 300px at 50% 40%, rgba(201,161,74,.12), transparent 70%);
  filter: blur(18px); opacity:.7;
}
.intro-lines{ position:relative; z-index:2; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #9cebd6; }
.intro .line{
  opacity:0; transform: translateY(8px) scale(0.98);
  text-shadow: 0 0 12px rgba(0,192,135,.6), 0 0 28px rgba(201,161,74,.3);
  transition: opacity .35s ease, transform .35s ease;
  padding:4px 10px; border-left:2px solid rgba(0,192,135,.5); margin:6px 0;
}
.intro .line.show{ opacity:1; transform: translateY(0) scale(1) }

#matrixRear,#matrixMid,#matrixFront{
  position:fixed; inset:0; pointer-events:none; z-index:0;
}
#matrixRear{ opacity:.22 }
#matrixMid{ opacity:.33 }
#matrixFront{ opacity:.55 }

.holo{
  position:fixed; right:4vw; top:20vh; width:min(34vw, 460px); aspect-ratio: 1 / 0.75;
  transform: perspective(900px) rotateY(-18deg) rotateX(6deg);
  border:1px solid rgba(156,235,214,.25);
  background: linear-gradient(180deg, rgba(156,235,214,.08), rgba(201,161,74,.05));
  box-shadow: 0 14px 60px rgba(0,255,180,.12), inset 0 0 80px rgba(201,161,74,.05);
  border-radius: 16px; overflow:hidden; z-index:1;
}
.holo img{ width:100%; height:100%; object-fit:cover; opacity:.9; mix-blend-mode:screen; }
.holo .scanlines{
  position:absolute; inset:0; background: repeating-linear-gradient(transparent, transparent 3px, rgba(0,255,200,.08) 3px, rgba(0,255,200,.08) 4px);
  opacity:.25; animation: scan 6s linear infinite;
}
@keyframes scan{ to{ transform: translateY(100%) } }

.site-header{
  position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between;
  padding: clamp(16px, 2.5vw, 28px);
}
.brand h1{ margin:0; font-weight:800; letter-spacing:.4px; text-transform:uppercase; font-size: clamp(22px, 3.2vw, 40px); }
.brand h1 span{ color:var(--ink) }
.tagline{ margin:.25rem 0 0; color:var(--muted); font-size:clamp(12px,1.3vw,14px) }
.controls{ display:flex; gap:10px; align-items:center; }

.crest-wrap{ position:relative; width:140px; height:140px; perspective: 900px; }
.crest-3d{
  position:absolute; inset:0; transform-style:preserve-3d; animation: orbit 18s linear infinite;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.5));
}
.crest-3d img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; backface-visibility:hidden;
  transform: translateZ(0px) rotateY(0deg);
}
@keyframes orbit{ to{ transform: rotateY(360deg) } }

.halo-sphere{ position:absolute; inset:-6px; filter: blur(10px); }
.halo.ring{
  position:absolute; inset:0; border-radius:50%;
  background: conic-gradient(from 0deg, rgba(201,161,74,.85), rgba(0,192,135,.85), rgba(201,161,74,.85));
  opacity:.65; mix-blend-mode:screen; animation: haloSpin 20s linear infinite;
  mask: radial-gradient(farthest-side, transparent 58%, #000 59%);
}
.halo.r2{ animation-duration: 26s; opacity:.55; transform: scale(.98) }
.halo.r3{ animation-duration: 34s; opacity:.45; transform: scale(1.06) }
@keyframes haloSpin{ to{ transform: rotate(360deg) } }

.wrap{ width:min(1100px, 92vw); margin:0 auto; padding: 8px 0 40px; display:grid; grid-template-columns: 1fr; gap:20px; position:relative; z-index:2; }
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.00));
  border:1px solid rgba(255,255,255,.06); border-radius:20px; padding: clamp(16px, 2.4vw, 28px);
  box-shadow: 0 20px 60px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.02);
  backdrop-filter: blur(6px);
}
.announcement h2{ margin:0 0 .3rem; font-size: clamp(22px, 2.4vw, 30px); }
.announcement h3{ margin:.1rem 0 1rem; color:var(--muted) }
.content p{ margin:.6rem 0; line-height:1.7; }
.actions{ display:flex; gap:12px; margin-top:16px; flex-wrap:wrap; }

.btn{
  appearance:none; border:1px solid rgba(255,255,255,.12);
  background: #0f141a; color:var(--ink); padding:10px 14px; border-radius:12px;
  cursor:pointer; font-weight:700; letter-spacing:.2px;
}
.btn.primary{ background: linear-gradient(90deg, rgba(201,161,74,.25), rgba(0,192,135,.25)); border-color:rgba(201,161,74,.5) }
.select{ padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.12); background:#0f141a; color:var(--ink); }

.ai-band{ display:flex; align-items:center; gap:8px; margin-bottom:10px; padding:6px 10px; width:max-content;
  border:1px solid rgba(0,192,135,.35);
  background: linear-gradient(90deg, rgba(0,192,135,.1), rgba(201,161,74,.1));
  border-radius:999px; }
.pulse-dot{ width:10px; height:10px; border-radius:50%; background: var(--emerald);
  box-shadow: 0 0 16px rgba(0,192,135,.8), 0 0 30px rgba(0,192,135,.6); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{transform:scale(.9); opacity:.8} 50%{transform:scale(1.25); opacity:1} }
.ai-label{ font-size:.9rem; color:var(--ink); opacity:.9 }

.status-list{ margin:.25rem 0 0 1rem; line-height:1.8 }
.site-footer{ text-align:center; color:var(--muted); padding:24px 0 40px; position:relative; z-index:2 }
@media (min-width: 960px){
  .wrap{ grid-template-columns: 2fr 1fr; }
  .announcement{ order:1 }
  .updates{ order:2 }
}