:root{
  --bg: #07070a;
  --bg-alt: #0c0c12;
  --text: #f8ffd0;
  --muted: #9aa0aa;
  --gold: #e6c77a;
  --silver: #b9c2cc;
  --blue: #8fd3ff;
  --accent: var(--gold);

  --card: #12121a;
  --border: rgba(255,255,255,.08);
  --shadow: 0 10px 30px rgba(0,0,0,.45);

  --radius: 14px;
  --pad: 1rem;
  --trans: 220ms cubic-bezier(.2,.6,.2,1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 600px at 70% -10%, rgba(72,77,110,.25), transparent 60%),
              radial-gradient(800px 400px at 10% 0%, rgba(230,199,122,.12), transparent 55%),
              var(--bg);
  line-height:1.6;
}

img{max-width:100%;display:block}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.container{width:min(1100px, 92%);margin-inline:auto}
.section{padding:4.5rem 0}
.section--alt{background:var(--bg-alt)}
.section--tight{padding:3rem 0}
.section__header{margin-bottom:2rem}
.section__header h2{font-family: Orbitron, sans-serif; letter-spacing:.5px; font-weight:700}
.muted{color:var(--muted)}

.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(8px);
  background: rgba(7,7,10,.4);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1rem;
}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:700; color:var(--text)}
.brand img{width:28px;height:28px}

.site-nav{display:flex; gap:1rem; align-items:center}
.site-nav a{padding:.5rem .75rem; border-radius:999px}
.site-nav .btn{margin-left:.25rem}

.nav-toggle{display:none; background:none; border:0; cursor:pointer}
.nav-toggle__bar{display:block; width:24px; height:2px; background:var(--text); margin:5px 0; border-radius:2px}

.nav-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.5);
  opacity:0; visibility:hidden; transition:var(--trans);
}
.nav-overlay.is-open{opacity:1; visibility:visible}

/* Hero */
.hero{position:relative; min-height:74vh; display:grid; place-items:center; padding:4.5rem 1rem; overflow:hidden}
.hero__content{position:relative; z-index:1; text-align:center; width:min(900px, 92%)}
.hero .lead{color:var(--silver); max-width:700px; margin:0 auto 1.25rem}
.hero .glow{
  font-family: Orbitron, sans-serif;
  font-size: clamp(2.2rem, 5vw, 4rem);
  text-transform: uppercase;
  letter-spacing: .12em;
  text-shadow: 0 0 18px rgba(230,199,122,.35), 0 0 60px rgba(143,211,255,.25);
}
#starfield{position:absolute; inset:0; width:100%; height:100%;}

.cta-row{display:flex; gap:.75rem; justify-content:center; margin-top:1rem}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); background:transparent; color:var(--text);
  padding:.7rem 1rem; border-radius:999px; font-weight:600; transition:var(--trans);
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:linear-gradient(90deg, rgba(230,199,122,.15), rgba(143,211,255,.15)); border-color:transparent}
.btn--ghost{background:transparent}

.address-box{
  margin:1.25rem auto 0; display:grid; gap:.6rem; width:min(900px, 92%);
}
.address{
  display:grid; grid-template-columns: 120px 1fr auto; align-items:center;
  gap:.6rem; background:var(--card); border:1px solid var(--border);
  border-radius: var(--radius); padding:.5rem .6rem; box-shadow: var(--shadow);
}
.address .label{color:var(--muted); font-size:.9rem}
.address code{white-space:nowrap; overflow:auto; scrollbar-width:none}
.address .copy{
  border:1px solid var(--border); background:transparent; color:var(--text);
  border-radius:8px; padding:.4rem .6rem; cursor:pointer; transition:var(--trans);
}

/* Cards & Grids */
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow)
}
.grid{display:grid; gap:1rem}
.grid.two{grid-template-columns: 1fr 1fr}
.grid.three{grid-template-columns: repeat(3, 1fr)}
@media (max-width: 900px){
  .grid.two,.grid.three{grid-template-columns:1fr}
}

/* Utility lists */
.bullets{list-style: none; padding:0; margin:.5rem 0 0}
.bullets li{padding-left:1.2rem; position:relative}
.bullets li::before{content:"⟡"; position:absolute; left:0; color:var(--gold)}
.pill-list{list-style:none; display:grid; gap:.5rem; padding:0; margin:.5rem 0 0}
.pill-list li{background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:999px; padding:.5rem .8rem; width:fit-content}
.badge-row,.btn-row,.cta-row,.social-row{display:flex; gap:.6rem; flex-wrap:wrap}
.badge{
  display:inline-flex; align-items:center; border:1px solid var(--border);
  border-radius:999px; padding:.5rem .75rem; background:rgba(255,255,255,.03)
}
.stat .big{font-size:1.6rem; font-weight:700}

