/* ================================================================== COC BOT site */
:root {
  --bg: #07070a; --bg2: #0d0d12; --card: rgba(22, 22, 28, .72); --line: rgba(255,255,255,.08);
  --text: #f4f4f6; --muted: #9a9aa6; --gold: #f5c518; --gold2: #ffdf5e; --gold3: #c98a00;
  --ok: #3fbf7f; --bad: #e5534b;
  --display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.55 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow-x: hidden; }
a { color: var(--gold); text-decoration: none; }
.gold { color: var(--gold); }

/* ---------- animated background (all pages) */
.bg-grid { position: fixed; inset: -50%; z-index: -2; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px; transform: perspective(700px) rotateX(58deg) translateY(-6%);
  mask-image: radial-gradient(ellipse at 50% 30%, #000 10%, transparent 60%); animation: gridmove 18s linear infinite; }
@keyframes gridmove { to { background-position: 0 560px, 0 560px; } }
.bg-glow { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(600px 400px at 15% 10%, rgba(245,197,24,.10), transparent 70%),
              radial-gradient(700px 500px at 85% 20%, rgba(140,90,255,.08), transparent 70%),
              radial-gradient(800px 600px at 50% 110%, rgba(245,197,24,.08), transparent 70%); }

/* ---------- top bar */
.top { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px; backdrop-filter: blur(14px); background: rgba(7,7,10,.55); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); font-family: var(--display); font-weight: 700; letter-spacing: .16em; }
.brand b { color: var(--gold); }
.mini-coin { width: 26px; height: 26px; perspective: 200px; display: inline-block; }
.mini-coin i { display: block; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6b0, var(--gold) 45%, var(--gold3));
  box-shadow: inset 0 0 0 3px rgba(150,95,0,.55), 0 0 14px rgba(245,197,24,.45); animation: minispin 3.2s linear infinite; }
@keyframes minispin { to { transform: rotateY(360deg); } }
nav { display: flex; align-items: center; gap: 20px; }
nav a { color: var(--text); opacity: .85; transition: opacity .2s; } nav a:hover { opacity: 1; }

/* ---------- generic pages */
main.page { max-width: 980px; margin: 0 auto; padding: 32px 20px 60px; animation: pagein .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes pagein { from { opacity: 0; transform: translateY(14px); } }
footer { text-align: center; color: var(--muted); font-size: 12px; padding: 30px 20px 40px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 24px 26px; margin-bottom: 18px;
  backdrop-filter: blur(10px); box-shadow: 0 20px 60px -30px rgba(0,0,0,.8); animation: pagein .6s cubic-bezier(.2,.8,.2,1) both; }
.card:nth-of-type(2) { animation-delay: .06s; } .card:nth-of-type(3) { animation-delay: .12s; } .card:nth-of-type(4) { animation-delay: .18s; }
.card.narrow { max-width: 430px; margin: 40px auto; }
h2 { margin: 0 0 10px; font-family: var(--display); } h3 { margin: 0 0 10px; }
label { display: block; margin: 12px 0; color: var(--muted); font-size: 13px; }
input, textarea { display: block; width: 100%; margin-top: 6px; padding: 11px 13px; background: rgba(8,8,12,.8); border: 1px solid var(--line);
  border-radius: 11px; color: var(--text); font: inherit; transition: border-color .2s, box-shadow .2s; }
input:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(245,197,24,.12); }
label.check { display: flex; align-items: center; gap: 8px; color: var(--text); } label.check input { width: auto; margin: 0; }

/* ---------- buttons */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; overflow: hidden;
  background: linear-gradient(180deg, var(--gold2), var(--gold) 55%, #e2a800); color: #141006; border: 0; border-radius: 12px;
  padding: 11px 20px; font-weight: 700; cursor: pointer; font-size: 15px; transition: transform .15s, box-shadow .25s, filter .2s;
  box-shadow: 0 8px 24px -10px rgba(245,197,24,.7), inset 0 1px 0 rgba(255,255,255,.6); }
