/* Sections */
.st{
  font-size:16px;font-weight:700;margin:20px 0 10px;
  border-left:3px solid var(--accent);padding-left:10px;
  display:flex;align-items:center;gap:8px;
  text-shadow:0 0 20px rgba(68,136,255,.08)
}
.st2{font-size:13px;font-weight:600;margin:14px 0 8px;color:var(--accent)}

/* Header — glass effect */
.hd{
  position:sticky;top:0;z-index:50;
  background:rgba(6,6,16,.72);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:space-between;
  margin:0 -12px;padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.03)
}
.hd-l{
  font-size:15px;font-weight:700;
  background:linear-gradient(135deg,#e4e4ee,#818cf8,#6366f1);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-size:200% auto
}
.hd-r{font-size:10px;color:var(--sec)}
.hd-r .dot{
  display:inline-block;width:5px;height:5px;border-radius:50%;
  background:#22c55e;margin-right:4px;
  box-shadow:0 0 6px rgba(34,197,94,.5);
  animation:pulse-dot 2s ease-in-out infinite
}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.5}}

/* Hero with parallax and particles */
.hero{
  padding:30px 0 20px;text-align:center;
  position:relative;overflow:hidden;
  min-height:300px;isolation:isolate
}
.hero-bg{
  position:absolute;top:-20px;left:-20px;right:-20px;bottom:-20px;
  background:radial-gradient(ellipse at 50% 20%,rgba(68,136,255,.07),transparent 60%),
             radial-gradient(ellipse at 20% 80%,rgba(101,201,251,.04),transparent 50%),
             radial-gradient(ellipse at 80% 60%,rgba(79,70,229,.04),transparent 50%),
             radial-gradient(ellipse at 50% 100%,rgba(48,177,136,.03),transparent 40%);
  pointer-events:none;
  transition:transform 0.1s ease-out;
  z-index:0
}
.hero>*{position:relative;z-index:2}
.hero h1{
  font-size:22px;font-weight:800;
  background:linear-gradient(135deg,#e4e4ee 20%,#818cf8 50%,#65c9fb 80%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-size:200% auto;
  animation:hero-h1-shine 6s ease infinite;
  margin-bottom:6px;
  position:relative
}
@keyframes hero-h1-shine{
  0%,100%{background-position:0% center}
  50%{background-position:100% center}
}
.hero p{font-size:12px;color:var(--sec);margin:0 auto 6px;max-width:360px}
.hero .badge{
  display:inline-block;padding:2px 10px;border-radius:12px;
  font-size:9px;font-weight:600;
  background:rgba(68,136,255,.08);color:var(--accent);
  border:1px solid rgba(68,136,255,.15);
  margin-bottom:8px;
  box-shadow:0 0 12px rgba(68,136,255,.05);
  transition:box-shadow .3s,border-color .3s
}
.hero .badge:hover{
  border-color:rgba(101,201,251,.3);
  box-shadow:0 0 20px rgba(101,201,251,.1)
}

/* Grids */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin:8px 0}

/* Cards — glass with hover glow */
.card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:10px;
  transition:border-color .3s,box-shadow .3s,transform .35s cubic-bezier(.25,.46,.45,.94),background .3s;
  position:relative;overflow:hidden
}
.card::before{
  content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(68,136,255,.02),transparent 60%);
  opacity:0;transition:opacity .5s;pointer-events:none
}
.card:hover{
  border-color:rgba(101,201,251,.15);
  box-shadow:0 0 24px rgba(101,201,251,.06),0 4px 12px rgba(0,0,0,.15);
  transform:translateY(-2px);
  background:rgba(25,25,45,.6)
}
.card:hover::before{opacity:1}
.card .l{font-size:9px;text-transform:uppercase;letter-spacing:.3px;color:var(--sec);margin-bottom:4px}
.card .v{font-size:16px;font-weight:700}

/* Progress bars */
.pb{height:4px;background:rgba(255,255,255,.04);border-radius:3px;margin:6px 0;overflow:hidden}
.pb-f{height:100%;border-radius:3px;transition:width .8s ease}

/* Chart bars (flat fallback for 3D) */
.chart-bars{display:flex;flex-direction:column;gap:5px;margin:8px 0}
.ch-row{display:flex;align-items:center;gap:6px;font-size:10px}
.ch-lbl{width:70px;flex-shrink:0;color:var(--sec);text-align:right}
.ch-bar{flex:1;height:10px;background:rgba(255,255,255,.04);border-radius:4px;overflow:hidden}
.ch-fill{height:100%;border-radius:4px;transition:width 1s ease-out}
.ch-fill::after{
  content:'';position:absolute;top:0;right:0;
  width:20px;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06));
  border-radius:0 4px 4px 0
}
.ch-pct{width:30px;flex-shrink:0;color:var(--sec);font-weight:600}

