@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  --bg:#030503;
  --panel:#090d09;
  --panel2:#0c120c;
  --green:#9dff00;
  --green2:#55ff42;
  --white:#f5f7f2;
  --muted:#9aa596;
  --pink:#ff278e;
  --line:rgba(157,255,0,.18);
  --glow:0 0 30px rgba(157,255,0,.24);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:
  radial-gradient(circle at 80% 5%,rgba(66,255,35,.10),transparent 28%),
  radial-gradient(circle at 10% 24%,rgba(157,255,0,.06),transparent 22%),
  var(--bg);
  color:var(--white);font-family:Inter,system-ui,sans-serif;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.shell{width:min(1420px,calc(100% - 48px));margin:auto}
.noise{position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E")}
.cursor-glow{position:fixed;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(157,255,0,.07),transparent 65%);pointer-events:none;z-index:0;transform:translate(-50%,-50%)}

.nav{height:82px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.08);position:relative;z-index:20}
.brand{display:flex;align-items:center;gap:12px;font:900 22px Inter}
.brand img{width:49px;height:49px;object-fit:cover;border-radius:50%;border:1px solid var(--line)}
.nav-links{display:flex;gap:34px;font-size:12px;font-weight:800;letter-spacing:.13em;color:#d2dbcf}
.nav-links a:hover{color:var(--green)}
.mini-cta{padding:13px 19px;border:1px solid var(--green);border-radius:9px;font-size:12px;font-weight:900;letter-spacing:.08em;box-shadow:inset 0 0 18px rgba(157,255,0,.07)}
.mini-cta:hover{background:var(--green);color:#050705}
.disabled-link.is-placeholder{opacity:.8}

.hero{min-height:760px;display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:30px;padding:72px 0 58px;position:relative;z-index:2}
.eyebrow,.section-kicker{font-size:11px;letter-spacing:.19em;font-weight:900;color:#cad5c6;text-transform:uppercase}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--green2);box-shadow:0 0 15px var(--green);display:inline-block;margin-right:9px}
.hero h1,.section h2{font-family:"Archivo Black",Impact,sans-serif;letter-spacing:-.055em;margin:18px 0;line-height:.88;text-transform:uppercase}
.hero h1{font-size:clamp(58px,7vw,112px)}
.hero h1 span,.section h2 span{color:var(--green);text-shadow:0 0 22px rgba(157,255,0,.20)}
.hero-line{font-size:25px;font-weight:900;margin:28px 0 8px}
.intro{max-width:620px;line-height:1.7;color:#b5c0b2;font-size:16px}
.intro strong{color:var(--green)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 26px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:53px;padding:0 23px;border-radius:10px;font-size:13px;font-weight:900;letter-spacing:.055em;transition:.18s ease;border:1px solid transparent}
.btn-primary{background:var(--green);color:#071006;box-shadow:0 0 28px rgba(157,255,0,.19)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 38px rgba(157,255,0,.34)}
.btn-ghost{border-color:rgba(255,255,255,.19);background:rgba(255,255,255,.025)}
.btn-ghost:hover{border-color:var(--green);color:var(--green)}
.ticker-row{display:flex;gap:15px;align-items:center;flex-wrap:wrap;font-size:10px;letter-spacing:.13em;color:#7f8d7d;font-weight:800}
.ticker-row strong{color:#fff}
.ticker-row i{width:4px;height:4px;background:var(--green);border-radius:50%}

.hero-art{height:630px;position:relative;display:flex;align-items:center;justify-content:center}
.hero-logo{width:min(650px,98%);position:relative;z-index:4;filter:drop-shadow(0 0 38px rgba(110,255,0,.17));border-radius:50%}
.orb{position:absolute;width:72%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(157,255,0,.16),rgba(22,75,8,.04) 48%,transparent 69%);border:1px solid rgba(157,255,0,.15);box-shadow:0 0 80px rgba(157,255,0,.10);z-index:1}
.chart-lines{position:absolute;inset:11% 0 8%;z-index:2;opacity:.45}
.chart-lines svg{width:100%;height:100%}
.chart-lines path{fill:none;stroke:var(--green);stroke-width:4;filter:drop-shadow(0 0 8px var(--green))}
.float-tag{position:absolute;z-index:6;padding:12px 15px;border:1px solid var(--line);background:rgba(4,8,4,.82);backdrop-filter:blur(10px);font:900 10px/1.45 Inter;letter-spacing:.12em;color:#dce6d8;border-radius:8px}
.tag-one{right:0;top:12%;transform:rotate(3deg)}
.tag-two{left:1%;bottom:11%;color:var(--green);transform:rotate(-3deg)}

.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:#070b07}
.strip-track{width:max-content;display:flex;gap:28px;padding:15px 0;font-family:"Archivo Black";font-size:15px;letter-spacing:.04em;animation:marquee 24s linear infinite}
.strip-track span:nth-of-type(3n){color:var(--green)}
.strip-track b{color:var(--green)}
@keyframes marquee{to{transform:translateX(-50%)}}

.section{padding:112px 0;position:relative;z-index:2}
.lore-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:72px;align-items:center}
.lore-image{position:relative}
.lore-image img{width:100%;border-radius:20px;border:1px solid rgba(157,255,0,.18);box-shadow:0 28px 90px rgba(0,0,0,.48),0 0 55px rgba(157,255,0,.08)}
.image-caption{position:absolute;left:18px;bottom:18px;background:rgba(2,4,2,.82);border:1px solid var(--line);padding:10px 13px;border-radius:7px;font-size:9px;font-weight:900;letter-spacing:.16em}
.section h2{font-size:clamp(43px,5.7vw,82px)}
.story{max-width:670px;color:#aebaa9;line-height:1.72;font-size:16px}
.story p{margin:0 0 13px}
.story strong{color:#fff}
.story .impact{font-size:22px;line-height:1.35;color:#fff;margin:28px 0}
.story .impact strong{color:var(--green)}
.lore-signoff{margin-top:30px;padding-top:25px;border-top:1px solid rgba(255,255,255,.09);font-family:"Archivo Black";font-size:20px}
.lore-signoff span{color:var(--green)}

.section-head{max-width:780px;margin-bottom:44px}
.section-head p:last-child{color:#9eaa9b;line-height:1.65;font-size:17px}
.market-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:18px}
.card,.fact,.manifesto{background:linear-gradient(145deg,rgba(14,21,14,.92),rgba(5,9,5,.94));border:1px solid var(--line);border-radius:17px}
.market-card{padding:26px;min-height:420px;position:relative;overflow:hidden}
.market-card:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 60%,rgba(157,255,0,.05));pointer-events:none}
.pair-pill{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(157,255,0,.25);padding:10px 13px;border-radius:999px;font-size:12px;font-weight:900}
.pair-pill span{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 11px var(--green)}
.fake-chart{height:290px;margin-top:38px}
.fake-chart svg{width:100%;height:100%}
.fake-chart .line{fill:none;stroke:var(--green);stroke-width:5;filter:drop-shadow(0 0 8px rgba(157,255,0,.6))}
.fake-chart .area{fill:url(#chartFill)}
.chart-note{position:absolute;bottom:18px;left:25px;color:#5f6c5c;font-size:9px;font-weight:800;letter-spacing:.12em}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fact{padding:23px;display:flex;flex-direction:column;justify-content:center;min-height:190px}
.fact small{font-size:9px;letter-spacing:.16em;color:#738071;font-weight:900}
.fact strong{font-family:"Archivo Black";font-size:27px;margin:11px 0 7px;color:var(--green)}
.fact span{font-size:12px;color:#9da99a;line-height:1.5}
.launch-banner{margin-top:18px;border:1px solid var(--line);border-radius:15px;padding:24px 26px;display:flex;justify-content:space-between;gap:22px;align-items:center;background:linear-gradient(90deg,rgba(157,255,0,.06),transparent)}
.launch-banner small{display:block;color:#71806e;font-size:9px;letter-spacing:.16em;font-weight:900;margin-bottom:9px}
.launch-banner strong{font-family:"Archivo Black";font-size:clamp(16px,2vw,28px)}

.community{display:grid;grid-template-columns:1fr .7fr;gap:72px;align-items:center}
.community-copy>p:not(.section-kicker):not(.social-note){max-width:650px;color:#a8b3a4;font-size:17px;line-height:1.7}
.socials{display:flex;gap:11px;margin-top:29px;flex-wrap:wrap}
.social{display:flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.13);border-radius:9px;padding:12px 16px;font-size:11px;font-weight:900;letter-spacing:.08em}
.social span{font-size:20px;color:var(--green)}
.social:hover{border-color:var(--green);color:var(--green)}
.social-note{font-size:10px!important;color:#647061!important;margin-top:13px!important}
.manifesto{padding:35px;min-height:470px;position:relative;overflow:hidden}
.manifesto:before{content:"";position:absolute;width:280px;height:280px;border-radius:50%;background:var(--green);filter:blur(120px);opacity:.06;right:-80px;top:-60px}
.manifesto-top{font-size:10px;letter-spacing:.18em;color:#677464;font-weight:900;margin-bottom:45px}
.manifesto p{font-family:"Archivo Black";font-size:clamp(47px,5vw,72px);line-height:.9;margin:14px 0}
.manifesto p s{color:#536050;text-decoration-color:var(--pink);text-decoration-thickness:7px}
.manifesto p strong{color:var(--green)}
.scribble{position:absolute;right:28px;bottom:28px;transform:rotate(-5deg);color:var(--green);font:900 18px/1.05 Inter;letter-spacing:-.04em}

footer{border-top:1px solid var(--line);padding:34px 0 45px;background:#040604}
.footer-inner{display:grid;grid-template-columns:.42fr 1fr auto;gap:35px;align-items:center}
.footer-brand{display:flex;align-items:center;gap:12px}
.footer-brand img{width:50px;height:50px;border-radius:50%;object-fit:cover}
.footer-brand strong{display:block;font-family:"Archivo Black";font-size:18px}
.footer-brand span{display:block;color:#647061;font-size:9px;letter-spacing:.14em;margin-top:4px}
.disclaimer{font-size:10px;line-height:1.55;color:#616d5f;margin:0}
.back-top{font-size:10px;font-weight:900;letter-spacing:.1em;color:#a6b1a2}
.back-top:hover{color:var(--green)}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.delay-1{transition-delay:.12s}

@media(max-width:980px){
  .nav-links{display:none}
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:50px}
  .hero-art{height:auto;min-height:540px;order:-1}
  .hero-logo{width:min(600px,94vw)}
  .lore-grid,.community,.market-grid{grid-template-columns:1fr}
  .lore-grid{gap:45px}
  .facts{grid-template-columns:1fr 1fr}
  .footer-inner{grid-template-columns:1fr;gap:18px}
}
@media(max-width:620px){
  .shell{width:min(100% - 28px,1420px)}
  .nav{height:70px}
  .brand span{font-size:17px}
  .brand img{width:42px;height:42px}
  .mini-cta{padding:11px 12px;font-size:10px}
  .hero{padding:34px 0 45px}
  .hero-art{min-height:360px}
  .tag-one{right:-2%;top:7%}
  .tag-two{left:-2%;bottom:5%}
  .hero-line{font-size:19px}
  .intro{font-size:14px}
  .hero-actions{flex-direction:column}
  .btn{width:100%}
  .section{padding:78px 0}
  .facts{grid-template-columns:1fr}
  .fact{min-height:135px}
  .launch-banner{align-items:flex-start;flex-direction:column}
  .market-card{min-height:320px}
  .fake-chart{height:210px}
  .manifesto{min-height:390px}
  .story .impact{font-size:19px}
}


/* ================================
   V2 MOTION SYSTEM
   ================================ */

#particleCanvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:1;
  opacity:.5;
}

.hero-copy,.hero-art,.section,footer{position:relative;z-index:2}

.hero-logo{
  animation:stillFloat 5.2s ease-in-out infinite;
  transform-origin:50% 56%;
  will-change:transform,filter;
}
@keyframes stillFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(-.4deg);filter:drop-shadow(0 0 34px rgba(110,255,0,.15))}
  50%{transform:translate3d(0,-12px,0) rotate(.6deg);filter:drop-shadow(0 0 48px rgba(110,255,0,.24))}
}

.orb{
  animation:orbBreath 4.4s ease-in-out infinite;
}
@keyframes orbBreath{
  0%,100%{transform:scale(.98);opacity:.78}
  50%{transform:scale(1.045);opacity:1}
}

.chart-lines path{
  stroke-dasharray:1800;
  stroke-dashoffset:1800;
  animation:drawHeroChart 4.5s cubic-bezier(.2,.7,.2,1) .4s forwards, chartPulse 3.4s ease-in-out 5s infinite;
}
@keyframes drawHeroChart{to{stroke-dashoffset:0}}
@keyframes chartPulse{
  0%,100%{opacity:.72}
  50%{opacity:1;filter:drop-shadow(0 0 14px var(--green))}
}

.fake-chart .line{
  stroke-dasharray:1700;
  stroke-dashoffset:1700;
}
.reveal.in .fake-chart .line{
  animation:drawMarketChart 2.4s cubic-bezier(.2,.8,.2,1) .2s forwards;
}
.reveal.in .fake-chart .area{
  animation:areaRise 1.8s ease .4s both;
}
@keyframes drawMarketChart{to{stroke-dashoffset:0}}
@keyframes areaRise{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}

.pulse-cta{
  position:relative;
  overflow:hidden;
  animation:ctaBreath 2.5s ease-in-out infinite;
}
.pulse-cta:after{
  content:"";
  position:absolute;
  top:-80%;
  left:-45%;
  width:30%;
  height:260%;
  transform:rotate(22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);
  animation:ctaSweep 4.8s ease-in-out infinite;
}
@keyframes ctaBreath{
  0%,100%{box-shadow:0 0 22px rgba(157,255,0,.18)}
  50%{box-shadow:0 0 42px rgba(157,255,0,.36)}
}
@keyframes ctaSweep{
  0%,58%{left:-45%;opacity:0}
  63%{opacity:.7}
  78%{left:125%;opacity:0}
  100%{left:125%;opacity:0}
}

.neon-underline{
  position:relative;
  display:inline-block;
}
.neon-underline:after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  width:100%;
  height:2px;
  background:linear-gradient(90deg,var(--green),transparent 90%);
  box-shadow:0 0 12px rgba(157,255,0,.7);
  transform-origin:left;
  animation:underlineDraw 1.25s ease .55s both;
}
@keyframes underlineDraw{
  from{transform:scaleX(0);opacity:0}
  to{transform:scaleX(1);opacity:1}
}

.hero h1 span{
  background:linear-gradient(90deg,#8dff00 0%,#d7ff49 48%,#79ff00 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:stillShimmer 4s linear infinite;
}
@keyframes stillShimmer{
  to{background-position:-200% 0}
}

.float-tag{
  animation:tagDrift 4.5s ease-in-out infinite;
}
.tag-two{animation-delay:-2.1s}
@keyframes tagDrift{
  0%,100%{translate:0 0}
  50%{translate:0 -7px}
}

/* Neon feather motif */
.floating-feather{
  position:fixed;
  width:26px;
  height:62px;
  left:12vw;
  top:18vh;
  z-index:1;
  opacity:.17;
  pointer-events:none;
  border-radius:100% 0 100% 0;
  background:
    linear-gradient(135deg,transparent 0 45%,rgba(157,255,0,.95) 46% 52%,transparent 53%),
    linear-gradient(120deg,rgba(157,255,0,.88),rgba(157,255,0,.03));
  box-shadow:0 0 24px rgba(157,255,0,.55);
  transform:rotate(30deg);
  animation:featherFall 12s ease-in-out infinite;
}
.feather-b{
  left:auto;
  right:8vw;
  top:62vh;
  width:18px;
  height:48px;
  opacity:.11;
  animation-delay:-6s;
  animation-duration:14s;
}
@keyframes featherFall{
  0%,100%{transform:translate3d(0,-15px,0) rotate(24deg)}
  50%{transform:translate3d(35px,26px,0) rotate(52deg)}
}

.strip-track{
  will-change:transform;
}

.fact,.card,.manifesto,.lore-image img{
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.fact:hover,.card:hover,.manifesto:hover{
  transform:translateY(-4px);
  border-color:rgba(157,255,0,.42);
  box-shadow:0 14px 45px rgba(0,0,0,.35),0 0 34px rgba(157,255,0,.07);
}
.lore-image:hover img{
  transform:scale(1.012);
  box-shadow:0 32px 95px rgba(0,0,0,.55),0 0 65px rgba(157,255,0,.13);
}

/* Occasional micro-glitch, triggered by JS */
.glitch-once{
  animation:microGlitch .22s steps(2,end) 1;
}
@keyframes microGlitch{
  0%{transform:translate(0);text-shadow:none}
  25%{transform:translate(-2px,1px);text-shadow:3px 0 var(--pink),-3px 0 var(--green)}
  50%{transform:translate(2px,-1px);text-shadow:-2px 0 var(--pink),2px 0 var(--green)}
  75%{transform:translate(-1px,0);text-shadow:2px 0 var(--green)}
  100%{transform:none;text-shadow:none}
}

/* Parallax transforms are added by JS using CSS variables */
.hero-art{
  --px:0px;
  --py:0px;
  transform:translate3d(var(--px),var(--py),0);
  transition:transform .18s ease-out;
}
.hero-logo{
  --lx:0px;
  --ly:0px;
}
.hero-art.parallax-active .hero-logo{
  animation:none;
  transform:translate3d(var(--lx),var(--ly),0) rotate(.2deg);
}

/* Respect motion accessibility */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.001ms!important;
  }
  #particleCanvas,.floating-feather{display:none}
}