.btn:hover { filter: brightness(1.06); box-shadow: 0 12px 34px -10px rgba(245,197,24,.9), inset 0 1px 0 rgba(255,255,255,.6); }
.btn:active { transform: scale(.97); }
.btn::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); }
.btn:hover::after { animation: sweep .8s ease; }
@keyframes sweep { to { left: 130%; } }
.btn.ghost { background: rgba(255,255,255,.04); color: var(--text); border: 1px solid rgba(255,255,255,.14); box-shadow: none; }
.btn.ghost:hover { border-color: rgba(245,197,24,.6); background: rgba(245,197,24,.06); }
.btn.small { padding: 7px 14px; font-size: 13px; } .btn.wide { width: 100%; margin-top: 8px; }
.btn.big { padding: 16px 30px; font-size: 17px; border-radius: 14px; }
.btn.glow { animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 10px rgba(245,197,24,.0), 0 0 46px rgba(245,197,24,.55), inset 0 1px 0 rgba(255,255,255,.6); } }
button.link { background: none; border: 0; color: var(--gold); cursor: pointer; font: inherit; padding: 0 6px; } button.link.danger { color: var(--bad); }
form.inline { display: inline; } .row { display: flex; gap: 10px; align-items: center; } .row input { margin: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .span2 { grid-column: span 2; }
.muted { color: var(--muted); } .small { font-size: 13px; } .right { text-align: right; white-space: nowrap; }
.flash { padding: 13px 16px; border-radius: 12px; margin-bottom: 16px; border: 1px solid var(--line); background: var(--card); animation: pagein .5s both; }
.flash.ok { border-color: rgba(63,191,127,.45); } .flash.error { border-color: rgba(229,83,75,.5); }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; border: 1px solid var(--line); color: var(--muted); }
.pill.ok { color: var(--ok); border-color: rgba(63,191,127,.45); } .pill.bad { color: var(--bad); border-color: rgba(229,83,75,.5); }
table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; } th { color: var(--muted); font-weight: 600; }
tr { transition: background .2s; } tbody tr:hover, table tr:hover td { background: rgba(255,255,255,.02); }
.notes pre, .notes-cell { white-space: pre-wrap; font: inherit; color: var(--muted); margin: 6px 0 0; }
code { background: rgba(0,0,0,.5); padding: 2px 6px; border-radius: 6px; }

/* ================================================================== 3D coin */
.coin3d { --size: 220px; --thick: 22px; width: var(--size); height: var(--size); perspective: 900px; }
.coin-spin { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: coinspin 4.5s linear infinite; }
@keyframes coinspin { from { transform: rotateY(0) rotateX(8deg); } to { transform: rotateY(360deg) rotateX(8deg); } }
.coin-layer { position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(180deg, #ffe36a, #e09400 55%, #8a5600);
  transform: translateZ(calc((var(--i) - 6.5) * var(--thick) / 14)); }
.coin-face { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden;
  background: radial-gradient(circle at 34% 28%, #fff7b8 0%, #ffd52a 30%, #f5b400 62%, #d48a00 100%);
  box-shadow: inset 0 0 0 calc(var(--size) * .035) #c98400, inset 0 0 calc(var(--size) * .12) rgba(120,70,0,.45); }
.coin-face span { position: absolute; inset: 15%; border-radius: 50%;
  background: linear-gradient(140deg, #e6a400, #ffc900 55%, #ffe060);
  box-shadow: inset 6px 6px 14px rgba(120,70,0,.45), inset -5px -5px 12px rgba(255,250,200,.55), 0 0 0 calc(var(--size) * .018) rgba(255,240,160,.7); }
.coin-face span::after { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.65) 48%, transparent 60%); background-size: 260% 100%;
  animation: facesheen 4.5s linear infinite; mix-blend-mode: soft-light; }
@keyframes facesheen { from { background-position: 130% 0; } to { background-position: -130% 0; } }
.coin-face.front { transform: translateZ(calc(var(--thick) / 2)); }
.coin-face.back { transform: rotateY(180deg) translateZ(calc(var(--thick) / 2)); filter: brightness(.88); }

/* ================================================================== intro loader */
#intro { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; pointer-events: all; }
#intro .intro-curtain { position: absolute; z-index: 0; left: 0; right: 0; height: 50.5%; background: #050507; transition: transform 1s cubic-bezier(.77,0,.18,1); }
#intro .intro-curtain.top { top: 0; } #intro .intro-curtain.bottom { bottom: 0; }
#intro .intro-stage { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 22px; transition: opacity .5s, transform .8s cubic-bezier(.77,0,.18,1); }
.intro-coin { --size: 130px; --thick: 16px; animation: coindrop 1.1s cubic-bezier(.2,1.4,.4,1) both; }
.intro-coin .coin-spin { animation-duration: 1.1s; }
@keyframes coindrop { from { transform: translateY(-60vh) scale(.6); opacity: 0; } 60% { opacity: 1; } }
.intro-ring { position: absolute; top: 65px; left: 50%; width: 10px; height: 10px; transform: translate(-50%, -50%); border-radius: 50%;
  border: 2px solid rgba(245,197,24,.8); box-shadow: 0 0 18px rgba(245,197,24,.5); opacity: 0; animation: ring 1.4s ease-out .9s infinite; }
@keyframes ring { 0% { width: 10px; height: 10px; opacity: .9; } 100% { width: 560px; height: 560px; opacity: 0; } }
.intro-word { font-family: var(--display); font-weight: 700; font-size: 44px; letter-spacing: .22em; display: flex; }
.intro-word span { display: inline-block; opacity: 0; transform: translateY(30px) rotateX(90deg); filter: blur(6px);
  animation: letter .6s cubic-bezier(.2,.9,.3,1.3) both; animation-delay: calc(.7s + var(--d) * .07s); }
.intro-word span.gold { color: var(--gold); text-shadow: 0 0 22px rgba(245,197,24,.6); }
@keyframes letter { to { opacity: 1; transform: none; filter: none; } }
.intro-bar { width: 240px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.intro-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold3), var(--gold2));
  box-shadow: 0 0 12px var(--gold); animation: bar 1.6s cubic-bezier(.6,0,.2,1) .4s forwards; }
