:root{
  --ink:#140816;
  --plum:#2a1028;
  --blush:#ffc2d8;
  --orchid:#e7b4ff;
  --pearl:#fff6fb;
  --champagne:#f6d7b8;
  --steel:#c9b3c4;
  --line:rgba(255,246,251,0.16);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
html, body{
  background:var(--ink);
  color:var(--pearl);
  font-family:'Outfit', sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:#ff8fb8; color:#2a0618; }
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:70;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,194,216,0.035) 0px,
    rgba(255,194,216,0.035) 1px,
    transparent 1px,
    transparent 4px
  );
  mix-blend-mode:soft-light;
}
.noise{
  position:fixed;
  inset:-20%;
  z-index:80;
  pointer-events:none;
  opacity:0.22;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation:grain .5s steps(2) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}
  50%{transform:translate(-1%,1%)}
  100%{transform:translate(0,0)}
}
#bgvid{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  pointer-events:none;
  background:#140816 url("../hello-world.jpg") center / cover no-repeat;
  filter:brightness(0.55) saturate(0.9) contrast(1.05) hue-rotate(12deg);
}
#field{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}
.hero, section, footer{ position:relative; z-index:1; }
.silk{
  position:fixed;
  top:0; left:0; right:0;
  height:28px;
  z-index:120;
  overflow:hidden;
  display:flex;
  align-items:center;
  background:linear-gradient(90deg, #3a102c, #6b2458 40%, #2a1438);
  border-bottom:1px solid rgba(255,194,216,0.35);
  color:var(--blush);
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:lowercase;
}
.silk span{
  white-space:nowrap;
  animation:marquee 28s linear infinite;
}
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.gold-grad{
  background:linear-gradient(120deg, #fff6fb 0%, #ffc2d8 42%, #e7b4ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.nav{
  position:fixed;
  top:28px; left:0; right:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:0 clamp(20px, 4vw, 56px);
  height:72px;
  background:rgba(20,8,22,0.72);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.nav .brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:'Fraunces', serif;
  font-style:italic;
  font-weight:500;
  font-size:22px;
  letter-spacing:0.02em;
  color:var(--pearl);
  text-decoration:none;
  white-space:nowrap;
}
.nav .brand img{
  width:36px; height:36px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid rgba(255,194,216,0.8);
  box-shadow:0 0 0 3px rgba(231,180,255,0.18);
}
.nav .links{ display:flex; align-items:center; gap:clamp(14px, 2vw, 28px); }
.nav .links a{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:rgba(255,246,251,0.72);
  text-decoration:none;
  padding:6px 2px;
}
.nav .links a:hover{ color:var(--blush); }
.btn-gold{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:#2a0618;
  text-decoration:none;
  border:0;
  border-radius:999px;
  padding:13px 22px;
  background:linear-gradient(120deg, #fff6fb, #ffc2d8 55%, #e7b4ff);
  transition:transform .25s ease, filter .25s ease;
  white-space:nowrap;
  cursor:pointer;
}
.btn-gold:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.btn-gold .arrow{ transition:transform .25s ease; }
.btn-gold:hover .arrow{ transform:translate(3px,-3px); }
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  overflow:hidden;
  background:transparent;
  padding-top:110px;
}
.hero .bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 42% 68% at 50% 62%, rgba(20,8,22,0.88), rgba(20,8,22,0.28) 60%, transparent 78%),
    radial-gradient(ellipse 40% 30% at 18% 20%, rgba(255,143,184,0.22), transparent 62%),
    radial-gradient(ellipse 36% 28% at 82% 16%, rgba(192,132,252,0.24), transparent 64%);
  z-index:0;
}
.code-col{
  position:absolute;
  top:118px;
  z-index:1;
  max-width:220px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  line-height:1.7;
  letter-spacing:0.06em;
  color:rgba(255,194,216,0.72);
  white-space:pre;
  pointer-events:none;
  user-select:none;
}
.code-col.left{ left:clamp(12px, 3vw, 40px); }
.code-col.right{ right:clamp(12px, 3vw, 40px); text-align:right; color:rgba(231,180,255,0.75); }
.hero-stage{
  position:relative;
  z-index:2;
  width:min(1280px, 100%);
  padding:36px clamp(16px, 4vw, 48px) 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.sys{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.28em;
  color:var(--orchid);
  margin-bottom:14px;
  text-transform:uppercase;
}
.sys i{
  display:inline-block;
  width:7px; height:7px;
  margin-right:10px;
  border-radius:50%;
  background:#ff8fb8;
  box-shadow:0 0 12px #ff8fb8;
  vertical-align:middle;
  animation:signal 1.8s ease-in-out infinite;
}
@keyframes signal{
  0%, 100%{ opacity:1; }
  50%{ opacity:0.35; }
}
.wordmark-wrap{ position:relative; width:100%; display:flex; flex-direction:column; align-items:center; }
.wordmark{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-style:italic;
  font-size:clamp(72px, 14vw, 188px);
  line-height:0.86;
  letter-spacing:-0.04em;
  text-align:center;
  width:100%;
  user-select:none;
}
.hero-tagline{
  width:min(860px, 92%);
  margin:18px auto 0;
  display:flex;
  justify-content:space-between;
  font-family:'IBM Plex Mono', monospace;
  font-size:clamp(11px, 1.3vw, 14px);
  letter-spacing:0.28em;
  color:var(--pearl);
}
.mani-figure{
  position:relative;
  margin-top:8px;
  width:clamp(220px, 32vw, 440px);
  z-index:2;
  filter:drop-shadow(0 24px 40px rgba(20,8,22,0.75));
  animation:rise 7s ease-in-out infinite;
}
@keyframes rise{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-14px); }
}
.mani-figure img{ width:100%; display:block; }
.hero-scroll{
  position:relative;
  z-index:3;
  margin:8px 0 28px;
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  letter-spacing:0.42em;
  text-transform:uppercase;
  color:rgba(255,246,251,0.5);
}
section, header{ scroll-margin-top:110px; }
.wrap{
  width:min(1180px, 100%);
  margin:0 auto;
  padding:0 clamp(20px, 4vw, 56px);
}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--orchid);
  margin-bottom:18px;
}
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:none; }
.banner-sec{
  background:#0c0610;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.banner-sec img{ width:100%; display:block; max-height:420px; object-fit:cover; object-position:center; }
.banner-label{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:12px clamp(20px, 4vw, 56px);
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:lowercase;
  color:rgba(255,246,251,0.62);
}
.about{
  padding:120px 0 90px;
  background:
    radial-gradient(ellipse 40% 40% at 90% 0%, rgba(255,143,184,0.14), transparent 60%),
    rgba(20,8,22,0.72);
}
.about-grid{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:clamp(36px, 6vw, 80px);
  align-items:center;
}
.about h2{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-style:italic;
  font-size:clamp(40px, 5vw, 72px);
  line-height:0.95;
  letter-spacing:-0.03em;
  margin-bottom:22px;
}
.about p{
  font-size:clamp(18px, 1.5vw, 22px);
  line-height:1.6;
  color:rgba(255,246,251,0.84);
  max-width:46ch;
  margin-bottom:28px;
}
.about-card{
  border-radius:28px;
  overflow:hidden;
  background:#000;
  box-shadow:0 30px 80px rgba(20,8,22,0.55), 0 0 0 1px rgba(255,194,216,0.35);
}
.about-card img{ width:100%; display:block; aspect-ratio:1/1.05; object-fit:cover; object-position:center 18%; }
.gallery-sec{
  padding:100px 0 90px;
  background:rgba(20,8,22,0.55);
}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
.shot{
  position:relative;
  display:block;
  width:100%;
  padding:0;
  border:0;
  border-radius:22px;
  background:#000;
  cursor:pointer;
  overflow:hidden;
  color:#fff;
  box-shadow:0 0 0 1px rgba(255,246,251,0.12);
}
.shot img{
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  display:block;
  transition:transform .6s ease;
}
.shot:hover img{ transform:scale(1.04); }
.shot:hover{ box-shadow:0 0 0 1px rgba(255,194,216,0.8); }
.shot .tag{
  position:absolute;
  left:12px;
  bottom:12px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.16em;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(20,8,22,0.72);
  color:var(--blush);
}
.lightbox{
  position:fixed;
  inset:0;
  z-index:200;
  display:none;
  align-items:center;
  justify-content:center;
  padding:88px 88px 48px;
  background:rgba(12,4,14,0.9);
}
.lightbox.open{ display:flex; }
.lightbox img{
  max-width:min(980px, 100%);
  max-height:calc(100vh - 150px);
  object-fit:contain;
  border-radius:18px;
  background:#000;
}
.lightbox .lb-btn{
  position:absolute;
  font-family:'IBM Plex Mono', monospace;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#2a0618;
  background:linear-gradient(120deg, #fff6fb, #ffc2d8);
  border:0;
  border-radius:999px;
  cursor:pointer;
  padding:12px 16px;
}
.lightbox .lb-close{ top:84px; right:22px; }
.lightbox .lb-prev{ left:18px; top:50%; transform:translateY(-50%); }
.lightbox .lb-next{ right:18px; top:50%; transform:translateY(-50%); }
.lightbox .lb-count{
  position:absolute;
  bottom:18px;
  left:0; right:0;
  text-align:center;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:0.28em;
  color:var(--orchid);
}
.channels{ padding:20px 0 100px; background:transparent; }
.channels-rule{
  display:flex;
  align-items:center;
  gap:18px;
  justify-content:center;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--pearl);
  margin-bottom:28px;
}
.channels-rule::before, .channels-rule::after{
  content:"";
  flex:1 1 0;
  max-width:160px;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--blush));
}
.channels-rule::after{ background:linear-gradient(90deg, var(--orchid), transparent); }
.channel-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:12px;
}
.channel-grid a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:18px 16px;
  border-radius:18px;
  background:rgba(255,246,251,0.05);
  box-shadow:inset 0 0 0 1px var(--line);
  text-decoration:none;
  color:var(--pearl);
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  transition:transform .25s ease, background .25s ease;
}
.channel-grid a:hover{
  background:rgba(255,194,216,0.12);
  transform:translateY(-3px);
}
.channel-grid .num{ color:var(--orchid); margin-right:8px; font-size:11px; }
.tokenomics-sec{
  padding:100px 0;
  background:
    radial-gradient(ellipse 40% 40% at 0% 0%, rgba(192,132,252,0.16), transparent 60%),
    rgba(12,4,14,0.72);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.sec-title{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-style:italic;
  font-size:clamp(36px, 5vw, 68px);
  letter-spacing:-0.03em;
  text-align:center;
  margin-bottom:40px;
}
.tok-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
  margin-bottom:14px;
}
.tok-cell, .tok-ca{
  border-radius:20px;
  padding:24px 20px;
  background:rgba(255,246,251,0.04);
  box-shadow:inset 0 0 0 1px var(--line);
}
.tok-cell .k, .tok-ca .k{
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--steel);
  margin-bottom:12px;
}
.tok-cell .v{
  font-family:'Fraunces', serif;
  font-size:clamp(20px, 1.8vw, 28px);
  color:#fff;
}
.tok-cell .note{
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--blush);
  margin-top:8px;
}
.tok-ca{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.tok-ca .k{ flex:0 0 100%; margin-bottom:0; }
.tok-ca .addr{
  font-family:'IBM Plex Mono', monospace;
  font-size:clamp(13px, 1.3vw, 16px);
  color:#fff;
  word-break:break-all;
  flex:1 1 auto;
}
.tok-ca button{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:#2a0618;
  background:linear-gradient(120deg, #fff6fb, #ffc2d8);
  border:0;
  border-radius:999px;
  padding:12px 18px;
  cursor:pointer;
}
.tok-ca button.copied{ filter:brightness(1.08); }
.buy{ padding:100px 0 80px; }
.steps{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(18px, 3vw, 28px);
}
.step{
  padding:26px 22px 8px;
  border-radius:24px;
  background:rgba(255,246,251,0.04);
  box-shadow:inset 0 0 0 1px var(--line);
}
.step .num{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.22em;
  color:var(--orchid);
  margin-bottom:12px;
}
.step .head{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:28px;
  margin-bottom:10px;
}
.step .body{
  font-size:16px;
  line-height:1.55;
  color:rgba(255,246,251,0.78);
}
.join{
  padding:110px 0 120px;
  text-align:center;
  background:
    radial-gradient(ellipse 50% 60% at 50% 120%, rgba(255,143,184,0.2), transparent 60%),
    transparent;
  border-top:1px solid var(--line);
}
.join h2{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-style:italic;
  font-size:clamp(36px, 5vw, 72px);
  letter-spacing:-0.03em;
  margin-bottom:12px;
}
.join .sub{
  font-family:'IBM Plex Mono', monospace;
  font-size:13px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--steel);
  margin-bottom:28px;
}
.join-row{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
footer{
  border-top:1px solid var(--line);
  background:rgba(12,4,14,0.9);
  padding:28px clamp(20px, 4vw, 56px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
footer .fb{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:22px;
  color:#fff;
}
footer .copy{
  margin-top:6px;
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  letter-spacing:0.08em;
  color:rgba(255,246,251,0.5);
}
footer .m{
  width:42px; height:42px;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 0 0 1px var(--blush);
}
footer .right{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--steel);
}
@media (max-width: 980px){
  .channel-grid{ grid-template-columns:repeat(2, 1fr); }
  .tok-grid{ grid-template-columns:repeat(2, 1fr); }
  .gallery-grid{ grid-template-columns:repeat(2, 1fr); }
  .code-col{ display:none; }
}
@media (max-width: 860px){
  .nav .links{ display:none; }
  .about-grid, .steps{ grid-template-columns:1fr; }
  .about-card{ max-width:460px; }
  footer{ flex-direction:column; text-align:center; }
}
@media (max-width: 560px){
  .nav{ height:62px; }
  .wordmark{ letter-spacing:-0.05em; }
  .hero-tagline{ letter-spacing:0.12em; font-size:10px; }
  .channel-grid, .tok-grid, .gallery-grid{ grid-template-columns:1fr; }
  .tok-ca .addr{ flex:1 1 100%; font-size:12px; line-height:1.45; }
  .lightbox{ padding:72px 12px 48px; }
}
@media (prefers-reduced-motion: reduce){
  #bgvid{ display:none; }
  .noise, .silk span, .sys i, .mani-figure{ animation:none; }
  .reveal{ opacity:1; transform:none; }
}