/* ========== KAUKET THEME ========== */
:root{
  --bg:#070814;
  --bg2:#0e0f1f;
  --gold:#f4c95d;
  --gold2:#caa446;
  --gold3:#8b6a2a;
  --sand:#a37736;
  --text:#f6f3ea;
  --muted:#c9c3b6;
  --accent:#6ea3ff;
  --shadow:0 10px 40px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Alegreya Sans SC", Papyrus, "Trebuchet MS", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 600px at 70% -20%, #1b1f4b66, transparent),
              radial-gradient(900px 500px at 0% 0%, #24143b66, transparent),
              var(--bg);
  overflow-x:hidden;
}

/* CANVAS LAYERS */
#starfield,#sand{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:-3;
  display:block;
}
#sand{ z-index:-2; mix-blend-mode:screen; opacity:.15;}

/* NAV */
.nav{position:sticky; top:0; z-index:20; backdrop-filter: blur(6px);}
.nav:before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(#ffffff08,#00000008);
  border-bottom:1px solid #ffffff12;
  pointer-events:none;
}
.nav-inner{
  max-width:1200px; margin:auto; padding:12px 20px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{display:flex; align-items:baseline; gap:12px; text-decoration:none; color:var(--text);}
.logo-gold{
  font-family:"Cinzel Decorative", Papyrus, serif;
  font-weight:900; letter-spacing:.14em; font-size:22px;
  background:linear-gradient(180deg,var(--gold),var(--gold2) 60%, var(--gold3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 2px 10px #00000060;
}
.ticker{padding:4px 8px; border:1px solid #ffffff22; border-radius:999px; font-size:12px; opacity:.85}
.menu a{margin-left:20px; text-decoration:none; color:var(--muted); font-weight:700; letter-spacing:.08em}
.menu a:hover{color:var(--text)}

/* HERO */
.hero{position:relative; padding:60px 20px 100px}
.pyramids{position:absolute; left:0; right:0; bottom:0; height:240px; z-index:-1; opacity:.65}
.moon{
  position:absolute; right:10vw; top:80px; width:160px; height:160px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #d6d6ff, #a5a5d6 60%, #44446b);
  box-shadow:0 0 80px #6ea3ff44, inset 0 0 40px #ffffff55; filter:saturate(1.1);
  z-index:-1;
}
.hero-inner{max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center}
.title{
  font-family:"Cinzel Decorative", Papyrus, serif;
  font-weight:900; letter-spacing:.18em; margin:0 0 6px 0; line-height:1.1;
}
.title small{display:block; font-family:"Alegreya Sans SC"; letter-spacing:.2em; font-size:14px; opacity:.8}
.lead{font-size:18px; color:var(--muted); line-height:1.6}
.cta{display:flex; gap:14px; margin-top:16px}
.btn{display:inline-block; padding:12px 20px; border-radius:14px; text-decoration:none; color:var(--text); background:#ffffff0f; border:1px solid #ffffff26; box-shadow:var(--shadow); font-weight:800; letter-spacing:.06em; transition:transform .2s ease,box-shadow .2s ease, background .2s ease}
.btn:hover{transform:translateY(-2px); box-shadow:0 14px 40px #0008; background:#ffffff18}
.btn.gold{background:linear-gradient(180deg,var(--gold),var(--gold2)); color:#1b1406; border-color:#d9b35d}
.btn.outline{background:transparent}
.badge{margin-top:12px; font-size:12px; opacity:.75; letter-spacing:.12em}

.hero-art .frame{
  position:relative; border-radius:22px; overflow:hidden; border:3px solid var(--gold3);
  background:linear-gradient(135deg, #3a2a12, #1e1408);
  padding:10px;
  box-shadow:0 40px 80px #000a, inset 0 0 0 2px #f7dfa855;
}
.hero-art img{width:100%; display:block; border-radius:14px; box-shadow:inset 0 0 40px #0008}
.frame-shine{
  position:absolute; inset:-2px; border-radius:20px;
  background: conic-gradient(from 0deg at 50% 50%, #ffffff10, transparent 20%, #ffffff08 40%, transparent 60%, #ffffff10 80%, transparent);
  mix-blend-mode:screen; animation:spin 8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* SECTIONS */
.section{padding:96px 20px}
.container{max-width:1100px; margin:0 auto}
.section-title{
  font-family:"Cinzel Decorative"; letter-spacing:.12em; font-weight:900; margin:0 0 26px 0;
  text-shadow:0 4px 30px #000;
}
.cols{display:grid; grid-template-columns:1.2fr .8fr; gap:28px}
.card{
  background:linear-gradient(180deg,#0b0d1e,#04050c);
  border:1px solid #ffffff1a; border-radius:18px; padding:22px; box-shadow:var(--shadow)
}
.gold-outline{border-color:#e8c87555; box-shadow:0 0 0 1px #8b6a2a88 inset, var(--shadow)}
.tenets{list-style:"𓂀  "; padding-left:26px}
.tenets li{margin:8px 0}
.token-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.chip-row{margin-top:12px; display:flex; flex-wrap:wrap; gap:10px}
.chip{padding:6px 10px; border:1px solid #ffffff24; border-radius:999px; font-size:12px; opacity:.9}

/* TIMELINE */
.timeline .steps{counter-reset: step; list-style:none; padding-left:0; margin:0; display:grid; gap:14px}
.timeline .steps li{
  position:relative; padding:16px 16px 16px 52px; background:#0b0d1e; border:1px solid #ffffff17; border-radius:14px;
}
.timeline .steps li:before{
  counter-increment: step; content: counter(step);
  position:absolute; left:14px; top:14px;
  width:28px; height:28px; display:grid; place-items:center;
  border-radius:50%; background:linear-gradient(180deg,var(--gold),var(--gold2)); color:#1b1406; font-weight:900;
  box-shadow:0 8px 20px #0008;
}

/* COMMUNITY */
.center{text-align:center}
.cta-row{display:flex; gap:16px; justify-content:center; margin-top:12px}
.btn.large{padding:14px 24px; font-size:18px; border-radius:18px}

/* FOOTER */
.footer{padding:50px 20px 70px; background:#04050c; border-top:1px solid #ffffff14; }
.foot{display:grid; gap:12px; place-items:center; text-align:center}
.brandline{display:flex; align-items:baseline; gap:10px}

/* FLOATING GLYPHS */
.glyphs{position:fixed; inset:0; pointer-events:none; z-index:-1}
.glyphs .glyph{
  position:absolute; font-size:26px; opacity:.18; color:#ffd87a; filter:blur(.2px);
  animation:floatUp 14s linear infinite;
}
.glyphs .glyph:nth-child(1){left:8%; bottom:-10%; animation-duration:18s; font-size:28px}
.glyphs .glyph:nth-child(2){left:20%; bottom:-12%; animation-duration:22s; font-size:30px}
.glyphs .glyph:nth-child(3){left:42%; bottom:-8%; animation-duration:16s}
.glyphs .glyph:nth-child(4){left:65%; bottom:-14%; animation-duration:20s}
.glyphs .glyph:nth-child(5){left:82%; bottom:-12%; animation-duration:24s}
.glyphs .glyph:nth-child(6){left:55%; bottom:-10%; animation-duration:19s}
@keyframes floatUp {
  0%{transform:translateY(0) rotate(0deg); opacity:.0}
  10%{opacity:.2}
  90%{opacity:.2}
  100%{transform:translateY(-120vh) rotate(180deg); opacity:0}
}

/* SHINE ON TITLE */
.shine{position:relative; display:inline-block; padding-right:.25em}
.shine:after{
  content:""; position:absolute; inset:-6px -8px; background:linear-gradient(120deg, transparent 0%, #ffffff20 20%, transparent 40%);
  transform:skewX(-20deg); animation:titleShine 4.5s ease-in-out infinite;
}
@keyframes titleShine{
  0%{transform:translateX(-140%) skewX(-20deg)}
  100%{transform:translateX(140%) skewX(-20deg)}
}

/* REVEAL */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .8s ease, transform .8s ease}
.reveal.show{opacity:1; transform:none}

@media (max-width: 920px){
  .hero-inner{grid-template-columns:1fr; gap:24px}
  .cols{grid-template-columns:1fr}
  .token-grid{grid-template-columns:1fr}
  .moon{right:6vw; top:20px; width:120px; height:120px}
}