@keyframes bar { to { width: 100%; } }
.intro-msg { color: var(--muted); font-size: 13px; letter-spacing: .08em; animation: blink 1.2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }
#intro.done .intro-curtain.top { transform: translateY(-101%); }
#intro.done .intro-curtain.bottom { transform: translateY(101%); }
#intro.done .intro-stage { opacity: 0; transform: scale(1.25); }
#intro.gone { display: none; }
body.intro-lock { overflow: hidden; }

/* ================================================================== hero */
body.home main.page { padding-top: 0; }
.hero { position: relative; min-height: calc(100vh - 64px - 80px); display: grid; place-items: center; overflow: hidden; text-align: center; padding: 40px 20px 70px; }
#sparks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.spotlight { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(500px circle at var(--mx, 50%) var(--my, 35%), rgba(245,197,24,.13), transparent 60%); transition: background .1s; }
.hero-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.hero-coin-wrap { position: relative; width: 300px; height: 300px; display: grid; place-items: center; margin-bottom: 18px;
  animation: float 6s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-14px); } }
.hero-coin { --size: 210px; --thick: 24px; }
.hero-coin .coin-spin { animation-duration: 6s; }
.halo { position: absolute; inset: -40px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(245,197,24,.35), transparent 30%, transparent 50%, rgba(255,223,94,.25), transparent 80%);
  filter: blur(22px); animation: halo 7s linear infinite; }
@keyframes halo { to { transform: rotate(360deg); } }
.orbit { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(245,197,24,.18); animation: halo 14s linear infinite; }
.orbit.o2 { inset: -36px; border-color: rgba(255,255,255,.06); animation-duration: 22s; animation-direction: reverse; }
.orbit i { position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
  background: var(--gold2); box-shadow: 0 0 16px 4px rgba(245,197,24,.7); }
