/* ====== Moozy Styles (CA block + Arrows + Perfect Snap) ====== */
:root{
  --bg:#031b1e;
  --bg2:#071f24;
  --glass:rgba(173,255,246,0.06);
  --line:rgba(140,255,240,0.25);
  --text:#cffffa;
  --muted:#9ae9e0;
  --accent:#59f5e3;
  --accent-2:#5ad1ff;
  --shadow:0 20px 60px rgba(0,0,0,.45), inset 0 0 60px rgba(89,245,227,.08);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Space Grotesk',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: radial-gradient(1200px 700px at 70% -10%, rgba(89,245,227,.08), transparent 60%), linear-gradient(180deg, var(--bg), var(--bg2));
  color:var(--text);
  overflow:hidden; /* prevent body scroll */
}

/* floating star canvas */
#stars{ position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.6; }

/* Topbar */
.topbar{
  position:fixed;left:0;top:0;right:0;height:64px;display:flex;
  align-items:center;justify-content:space-between;padding:0 18px;
  z-index:12;background:linear-gradient(180deg, rgba(3,27,30,.9), rgba(3,27,30,0));
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid rgba(140,255,240,0.12);
}
.logo{ font-family:'Unbounded', cursive;font-weight:800;letter-spacing:.5px; font-size:22px; color:var(--accent); text-shadow:0 0 14px rgba(89,245,227,.55) }
.links{display:flex;gap:10px;align-items:center}
.pill{
  appearance:none;border:1px solid var(--line);outline:0;background:var(--glass);
  color:var(--text); padding:8px 12px; border-radius:999px; font-weight:600; font-size:12px;
  letter-spacing:.3px; cursor:pointer; transition:all .2s ease; text-decoration:none;
  box-shadow:var(--shadow);
}
.pill:hover{transform:translateY(-2px);border-color:var(--accent); box-shadow:0 12px 30px rgba(89,245,227,.18)}
.pill.ghost{background:transparent}

/* On-screen arrows */
.nav-arrows{
  position:fixed; right:18px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:10px; z-index:11; pointer-events:auto;
}
.arrow{
  width:48px; height:48px; border-radius:50%;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(89,245,227,.10), rgba(90,209,255,.08));
  box-shadow:var(--shadow);
  color:var(--accent);
  backdrop-filter: blur(8px) saturate(120%);
  cursor:pointer; display:grid; place-items:center;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .2s;
  animation:breath 3s ease-in-out infinite;
}
.arrow:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(89,245,227,.25); border-color:var(--accent) }
.arrow:disabled{ opacity:.35; cursor:default; animation:none }
@keyframes breath{ 0%,100%{ box-shadow:0 10px 30px rgba(89,245,227,.12) } 50%{ box-shadow:0 14px 50px rgba(89,245,227,.28) } }

/* Snap container */
#snap{
  position:relative;
  height:calc(100vh - 64px);
  margin-top:64px;
  overflow-y:auto;
  scroll-snap-type:y mandatory;
  scroll-behavior:smooth;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
}

/* Sections */
.section{
  position:relative;
  min-height:100%; display:flex; align-items:center;
  z-index:1;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}
.container{max-width:1120px;margin:0 auto;padding:0 24px}

/* Hero */
.hero{isolation:isolate}
.hero-bg{ position:absolute; inset:0; background-image:linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.25)), var(--bg); background-size:cover; background-position:center }
.hero .overlay{ position:absolute; inset:0; background:radial-gradient(800px 400px at 50% 20%, rgba(0,255,222,.15), transparent 50%), radial-gradient(900px 500px at 40% 120%, rgba(0,190,255,.15), transparent 60%); mix-blend-mode:screen; opacity:.9 }
.hero-inner{ position:relative; z-index:2; text-align:center; width:100%; padding:8vh 0 8vh; display:flex; flex-direction:column; align-items:center; gap:20px }
.headline{ font-family:'Unbounded', cursive; font-size:clamp(48px, 8vw, 120px); margin:0; line-height:.9; letter-spacing:2px }
.glow{ text-shadow: 0 0 22px rgba(89,245,227,.55), 0 0 62px rgba(90,209,255,.38) }
.tagline{ margin:0; font-size:clamp(16px,1.9vw,22px); color:var(--muted) }
.tagline span{color:var(--accent-2)}
.cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.btn{ background:linear-gradient(135deg, rgba(89,245,227,.18), rgba(90,209,255,.18)); border:1px solid var(--line); padding:14px 20px; border-radius:18px; color:var(--text); text-decoration:none; font-weight:700; letter-spacing:.5px; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, border-color .2s; box-shadow:var(--shadow) }
.btn:hover{ transform:translateY(-3px); border-color:var(--accent); box-shadow:0 14px 50px rgba(89,245,227,.25) }
.btn.secondary{ background:rgba(3,27,30,.35) }
.btn.outline{ background:transparent }
.btn.big{ font-size:18px; padding:16px 26px; border-radius:22px }
.center{justify-content:center}

@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }
.scroll-hint{ position:absolute; left:0; right:0; bottom:18px; display:flex; justify-content:center; opacity:.7; font-size:12px; letter-spacing:2px; text-transform:uppercase }