/* 3D Canvas charts */
.chart3d-wrapper{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:6px;margin:8px 0
}
.chart3d-wrapper canvas{display:block;margin:0 auto;width:100%;height:auto}

/* Tokenomics cards */
.tk-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0}
.tk-cat{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:8px;
  transition:border-color .3s,box-shadow .3s;
  position:relative;overflow:hidden
}
.tk-cat::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:1px;opacity:0;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  transition:opacity .3s
}
.tk-cat:hover::before{opacity:1}
.tk-cat:hover{
  border-color:rgba(68,136,255,.12);
  box-shadow:0 0 20px rgba(68,136,255,.04)
}
.tk-cat .l{font-size:9px;color:var(--sec)}
.tk-cat .v{font-size:24px;font-weight:800}
.tk-cat .d{font-size:10px;color:#9a9ab0;margin-top:4px}

/* Flow */
.flow{display:flex;flex-direction:column;gap:4px;margin:8px 0}
.flow-row{display:flex;align-items:center;gap:6px;font-size:11px}
.flow-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;transition:box-shadow .3s}
.flow-row:hover .flow-dot{box-shadow:0 0 8px currentColor}
.flow-lbl{color:var(--text);font-weight:500}
.flow-val{color:var(--sec);font-size:10px;margin-left:auto}

/* Pill */
.pill{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:10px;margin:6px 0;
  transition:border-color .3s,box-shadow .3s
}
.pill:hover{
  border-color:rgba(68,136,255,.08);
  box-shadow:0 0 12px rgba(68,136,255,.03)
}
.pill .tag{display:inline-block;font-size:9px;padding:2px 8px;border-radius:6px;font-weight:600;margin-bottom:6px}

/* Timeline */
.tl{padding:0;margin:8px 0;position:relative}
.tl::before{content:'';position:absolute;left:15px;top:0;bottom:0;width:1px;background:rgba(68,136,255,.08)}
.tl-step{padding:4px 0 4px 34px;position:relative;font-size:11px;transition:transform .3s}
.tl-step:hover{transform:translateX(2px)}
.tl-step::before{
  content:'';position:absolute;left:11px;top:8px;
  width:9px;height:9px;border-radius:50%;
  background:rgba(68,136,255,.12);border:1.5px solid var(--accent);
  transition:background .3s,box-shadow .3s
}
.tl-step.done::before{background:var(--accent);box-shadow:0 0 8px rgba(68,136,255,.3)}
.tl-step.active::before{
  background:var(--gold);border-color:var(--gold);
  box-shadow:0 0 12px rgba(232,165,14,.4)
}
.tl-step .tl-t{font-weight:600;color:var(--text)}
.tl-step .tl-d{font-size:10px;color:var(--sec);margin-top:2px}

/* Highlights */
.hl{
  background:rgba(68,136,255,.04);
  border-left:2px solid var(--accent);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:8px 10px;margin:6px 0;font-size:10px;color:var(--sec);
  transition:background .3s
}
.hl:hover{background:rgba(68,136,255,.06)}
.hl-gold{background:rgba(232,165,14,.04);border-left-color:var(--gold)}
.hl-gold:hover{background:rgba(232,165,14,.06)}
.hl-violet{background:rgba(124,92,240,.04);border-left-color:var(--violet)}
.hl-violet:hover{background:rgba(124,92,240,.06)}

/* FAQ with improved transitions */
.ac{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);margin:4px 0;overflow:hidden;
  transition:border-color .3s,box-shadow .3s
}
.ac:hover{
  border-color:rgba(101,201,251,.1);
  box-shadow:0 0 16px rgba(101,201,251,.03)
}
.ac-h{padding:10px;font-size:12px;font-weight:600;display:flex;justify-content:space-between;align-items:center;cursor:pointer;
  transition:color .2s}
.ac-h:hover{color:var(--cyan)}
.ac-h .ar{
  transition:transform .35s cubic-bezier(.25,.46,.45,.94);
  font-size:10px;color:var(--sec);
  display:inline-block
}
.ac-h.active .ar{transform:rotate(180deg);color:var(--accent)}
.ac-c{
  padding:0 10px;max-height:0;overflow:hidden;
  font-size:11px;color:#9a9ab0;
  transition:max-height .4s cubic-bezier(.25,.46,.45,.94),padding .35s ease
}
.ac-c.o{max-height:500px;padding:0 10px 10px}

/* Tags */
.tags{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}
.tag-ch{
  font-size:9px;padding:2px 8px;border-radius:6px;font-weight:500;
  background:rgba(68,136,255,.06);border:1px solid rgba(68,136,255,.08);
  color:var(--sec);transition:border-color .3s,color .3s,background .3s
}
.tag-ch:hover{
  border-color:rgba(68,136,255,.15);
  color:var(--accent);background:rgba(68,136,255,.08)
}

