/* ===========================================================
   PAID TILCAYO ($PAIDRINO) — theme: "Wild Jungle Gold"
   =========================================================== */

@font-face {
  font-family: "ClashDisplay";
  src: local("Poppins");
}

:root{
  --gold: #e0a84a;
  --gold-deep: #a66722;
  --gold-bright: #ffcf7a;
  --ember: #d65c24;
  --cream: #f3e3c4;
  --ink: #0a0c09;
  --ink-2: #121008;
  --ink-3: #1b160d;
  --line: rgba(224,168,74,.22);
  --shadow: 0 20px 60px rgba(0,0,0,.55);
  --radius: 18px;
  --ff-display: "Big Shoulders Display", "Archivo Black", sans-serif;
  --ff-body: "Manrope", "Segoe UI", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:auto; }
html,body{ background:var(--ink); color:var(--cream); }
body{
  margin:0;
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
body.no-scroll{ overflow:hidden; height:100vh; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--gold); color:var(--ink); }

.reveal-lines{ position:fixed; inset:0; pointer-events:none; z-index:0; }

/* -------------------- background layers -------------------- */
.bg-fixed{
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(ellipse 60% 40% at 25% 0%, rgba(224,168,74,.10), transparent 60%),
    radial-gradient(ellipse 50% 40% at 100% 30%, rgba(214,92,36,.10), transparent 60%),
    var(--ink);
}
.bg-noise{
  position:fixed; inset:0; z-index:-1; opacity:.05; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* -------------------- loader -------------------- */
#loader{
  position:fixed; inset:0; z-index:9999;
  background:#000 url("../assets/img/bg-photo-glow.jpg") center/cover no-repeat;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  transition:opacity .9s ease, visibility .9s ease;
}
#loader::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 40%, rgba(0,0,0,0) 0%, rgba(0,0,0,.75) 100%);
}
#loader.loaded{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-inner{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:22px; }
.loader-logo{
  width:min(46vw,260px);
  filter:drop-shadow(0 10px 40px rgba(224,168,74,.35));
  animation:loaderFloat 2.4s ease-in-out infinite;
}
@keyframes loaderFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }
.loader-word{
  font-family:var(--ff-display); font-weight:800; letter-spacing:.14em;
  font-size:clamp(20px,4vw,30px); color:var(--gold-bright); text-transform:uppercase;
}
.loader-bar{ width:min(70vw,320px); height:3px; background:rgba(255,255,255,.12); border-radius:3px; overflow:hidden; }
.loader-bar span{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright)); transition:width .2s linear; }
.loader-pct{ font-size:12px; letter-spacing:.2em; color:var(--gold); opacity:.75; }