/* Timeline */
.timeline{position:relative; margin-top:1rem}
.timeline::before{content:""; position:absolute; left:12px; top:0; bottom:0; width:2px; background:linear-gradient(var(--silver), transparent)}
.tl-item{position:relative; margin-left:2rem; padding:1rem 1rem 1rem 1.25rem; border-left:2px solid transparent}
.tl-item::before{content:""; position:absolute; left:-6px; top:1.2rem; width:14px; height:14px; border-radius:50%; background:radial-gradient(circle at 35% 35%, var(--gold), #7b5f24)}
.tl-item .tag{display:inline-block; margin-top:.3rem; font-size:.8rem; color:var(--muted)}

/* Masonry-ish gallery */
.masonry{columns: 2; column-gap:1rem}
.mason-card{break-inside: avoid; margin-bottom:1rem; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden}
.mason-card figcaption{padding:.6rem .8rem; color:var(--muted)}
@media (max-width:800px){.masonry{columns:1}}

/* Accordion */
.accordion{display:grid; gap:.6rem}
.acc-item{border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--card)}
.acc-btn{
  width:100%; text-align:left; padding:1rem; background:none; border:0; color:var(--text); font-weight:600; cursor:pointer
}
.acc-panel{display:none; padding:0 1rem 1rem}
.acc-item.is-open .acc-panel{display:block}

/* Contact */
.contact{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem; background:var(--card);
  border:1px solid var(--border); border-radius:var(--radius); padding:1rem
}
.contact label{display:grid; gap:.4rem}
.contact label.full{grid-column:1 / -1}
.contact input,.contact textarea{
  width:100%; padding:.7rem .8rem; border:1px solid var(--border); border-radius:10px; background:#0e0e15; color:var(--text)
}
.form-note{margin-top:.5rem; color:var(--silver)}

/* Footer */
.site-footer{padding:2rem 1rem; border-top:1px solid var(--border); text-align:center; color:var(--muted)}

/* Mobile nav */
@media (max-width: 860px){
  .nav-toggle{display:block}
  .site-nav{
    position:fixed; right:0; top:0; bottom:0; width:min(340px, 85vw);
    transform: translateX(100%); transition: var(--trans);
    background: rgba(10,10,16,.96); backdrop-filter: blur(10px);
    padding:4.5rem 1rem 1rem; display:flex; flex-direction:column; gap:.4rem;
    border-left:1px solid var(--border); z-index:60;
  }
  .site-nav.is-open{transform:none}
}
/* Wormhole positioning */
.wormhole{
  position:absolute; inset:0;
  display:grid; place-items:center;
  pointer-events:none; /* so buttons remain clickable */
  mix-blend-mode:screen; /* subtle glow fusion; remove if too bright */
}
.wormhole-svg{
  width:110%;
  height:110%;
  opacity:0.9;
  transform: translateZ(0); /* GPU hint */
  filter: drop-shadow(0 0 24px rgba(230,199,122,.15));
}

/* Keep hero text readable above it */
.hero__content{
  position:relative;
  z-index:2;
  text-shadow: 0 2px 20px rgba(0,0,0,.55);
}

/* Optional: darker base under text for contrast */
.hero::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(380px 220px at 50% 46%, rgba(0,0,0,.0), rgba(0,0,0,.3) 65%, rgba(0,0,0,.55));
  pointer-events:none;
  z-index:1;
}

/* Motion accessibility */
@media (prefers-reduced-motion: reduce){
  .wormhole-svg *{
    animation: none !important;
  }
  .wormhole-svg animate,
  .wormhole-svg animateTransform{ display:none !important; }
  .wormhole-svg{ opacity:.7 }
}
/* Make hero content taller + flex column spaced */
.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

  height: 72vh;      /* controls how spread apart they are */
  padding-top: 1rem; /* adjusts how high the title goes */
}

/* Move title upward */
.hero__content h1.glow {
  margin-top: 0;     /* remove extra spacing */
  margin-bottom: 0.5rem;
}

/* Push subtitle + buttons downward */
.hero__content .lead {
  margin-top: 14rem;   /* adjust to taste */
  margin-bottom: 0.8rem;
}

.cta-row {
  margin-top: 0.8rem;   /* smaller gap */
}
/* Cosmogram Featured Card */
.cosmo-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  padding: 1rem;
}

.cosmo-frame{
  position: relative;
  border-radius: calc(var(--radius) - 4px);
  overflow: hidden;
  /* gold/violet glow frame */
  box-shadow:
    0 0 0 1px rgba(230,199,122,.25) inset,
    0 0 40px rgba(230,199,122,.12),
    0 0 80px rgba(143,211,255,.08);
}

/* soft animated halo */
.cosmo-frame::after{
  content:"";
  position:absolute; inset:-40%;
  background: radial-gradient(closest-side, rgba(230,199,122,.14), rgba(143,211,255,.10), transparent 65%);
  animation: cosmoGlow 8s ease-in-out infinite alternate;
  pointer-events:none;
}

@keyframes cosmoGlow{
  0%   { transform: translate(-6%, -4%) scale(1.05); opacity:.6; }
  100% { transform: translate(6%, 4%)   scale(1.12); opacity:.9; }
}

.cosmo-img{
  width: 100%;
  display: block;
  transform-origin: 50% 50%;
  will-change: transform;
}
@keyframes cosmoSpin{
  to { transform: rotate(360deg); }
}

/* Motion accessibility */
@media (prefers-reduced-motion: reduce){
  .cosmo-frame::after{ animation: none; opacity:.6; }
}

.cosmo-caption{
  margin: .9rem 0 0;
  color: var(--muted);
}

.cosmo-meta{
  margin-top: 1rem;
  display: grid;
  gap: .5rem;
}
.meta-row{
  display: grid;
  grid-template-columns: 120px 1fr auto;
  align-items: center;
  gap: .6rem;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .6rem .7rem;
}
.meta-row .label{ color: var(--muted); }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; overflow: auto; scrollbar-width: none; }

/* Wider on large screens */
#cosmogram .container{ width: min(1200px, 94%); }
.cosmo-card {
  max-width: 850px;     /* NEW width */
  margin: 0 auto;        /* center it */
}
/* Ensure header/nav are above wormhole/starfield */
.site-header { z-index: 300; }
.site-nav    { z-index: 320; }   /* the slide-out panel */
.nav-overlay { z-index: 310; }   /* the dark backdrop */

/* Make sure background visuals never intercept taps */
.hero #starfield,
.hero .wormhole { pointer-events: none; }