.orbit.o2 i { top: auto; bottom: -4px; width: 7px; height: 7px; background: #fff; box-shadow: 0 0 12px 3px rgba(255,255,255,.5); }
.coin-shadow { position: absolute; bottom: 6px; width: 160px; height: 20px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.65), transparent); animation: shadow 6s ease-in-out infinite; }
@keyframes shadow { 50% { transform: scaleX(.8); opacity: .6; } }
.eyebrow { text-transform: uppercase; letter-spacing: .28em; font-size: 12px; color: var(--muted); margin: 0 0 6px; }
.title { font-family: var(--display); font-size: clamp(56px, 11vw, 120px); line-height: .95; letter-spacing: .08em; margin: 0 0 14px; }
.shine { background: linear-gradient(100deg, #fff 30%, #9a9aa6 45%, #fff 60%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 5s linear infinite; }
.shine.gold { background-image: linear-gradient(100deg, var(--gold) 30%, #fff6c4 45%, var(--gold) 60%); filter: drop-shadow(0 0 24px rgba(245,197,24,.45)); }
@keyframes shine { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.tagline { font-size: clamp(18px, 2.4vw, 24px); color: #cfcfd6; margin: 0 0 30px; min-height: 1.6em; }
.typer { color: var(--gold); font-weight: 600; }
.caret { color: var(--gold); animation: caret 1s steps(1) infinite; margin-left: 2px; }
@keyframes caret { 50% { opacity: 0; } }
.cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.magnetic { transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, filter .2s; }
.scroll-hint { margin-top: 46px; width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.25); border-radius: 14px; display: grid; justify-items: center; }
.scroll-hint span { width: 4px; height: 8px; margin-top: 7px; border-radius: 2px; background: var(--gold); animation: scroll 1.8s ease-in-out infinite; }
@keyframes scroll { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* ---------- marquee */
.marquee { border-block: 1px solid var(--line); background: rgba(245,197,24,.04); overflow: hidden; padding: 16px 0; }
.marquee-track { display: flex; gap: 28px; width: max-content; animation: marquee 32s linear infinite;
  font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: .06em; white-space: nowrap; }
.marquee-track i { color: var(--gold); font-style: normal; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- sections */
.features, .steps-section, .final-cta { max-width: 1100px; margin: 0 auto; padding: 100px 22px 20px; text-align: center; }
.section-title { font-family: var(--display); font-size: clamp(30px, 4.5vw, 48px); margin: 0 0 10px; }
.section-sub { color: var(--muted); max-width: 560px; margin: 0 auto 46px; font-size: 17px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; text-align: left; }
.feature { position: relative; overflow: hidden; padding: 26px; border-radius: 20px; background: var(--card); border: 1px solid var(--line);
  transform-style: preserve-3d; transition: transform .25s ease-out, border-color .3s, box-shadow .3s; }
.feature:hover { border-color: rgba(245,197,24,.4); box-shadow: 0 30px 60px -30px rgba(245,197,24,.35); }
.feature h3 { font-family: var(--display); font-size: 20px; margin: 14px 0 6px; } .feature p { color: var(--muted); margin: 0; }
.f-icon { width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; font-size: 26px;
  background: linear-gradient(145deg, rgba(245,197,24,.22), rgba(245,197,24,.04)); border: 1px solid rgba(245,197,24,.25); transform: translateZ(30px); }
.f-shine { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(300px circle at var(--px, 50%) var(--py, 50%), rgba(245,197,24,.14), transparent 60%); }
.feature:hover .f-shine { opacity: 1; }
.timeline { list-style: none; padding: 0; margin: 46px auto 0; max-width: 640px; text-align: left; position: relative; }
.timeline::before { content: ''; position: absolute; left: 25px; top: 10px; bottom: 10px; width: 2px;
  background: linear-gradient(var(--gold), rgba(245,197,24,.05)); transform-origin: top; transform: scaleY(var(--line-p, 0)); transition: transform 1.2s ease; }
.timeline.drawn::before { --line-p: 1; }
.timeline li { display: flex; gap: 22px; align-items: flex-start; padding: 16px 0; }
.timeline .dot { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 20px;
  color: #141006; background: radial-gradient(circle at 35% 30%, #fff6b0, var(--gold) 50%, var(--gold3)); box-shadow: 0 0 0 6px var(--bg), 0 0 26px rgba(245,197,24,.5); position: relative; z-index: 1; }
.timeline h3 { font-family: var(--display); margin: 10px 0 4px; } .timeline p { margin: 0; color: var(--muted); }
.final-cta { padding: 110px 22px 70px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.final-cta h2 { font-family: var(--display); font-size: clamp(32px, 5vw, 54px); margin: 0; }
.small-coin { --size: 90px; --thick: 12px; }

/* ---------- scroll reveal */
.reveal { opacity: 0; transform: translateY(36px) scale(.98); filter: blur(4px);
  transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1), filter .9s; transition-delay: calc(var(--d, 0) * .09s); }
.reveal.in { opacity: 1; transform: none; filter: none; }
.hero .reveal { transition-duration: 1.1s; }
.hero .reveal:nth-of-type(1) { --d: 1; } .hero .title.reveal { --d: 2; } .hero .tagline.reveal { --d: 4; } .hero .cta.reveal { --d: 6; }

/* ---------- coin burst particles */
.burst-coin { position: fixed; z-index: 999; width: 16px; height: 16px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #fff6b0, var(--gold) 50%, var(--gold3)); box-shadow: 0 0 10px rgba(245,197,24,.7); }

@media (max-width: 860px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .grid2 { grid-template-columns: 1fr; } .span2 { grid-column: auto; } .row { flex-wrap: wrap; }
  .feature-grid { grid-template-columns: 1fr; } .top { padding: 12px 16px; } nav { gap: 12px; font-size: 14px; }
  .hero-coin-wrap { width: 230px; height: 230px; } .hero-coin { --size: 160px; --thick: 18px; } .intro-word { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .reveal { opacity: 1; transform: none; filter: none; }
}

/* ---------- interactive hero coin */
.coin-tilt { transition: transform .35s cubic-bezier(.2,.8,.2,1); cursor: pointer; transform-style: preserve-3d; }
.coin-tilt.boost .coin-spin { animation-duration: .45s; }
.coin-tilt.boost { transform: scale(1.12) !important; }
.click-ripple { position: fixed; z-index: 998; width: 10px; height: 10px; border-radius: 50%; pointer-events: none;
  border: 2px solid rgba(245,197,24,.85); box-shadow: 0 0 16px rgba(245,197,24,.6); transform: translate(-50%, -50%);
  animation: ripple .7s ease-out forwards; }
@keyframes ripple { to { width: 160px; height: 160px; opacity: 0; } }
body.home footer { padding-top: 0; }