/* -------------------- header -------------------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(16px,4vw,48px);
  backdrop-filter:blur(10px) saturate(140%);
  background:linear-gradient(180deg, rgba(10,12,9,.78), rgba(10,12,9,0));
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
header.scrolled{ background:rgba(10,12,9,.86); border-bottom:1px solid var(--line); }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--ff-display); letter-spacing:.04em; }
.brand img{ width:38px; height:38px; object-fit:contain; }
.brand span{ font-size:18px; color:var(--gold-bright); text-transform:uppercase; }
.brand small{ display:block; font-family:var(--ff-body); font-size:10px; letter-spacing:.2em; color:var(--gold); opacity:.7; }

nav.main-nav{ display:flex; align-items:center; gap:26px; }
nav.main-nav a{
  font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--cream);
  opacity:.8; position:relative; padding:4px 0;
}
nav.main-nav a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background:var(--gold); transition:width .25s ease;
}
nav.main-nav a:hover{ opacity:1; }
nav.main-nav a:hover::after{ width:100%; }

.header-actions{ display:flex; align-items:center; gap:10px; }
.icon-btn{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line); background:rgba(224,168,74,.06);
  display:flex; align-items:center; justify-content:center; color:var(--gold-bright);
  transition:transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.icon-btn:hover{ transform:translateY(-3px) scale(1.06); background:rgba(224,168,74,.16); box-shadow:0 8px 22px rgba(224,168,74,.25); }
.icon-btn svg{ width:17px; height:17px; }

.burger{ display:none; width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:rgba(224,168,74,.06); align-items:center; justify-content:center; }
.burger svg{ width:18px; height:18px; color:var(--gold-bright); }

/* -------------------- buttons -------------------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; border-radius:999px; font-weight:800;
  font-size:14px; letter-spacing:.05em; text-transform:uppercase;
  border:1px solid transparent; position:relative; overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn-primary{
  background:linear-gradient(120deg,var(--gold-deep),var(--gold-bright) 60%,var(--ember));
  background-size:200% 200%;
  color:#150d02; box-shadow:0 14px 30px rgba(224,168,74,.28);
}
.btn-primary:hover{ transform:translateY(-3px); background-position:100% 0; box-shadow:0 18px 40px rgba(224,168,74,.4); }
.btn-outline{
  background:rgba(224,168,74,.06); color:var(--gold-bright);
  border-color:var(--line);
}
.btn-outline:hover{ background:rgba(224,168,74,.14); transform:translateY(-3px); }
.btn-ghost-dark{ background:rgba(0,0,0,.35); color:var(--cream); border-color:rgba(255,255,255,.14); }
.btn svg{ width:16px; height:16px; flex-shrink:0; }

.btn-ca{
  display:inline-flex; align-items:center; gap:12px;
  padding:10px 10px 10px 20px; border-radius:999px;
  background:rgba(0,0,0,.4); border:1px solid var(--line);
  font-family:"JetBrains Mono","Courier New",monospace; font-size:13px; color:var(--cream);
}
.btn-ca .ca-copy{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background:linear-gradient(120deg,var(--gold-deep),var(--gold-bright));
  color:#150d02;
}
.btn-ca .ca-copy svg{ width:15px; height:15px; }
.btn-ca .ca-copy.copied svg{ display:none; }
.btn-ca .ca-copy.copied::after{ content:"✓"; font-weight:900; }
.ca-text{ max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* -------------------- hero -------------------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center;
  padding:150px 20px 100px; text-align:center; overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0; z-index:-1;
  background:url("../assets/img/bg-hero.jpg") center/cover no-repeat;
}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 60% at 50% 30%, rgba(224,168,74,.10), transparent 65%),
             linear-gradient(180deg, rgba(10,12,9,0) 0%, var(--ink) 92%);
}
.hero-content{ max-width:900px; margin:0 auto; position:relative; z-index:2; }

.hero-stage{
  position:relative; width:min(72vw,420px); margin:0 auto 6px;
  perspective:1000px;
}
.hero-logo{
  width:100%; will-change:transform;
  filter:drop-shadow(0 25px 60px rgba(224,168,74,.35)) drop-shadow(0 0 40px rgba(214,92,36,.12));
  transition:transform .15s ease-out;
}
.hero-glow{
  position:absolute; inset:-20%; z-index:-1; border-radius:50%;
  background:radial-gradient(circle, rgba(224,168,74,.35), transparent 65%);
  filter:blur(30px); animation:pulseGlow 4s ease-in-out infinite;
}
@keyframes pulseGlow{ 0%,100%{ opacity:.55; transform:scale(1) } 50%{ opacity:.9; transform:scale(1.08) } }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold);
  margin-bottom:14px; opacity:.85;
}
.eyebrow::before,.eyebrow::after{ content:""; width:22px; height:1px; background:var(--gold); opacity:.6; }

.hero h1{
  font-family:var(--ff-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(42px,9vw,104px); line-height:.92; margin:4px 0 6px;
  letter-spacing:.01em;
  background:linear-gradient(120deg,#fff2d6,var(--gold-bright) 45%,var(--gold-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .ticker{
  font-family:var(--ff-display); font-size:clamp(20px,3.4vw,32px); color:var(--ember);
  letter-spacing:.08em; margin-bottom:18px; text-shadow:0 0 24px rgba(214,92,36,.4);
}
.hero p.lede{
  max-width:520px; margin:0 auto 34px; color:var(--cream); opacity:.82; font-size:15px;
}
.hero-ctas{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px; margin-bottom:22px; }
.hero-socials{ display:flex; justify-content:center; gap:12px; }

/* -------------------- marquee -------------------- */
.marquee{
  position:relative; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:linear-gradient(90deg, rgba(224,168,74,.05), rgba(214,92,36,.05));
  overflow:hidden; padding:14px 0;
}
.marquee-track{ display:flex; width:max-content; gap:0; animation:marquee 26s linear infinite; }
.marquee-track span{
  display:flex; align-items:center; gap:14px; padding:0 26px;
  font-family:var(--ff-display); font-size:15px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold);
  white-space:nowrap;
}
.marquee-track span i{ width:6px; height:6px; border-radius:50%; background:var(--ember); display:inline-block; }
@keyframes marquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* -------------------- section shell -------------------- */
section{ position:relative; padding:120px 20px; }
.section-inner{ max-width:1120px; margin:0 auto; }
.section-tag{
  display:inline-flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--gold); margin-bottom:14px;
}
.section-tag i{ width:16px; height:1px; background:var(--gold); display:inline-block; }
h2.section-title{
  font-family:var(--ff-display); text-transform:uppercase; font-weight:800;
  font-size:clamp(30px,5vw,54px); line-height:1.02; margin:0 0 18px; color:var(--gold-bright);
}
.section-desc{ max-width:640px; color:var(--cream); opacity:.78; font-size:15px; margin-bottom:10px; }