/* About */
.about{padding:10vh 0; overflow:hidden}
.section-title{ text-align:center; font-family:'Unbounded',cursive; font-size:clamp(36px,4.2vw,64px); margin:0 0 16px; text-shadow:0 0 22px rgba(89,245,227,.35) }
.lead{ text-align:center; color:var(--muted); font-size:clamp(16px,1.7vw,20px); margin:0 auto 30px; max-width:900px }
.grid{ display:grid; gap:18px; grid-template-columns:repeat(12,1fr); margin-top:24px }
.card{ grid-column: span 6; background:linear-gradient(180deg, rgba(89,245,227,.06), rgba(90,209,255,.04)); border:1px solid var(--line); border-radius:24px; padding:22px; box-shadow:var(--shadow); backdrop-filter: blur(8px) saturate(140%) }
.card h3{ margin-top:2px; font-size:20px }
.list{ margin:8px 0 0 18px }

.about-fly{ position:absolute; pointer-events:none; opacity:.75; filter:drop-shadow(0 8px 40px rgba(0,255,233,.2)); animation:float 8s ease-in-out infinite; width:min(26vw, 280px) }
.about-fly.left{ left:4%; top:18% }
.about-fly.right{ right:6%; bottom:10%; animation-delay:2s }
@media (max-width:900px){
  .card{ grid-column: span 12 }
  .about-fly{ width:160px; opacity:.6 }
  .about-fly.left{ left:-20px; top:auto; bottom:6% }
  .about-fly.right{ right:-10px; top:8%; bottom:auto }
}

/* Roadmap */
.roadmap{ padding:12vh 0 }
.steps{ display:grid; gap:18px; grid-template-columns:repeat(3,1fr) }
.step{ background:linear-gradient(180deg, rgba(89,245,227,.06), rgba(90,209,255,.04)); border:1px solid var(--line); border-radius:26px; padding:22px; box-shadow:var(--shadow); min-height: 180px }
.badge{ display:inline-grid; place-items:center; width:34px; height:34px; border-radius:999px; border:1px solid var(--accent); box-shadow:0 0 22px rgba(89,245,227,.25) inset; font-weight:800; color:var(--accent-2); margin-bottom:8px }

/* Contract block */
.contract-wrap{ margin-top:22px; display:flex; flex-direction:column; align-items:center; gap:10px }
.contract{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:linear-gradient(180deg, rgba(89,245,227,.06), rgba(90,209,255,.05));
  border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
  max-width:min(100%, 760px);
}
.contract .label{ font-weight:800; font-family:'Unbounded', cursive; color:var(--accent-2); letter-spacing:.8px }
.contract .hash{ font-family:var(--mono); opacity:.9; white-space:nowrap; overflow-x:auto }
.copy{
  margin-left:auto;
  display:inline-grid; place-items:center;
  gap:8px; padding:10px 14px; border-radius:12px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(89,245,227,.12), rgba(90,209,255,.10));
  color:var(--text); cursor:pointer; font-weight:800; letter-spacing:.5px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .2s ease;
}
.copy:hover{ transform:translateY(-2px); border-color:var(--accent); box-shadow:0 10px 30px rgba(89,245,227,.22) }
.copy:active{ transform:translateY(0) scale(.98) }

.copied-toast{
  font-size:12px; padding:6px 10px; border-radius:10px;
  border:1px solid var(--line);
  background:rgba(3,27,30,.6);
  backdrop-filter: blur(8px);
  color:var(--muted);
  opacity:0; transform:translateY(-6px);
  transition:opacity .2s ease, transform .2s ease;
}
.copied-toast.show{ opacity:1; transform:translateY(0) }

@media (max-width:900px){
  .steps{ grid-template-columns:1fr }
  .contract{ width:100% }
}

/* Reveal on scroll */
.reveal{ opacity:0; transform:translateY(18px); transition:all .6s ease }
.reveal.show{ opacity:1; transform:none }

/* Footer */
.footer{ border-top:1px solid rgba(140,255,240,0.12); padding:18px 0; background:rgba(3,27,30,.6); backdrop-filter: blur(8px) }
.footer .ftr{ display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12px; color:var(--muted) }
.tiny{ opacity:.7 }

/* --- Toolbar CA duplicate (non-intrusive) --- */
.topbar{ position:fixed; } /* ensure positioned ancestor for absolute centering */
.toolbar-ca{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  z-index:13;
  pointer-events:none; /* do not block logo/links clicks */
  max-width:min(640px, 70vw);
  padding:0 18px; /* not flush to edges */
}
.toolbar-ca .contract{ pointer-events:auto; } /* restore interactivity inside */
.contract--toolbar{
  padding:8px 10px;
  border-radius:12px;
  gap:8px;
}
.contract--toolbar .label{ font-size:12px }
.contract--toolbar .hash{ font-size:12px }
.contract--toolbar .copy{ padding:8px 10px }
@media (max-width:720px){
  .toolbar-ca{ display:none } /* avoid crowding on small screens */
}