/* Modules */
.mod{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:10px;margin:6px 0;
  border-left:3px solid var(--accent);
  transition:border-color .3s,box-shadow .3s
}
.mod:hover{
  border-color:rgba(68,136,255,.1);
  box-shadow:0 0 16px rgba(68,136,255,.03)
}
.mod-purple{border-left-color:var(--violet)}
.mod-gold{border-left-color:var(--gold)}
.mod-teal{border-left-color:var(--teal)}
.mod .t{font-size:13px;font-weight:600}
.mod .d{font-size:11px;color:#9a9ab0;margin-top:4px}

/* Spacers */
.spacer{height:1px;background:var(--border);margin:16px 0}
.spacer-glow{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(68,136,255,.2),rgba(99,102,241,.2),transparent);
  margin:16px 0;position:relative
}
.spacer-glow::after{
  content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  width:80px;height:12px;
  background:radial-gradient(ellipse,rgba(68,136,255,.03),transparent);
  pointer-events:none
}
.ft{text-align:center;padding:24px 0;font-size:9px;color:var(--sec);opacity:.5}

/* Calculator with improved sliders */
.calc{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:12px;margin:8px 0;
  transition:border-color .3s,box-shadow .3s
}
.calc:hover{
  border-color:rgba(101,201,251,.1);
  box-shadow:0 0 20px rgba(101,201,251,.04)
}
.calc .slider{
  width:100%;-webkit-appearance:none;height:6px;
  border-radius:3px;background:rgba(255,255,255,.04);outline:none;margin:12px 0;
  background-image:linear-gradient(90deg,rgba(68,136,255,.3),rgba(101,201,251,.3));
  background-size:0% 100%;background-repeat:no-repeat;
  transition:background-size .1s
}
.calc .slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--cyan));
  cursor:pointer;
  border:2px solid rgba(255,255,255,.15);
  box-shadow:0 0 16px rgba(68,136,255,.35);
  transition:box-shadow .3s,transform .2s,border-color .3s
}
.calc .slider::-webkit-slider-thumb:hover{
  transform:scale(1.15);
  border-color:var(--cyan);
  box-shadow:0 0 28px rgba(68,136,255,.5),0 0 60px rgba(101,201,251,.15)
}
.calc .slider::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;
  background:var(--accent);cursor:pointer;
  border:2px solid rgba(255,255,255,.1)
}
.calc-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:6px 0;font-size:11px;border-bottom:1px solid var(--border)
}
.calc-row:last-child{border-bottom:none}
.calc-row .lb{color:var(--sec)}
.calc-row .vl{font-weight:600;color:var(--text)}
.calc-row .burn{color:var(--rose)}
.calc-row .dao{color:var(--accent)}
.calc-row .buyb{color:var(--teal)}
.calc .total{
  font-size:18px;font-weight:800;text-align:center;
  padding:8px 0;color:var(--gold);
  text-shadow:0 0 20px rgba(232,165,14,.1)
}

/* Scroll entrance with staggered delay */
.scroll-in{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.25,.46,.45,.94),transform .6s cubic-bezier(.25,.46,.45,.94)}
.scroll-in.visible{opacity:1;transform:translateY(0)}
.scroll-in:nth-child(2){transition-delay:0.05s}
.scroll-in:nth-child(3){transition-delay:0.1s}
.scroll-in:nth-child(4){transition-delay:0.15s}
.scroll-in:nth-child(5){transition-delay:0.2s}

/* Button glow with neon effect */
a[href*="t.me"]{
  transition:box-shadow .3s,transform .3s,background .3s !important;
  position:relative;overflow:hidden
}
a[href*="t.me"]:hover{
  box-shadow:0 0 30px rgba(68,136,255,.3),0 0 60px rgba(68,136,255,.08) !important;
  transform:scale(1.04) !important;
  background:var(--accent) !important;
  border-color:var(--cyan) !important
}
a[href*="t.me"]:active{
  transform:scale(0.98) !important
}

/* Image subtle border */
img{
  border:1px solid rgba(255,255,255,.02);
  transition:border-color .3s,opacity .5s
}
img:hover{border-color:rgba(68,136,255,.06)}

/* Value glows */
.tk-cat .v{text-shadow:0 0 20px rgba(68,136,255,.08)}
.tk-cat:has(.v[style*="color:var(--accent)"]) .v{text-shadow:0 0 24px rgba(68,136,255,.15)}
.tk-cat:has(.v[style*="color:var(--gold)"]) .v{text-shadow:0 0 24px rgba(232,165,14,.12)}
.tk-cat:has(.v[style*="color:var(--violet)"]) .v{text-shadow:0 0 24px rgba(124,92,240,.12)}
.tk-cat:has(.v[style*="color:var(--teal)"]) .v{text-shadow:0 0 24px rgba(13,148,136,.12)}