.bg-plate-a{ background:linear-gradient(180deg, transparent, rgba(0,0,0,.35) 20%, rgba(0,0,0,.35) 80%, transparent), url("../assets/img/bg-section-a.jpg") center/cover no-repeat; }
.bg-plate-b{ background:linear-gradient(180deg, transparent, rgba(0,0,0,.35) 20%, rgba(0,0,0,.35) 80%, transparent), url("../assets/img/bg-section-b.jpg") center/cover no-repeat; }

/* -------------------- about/lore -------------------- */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.about-media{ position:relative; }
.about-media .frame{
  position:relative; border-radius:24px; overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow); transform:rotate(-2deg);
}
.about-media img{ width:100%; }
.about-media .frame::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,.55));
}
.about-media .tag-chip{
  position:absolute; bottom:18px; left:18px; z-index:2;
  padding:8px 16px; border-radius:999px; background:rgba(0,0,0,.55);
  border:1px solid var(--line); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-bright);
}
.lore-text p{ color:var(--cream); opacity:.85; font-size:15.5px; margin-bottom:16px; }
.lore-text p:first-of-type{ font-size:18px; opacity:1; color:var(--gold-bright); font-weight:600; }

/* -------------------- how to buy -------------------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:40px; }
.step-card{
  position:relative; padding:28px 22px; border-radius:var(--radius);
  background:rgba(20,16,9,.6); border:1px solid var(--line); backdrop-filter:blur(6px);
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.step-card:hover{ transform:translateY(-8px); border-color:rgba(224,168,74,.5); box-shadow:0 20px 40px rgba(0,0,0,.45); }
.step-num{
  font-family:var(--ff-display); font-size:38px; color:transparent;
  -webkit-text-stroke:1.5px var(--gold); margin-bottom:14px; display:block;
}
.step-card h3{ font-family:var(--ff-display); text-transform:uppercase; font-size:17px; margin:0 0 8px; color:var(--gold-bright); letter-spacing:.03em; }
.step-card p{ font-size:13.5px; color:var(--cream); opacity:.75; margin:0; }

/* -------------------- tokenomics -------------------- */
.token-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:40px; }
.token-card{
  padding:26px 20px; border-radius:var(--radius); text-align:center;
  background:linear-gradient(160deg, rgba(224,168,74,.08), rgba(0,0,0,.25));
  border:1px solid var(--line);
}
.token-card .val{ font-family:var(--ff-display); font-size:clamp(24px,3vw,34px); color:var(--gold-bright); }
.token-card .lbl{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); opacity:.75; margin-top:6px; }
.token-note{ margin-top:28px; display:flex; align-items:center; gap:12px; font-size:13px; color:var(--cream); opacity:.7; }
.token-note svg{ width:16px; height:16px; color:var(--gold); flex-shrink:0; }

/* -------------------- roadmap -------------------- */
.roadmap{ position:relative; margin-top:50px; }
.roadmap::before{
  content:""; position:absolute; left:20px; top:0; bottom:0; width:1px;
  background:linear-gradient(180deg, transparent, var(--gold), transparent);
}
.rm-item{ position:relative; padding:0 0 46px 60px; }
.rm-item:last-child{ padding-bottom:0; }
.rm-dot{
  position:absolute; left:11px; top:2px; width:19px; height:19px; border-radius:50%;
  background:var(--ink); border:2px solid var(--gold); display:flex; align-items:center; justify-content:center;
}
.rm-dot::after{ content:""; width:7px; height:7px; border-radius:50%; background:var(--gold-bright); }
.rm-phase{ font-family:var(--ff-display); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--ember); margin-bottom:6px; }
.rm-item h3{ font-family:var(--ff-display); text-transform:uppercase; font-size:20px; margin:0 0 8px; color:var(--gold-bright); }
.rm-item p{ font-size:14px; color:var(--cream); opacity:.78; max-width:560px; margin:0; }

/* -------------------- dex chart -------------------- */
.chart-wrap{
  margin-top:36px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow); background:#000;
}
.chart-frame{ width:100%; height:560px; border:0; display:block; background:#0a0a0a; }
.chart-fallback{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  height:560px; text-align:center; padding:30px;
}
.chart-fallback p{ color:var(--cream); opacity:.7; max-width:400px; font-size:14px; }

/* -------------------- footer -------------------- */
footer{
  position:relative; padding:90px 20px 40px; text-align:center;
  background:url("../assets/img/bg-footer.jpg") center/cover no-repeat;
}
footer::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, var(--ink) 0%, rgba(10,12,9,.85) 30%, rgba(10,12,9,.85) 100%); }
.footer-inner{ position:relative; z-index:2; max-width:1000px; margin:0 auto; }
.footer-logo{ width:86px; margin:0 auto 18px; filter:drop-shadow(0 10px 30px rgba(224,168,74,.3)); }
footer h2{
  font-family:var(--ff-display); text-transform:uppercase; font-size:clamp(28px,5vw,46px);
  color:var(--gold-bright); margin:0 0 10px;
}
footer p.tag{ color:var(--cream); opacity:.7; margin-bottom:36px; }

.footer-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-bottom:36px; }
.footer-links a{
  padding:12px 22px; border-radius:999px; border:1px solid var(--line);
  font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-bright);
  background:rgba(224,168,74,.05); transition:all .25s ease;
}
.footer-links a:hover{ background:rgba(224,168,74,.18); transform:translateY(-3px); border-color:var(--gold); }

.footer-ctas{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-bottom:36px; }
.footer-socials{ display:flex; justify-content:center; gap:14px; margin-bottom:40px; }
.footer-socials .icon-btn{ width:46px; height:46px; }
.footer-socials .icon-btn svg{ width:20px; height:20px; }

.footer-bottom{ border-top:1px solid var(--line); padding-top:24px; font-size:12px; color:var(--cream); opacity:.55; }
.footer-bottom span{ color:var(--gold); }

/* -------------------- scroll reveal -------------------- */
[data-reveal]{ opacity:0; transform:translateY(40px); }
[data-reveal].is-in{ opacity:1; transform:translateY(0); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
[data-reveal="scale"]{ transform:translateY(0) scale(.9); }
[data-reveal="scale"].is-in{ transform:scale(1); }
[data-reveal-stagger] > *{ opacity:0; transform:translateY(30px); }
[data-reveal-stagger].is-in > *{ opacity:1; transform:translateY(0); transition:opacity .7s ease, transform .7s ease; }
[data-reveal-stagger].is-in > *:nth-child(1){ transition-delay:.05s }
[data-reveal-stagger].is-in > *:nth-child(2){ transition-delay:.15s }
[data-reveal-stagger].is-in > *:nth-child(3){ transition-delay:.25s }
[data-reveal-stagger].is-in > *:nth-child(4){ transition-delay:.35s }

/* -------------------- back to top -------------------- */
#toTop{
  position:fixed; right:22px; bottom:22px; z-index:400;
  width:48px; height:48px; border-radius:50%;
  background:linear-gradient(120deg,var(--gold-deep),var(--gold-bright));
  display:flex; align-items:center; justify-content:center; color:#150d02;
  box-shadow:0 12px 30px rgba(0,0,0,.5); opacity:0; pointer-events:none; transform:translateY(10px);
  transition:opacity .3s ease, transform .3s ease;
}
#toTop.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
#toTop svg{ width:18px; height:18px; }

/* -------------------- responsive -------------------- */
@media (max-width:980px){
  .about-grid{ grid-template-columns:1fr; gap:36px; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .token-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  nav.main-nav{ display:none; }
  .burger{ display:flex; }
  .hero{ padding-top:120px; }
  .chart-frame,.chart-fallback{ height:420px; }
}
@media (max-width:520px){
  .steps{ grid-template-columns:1fr; }
  .token-grid{ grid-template-columns:1fr 1fr; }
  section{ padding:80px 16px; }
  .btn-ca .ca-text{ max-width:110px; }
}

/* mobile nav drawer */
#mobileNav{
  position:fixed; inset:0; z-index:600; background:rgba(8,7,4,.97);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
#mobileNav.open{ opacity:1; pointer-events:auto; }
#mobileNav a{ font-family:var(--ff-display); font-size:26px; text-transform:uppercase; color:var(--gold-bright); letter-spacing:.04em; }
#mobileNav .close-x{ position:absolute; top:20px; right:20px; width:42px; height:42px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; }
#mobileNav .close-x svg{ width:18px; height:18px; color:var(--gold-bright); }