/* GreekOnion Community Tournament (greekonion.com/campaign). Monochrome; the only colour is the USDT mark. */
@font-face { font-family: "Monnae"; src: url(/fonts/monnae.woff2) format("woff2"); font-display: swap; unicode-range: U+0020-0024, U+0026-00FF; }
@font-face { font-family: "Onest"; src: url(/fonts/onest.woff2) format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #0a0a0a; --bg2: #111; --fg: #f4f3ef; --fg2: #b9b7b1; --fg3: #7d7b76;
  --line: rgba(255,255,255,.09); --line2: rgba(255,255,255,.16);
  --glass: rgba(255,255,255,.035); --glass2: rgba(255,255,255,.06);
  --r: 22px; --r-sm: 14px; --pad: clamp(16px, 4vw, 40px); --max: 1160px;
  --ease: cubic-bezier(.2,.7,.2,1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body.cp { margin: 0; overflow-x: clip; background: var(--bg); color: var(--fg); font: 400 16px/1.6 "Onest", system-ui, sans-serif; overflow-x: hidden;
  -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.02em; }
h2 { font: 400 clamp(30px, 5.2vw, 56px)/1.02 "Monnae", "Onest", sans-serif; letter-spacing: -.01em; text-transform: uppercase; max-width: 16ch; }
h3 { font-size: 17px; line-height: 1.3; }
p { margin: 0; }
svg { display: block; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 6px; }

/* ---------- background: soft light + grain ---------- */
.cp-bg { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.cp-bg span { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; }
.cp-bg .b1 { width: 60vmax; height: 60vmax; left: -20vmax; top: -30vmax; background: radial-gradient(circle, rgba(255,255,255,.16), transparent 62%); animation: drift 26s var(--ease) infinite alternate; }
.cp-bg .b2 { width: 50vmax; height: 50vmax; right: -22vmax; top: 30vh; background: radial-gradient(circle, rgba(255,255,255,.09), transparent 60%); animation: drift 32s var(--ease) infinite alternate-reverse; }
.cp-bg .b3 { width: 40vmax; height: 40vmax; left: 20vw; bottom: -25vmax; background: radial-gradient(circle, rgba(255,255,255,.07), transparent 60%); animation: drift 38s var(--ease) infinite alternate; }
@keyframes drift { to { transform: translate3d(6vw, 4vh, 0) scale(1.08); } }
.cp-grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* ---------- glass ---------- */
.glass { position: relative; background: linear-gradient(180deg, var(--glass2), var(--glass)); border: 1px solid var(--line);
  border-radius: var(--r); -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%);
  box-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 30px 60px -40px rgba(0,0,0,.8); }
.glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,.10), transparent 32%, transparent 70%, rgba(255,255,255,.04)); opacity: .7; }

/* ---------- buttons ---------- */
.cp-btn { --h: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--h); padding: 0 26px;
  border: 0; border-radius: 999px; background: var(--fg); color: #0a0a0a; font: 600 16px/1 "Onest", sans-serif; text-decoration: none; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255,255,255,.4) inset, 0 12px 30px -10px rgba(255,255,255,.35); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.cp-btn svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.cp-btn:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255,255,255,.5) inset, 0 18px 40px -12px rgba(255,255,255,.45); }
.cp-btn:hover svg { transform: translateX(3px); }
.cp-btn:active { transform: translateY(0) scale(.98); }
.cp-btn-sm { --h: 42px; padding: 0 18px; font-size: 14px; }
.cp-btn-ghost { background: transparent; color: var(--fg); box-shadow: 0 0 0 1px var(--line2) inset; }
.cp-btn-ghost:hover { box-shadow: 0 0 0 1px rgba(255,255,255,.4) inset; }

/* ---------- top bar ---------- */
.cp-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 24px; max-width: var(--max); margin: 0 auto;
  padding: 14px var(--pad); }
.cp-top::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); z-index: -1; background: linear-gradient(180deg, rgba(10,10,10,.85), rgba(10,10,10,.55));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.cp-brand { color: var(--fg); display: block; width: 150px; flex: none; }
.cp-brand svg { width: 100%; height: auto; }
.cp-nav { display: flex; gap: 22px; margin-left: auto; font-size: 14px; color: var(--fg2); }
.cp-nav a { text-decoration: none; transition: color .2s; }
.cp-nav a:hover { color: var(--fg); }

/* ---------- hero ---------- */
main { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.cp-hero, .cp-final { overflow-x: clip; }
.cp-hero { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(48px, 9vh, 110px) 0 clamp(56px, 10vh, 120px); }
.cp-halo { position: absolute; z-index: -1; left: 50%; top: 4%; width: min(900px, 120vw); aspect-ratio: 1.6; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(255,255,255,.14), transparent 60%); filter: blur(10px); pointer-events: none; }
.cp-label { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line2);
  background: var(--glass); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg2); }
.cp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fg); box-shadow: 0 0 0 0 rgba(255,255,255,.6); animation: ping 2.4s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 8px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
.cp-prize { margin-top: 26px; display: flex; flex-direction: column; align-items: center; }
.cp-amount { font: 400 clamp(96px, 22vw, 260px)/.86 "Monnae", "Onest", sans-serif; letter-spacing: -.02em;
  filter: drop-shadow(0 20px 50px rgba(255,255,255,.12)); }
.cp-prize-line { display: inline-flex; align-items: center; gap: 12px; margin-top: 14px; font: 400 clamp(22px, 4vw, 40px)/1 "Monnae", "Onest", sans-serif; text-transform: uppercase; }
.usdt { width: 1.15em; height: 1.15em; flex: none; filter: drop-shadow(0 4px 14px rgba(38,161,123,.35)); }
.cp-extra { margin-top: 14px; font-size: clamp(16px, 2.2vw, 20px); color: var(--fg2); }
.cp-rotate { margin-top: 26px; font-size: clamp(17px, 2.4vw, 22px); color: var(--fg2); display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .35em; }
.cp-words { position: relative; display: inline-grid; color: var(--fg); font-weight: 600; transition: width .5s var(--ease); }
.cp-word { grid-area: 1 / 1; white-space: nowrap; transition: transform .55s var(--ease), opacity .55s var(--ease), filter .55s var(--ease); }
.cp-word.is-out { transform: translateY(-60%); opacity: 0; filter: blur(4px); }
.cp-word.is-in { transform: translateY(60%); opacity: 0; filter: blur(4px); }

.cp-count { margin-top: 34px; padding: 18px 22px 16px; width: min(520px, 100%); }
.cp-count-label { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg3); }
.cp-count-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.cp-count-grid div { display: flex; flex-direction: column; align-items: center; padding: 10px 0 8px; border-radius: var(--r-sm); background: rgba(255,255,255,.035); border: 1px solid var(--line); }
.cp-count-grid b { font: 600 clamp(28px, 6vw, 42px)/1 "Onest", sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cp-count-grid span { margin-top: 6px; font-size: 12px; color: var(--fg3); text-transform: uppercase; letter-spacing: .08em; }
.cp-count-foot { margin-top: 12px; font-size: 13px; color: var(--fg3); }
.cp-count.is-done .cp-count-grid { display: none; }
.cp-cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }

/* ---------- sections ---------- */
.cp-sec { padding: clamp(56px, 10vw, 110px) 0 0; }
.cp-kicker { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg3); margin-bottom: 14px; }
.cp-lede { margin-top: 18px; max-width: 62ch; font-size: clamp(17px, 2vw, 19px); color: var(--fg2); }
.cp-note { margin-top: 18px; font-size: 14px; color: var(--fg3); }
.cp-grid { display: grid; gap: 14px; margin-top: 30px; }
.cp-grid-3 { grid-template-columns: 1.25fr 1fr 1fr; }
.cp-card { padding: 24px; display: flex; flex-direction: column; gap: 10px; min-height: 240px; transition: transform .35s var(--ease), border-color .35s; }
.cp-card:hover, .cp-role:hover { transform: translateY(-3px); border-color: var(--line2); }
.cp-card p:last-child { color: var(--fg2); font-size: 15px; }
.cp-card-top { display: flex; align-items: center; justify-content: space-between; }
.cp-card-top .usdt { width: 34px; height: 34px; }
.cp-tag { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg3); padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; }
.cp-big { font: 400 clamp(56px, 8vw, 84px)/.9 "Monnae", "Onest", sans-serif; margin-top: auto; padding-top: 18px; }
.cp-big-sm { font-size: clamp(44px, 6vw, 64px); }
.cp-card-hero { background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.03) 55%); }
.cp-ico { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid var(--line); }
.cp-ico svg { width: 20px; height: 20px; }

.cp-roles { grid-template-columns: repeat(4, 1fr); }
.cp-role { padding: 20px; display: flex; flex-direction: column; gap: 10px; transition: transform .35s var(--ease), border-color .35s; }
.cp-role h3 { margin-top: 6px; }
.cp-role p { color: var(--fg2); font-size: 14px; }

.cp-steps { list-style: none; padding: 0; margin: 30px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; counter-reset: s; }
.cp-steps li { padding: 20px; display: flex; gap: 16px; align-items: flex-start; }
.cp-steps p { color: var(--fg2); font-size: 14px; margin-top: 4px; }
.cp-num { align-self: flex-start; font: 600 13px/1 "Onest", sans-serif; letter-spacing: .06em; color: var(--fg3); padding: 7px 9px; border-radius: 9px; border: 1px solid var(--line); flex: none; }
.cp-tip { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; padding: 10px 16px 10px 10px; border-radius: 999px; border: 1px solid var(--line2); background: var(--glass); font-size: 15px; }
.cp-tip .cp-ico { width: 30px; height: 30px; border-radius: 50%; }
.cp-tip .cp-ico svg { width: 16px; height: 16px; }

.cp-timeline { list-style: none; padding: 0; margin: 30px 0 0; display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 14px; }
.cp-timeline li { padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.cp-timeline li p:last-of-type { color: var(--fg2); font-size: 15px; }
.cp-when { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg3); }
.cp-timeline h3 { font: 400 clamp(24px, 3vw, 32px)/1 "Monnae", "Onest", sans-serif; text-transform: uppercase; }
.cp-timeline li.is-now { border-color: rgba(255,255,255,.35); }
.cp-live { align-self: flex-start; margin-top: auto; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--fg); color: #0a0a0a; }

.cp-quote { padding: clamp(28px, 5vw, 56px); }
.cp-quote blockquote { margin: 6px 0 24px; font: 400 clamp(26px, 4.4vw, 46px)/1.1 "Monnae", "Onest", sans-serif; text-transform: uppercase; }
.cp-quote blockquote p { color: var(--fg3); }
.cp-quote blockquote em { font-style: normal; color: var(--fg); }
.cp-quote > p:last-child { color: var(--fg2); max-width: 68ch; }

.cp-road { list-style: none; padding: 0; margin: 30px 0 0; position: relative; display: grid; gap: 12px; }
.cp-road::before { content: ""; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 1px; background: linear-gradient(var(--line2), var(--line)); }
.cp-road li { display: grid; grid-template-columns: 24px 1fr; gap: 18px; align-items: start; }
.cp-road-dot { width: 23px; height: 23px; margin-top: 20px; border-radius: 50%; border: 1px solid var(--line2); background: var(--bg); position: relative; }
.cp-road li.is-now .cp-road-dot { background: var(--fg); box-shadow: 0 0 0 6px rgba(255,255,255,.08), 0 0 24px rgba(255,255,255,.35); }
.cp-road .glass { padding: 18px 22px; }
.cp-road li:not(.is-now) .glass { opacity: .78; }
.cp-road p:last-child { color: var(--fg2); font-size: 15px; margin-top: 4px; }
.cp-road b { color: var(--fg); }

.cp-fund { padding: clamp(24px, 4vw, 44px); }
.cp-fund-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.cp-fund h2 { max-width: none; }
.cp-fund h2 span { display: block; font: 400 16px/1.4 "Onest", sans-serif; text-transform: none; color: var(--fg2); margin-top: 8px; letter-spacing: 0; }
.cp-pct { font: 400 clamp(44px, 7vw, 72px)/1 "Monnae", "Onest", sans-serif; }
.cp-bar { margin-top: 24px; height: 14px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid var(--line); overflow: hidden; }
.cp-bar span { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(var(--p, 0)); border-radius: 999px;
  background: linear-gradient(90deg, #8f8d88, #fff); box-shadow: 0 0 20px rgba(255,255,255,.35); transition: transform 1.6s var(--ease); }
/* width without JS (nearest 5%); JS animates to the exact value */
.cp-bar span.w0{--p:0} .cp-bar span.w5{--p:0.05} .cp-bar span.w10{--p:0.1} .cp-bar span.w15{--p:0.15} .cp-bar span.w20{--p:0.2} .cp-bar span.w25{--p:0.25} .cp-bar span.w30{--p:0.3} .cp-bar span.w35{--p:0.35} .cp-bar span.w40{--p:0.4} .cp-bar span.w45{--p:0.45} .cp-bar span.w50{--p:0.5} .cp-bar span.w55{--p:0.55} .cp-bar span.w60{--p:0.6} .cp-bar span.w65{--p:0.65} .cp-bar span.w70{--p:0.7} .cp-bar span.w75{--p:0.75} .cp-bar span.w80{--p:0.8} .cp-bar span.w85{--p:0.85} .cp-bar span.w90{--p:0.9} .cp-bar span.w95{--p:0.95} .cp-bar span.w100{--p:1}
.cp-fund-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 22px 0 0; }
.cp-fund-stats div { padding: 14px 16px; border-radius: var(--r-sm); border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.cp-fund-stats dt { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--fg3); }
.cp-fund-stats dd { margin: 6px 0 0; font-size: 18px; font-weight: 600; }

.cp-terms { padding: 0; }
.cp-terms summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 22px 24px;
  font: 400 clamp(22px, 3vw, 30px)/1 "Monnae", "Onest", sans-serif; text-transform: uppercase; }
.cp-terms summary::-webkit-details-marker { display: none; }
.cp-terms .cp-ico svg { transition: transform .3s var(--ease); }
.cp-terms[open] .cp-ico svg { transform: rotate(45deg); }
.cp-terms ul { margin: 0; padding: 0 24px 24px 44px; color: var(--fg2); display: grid; gap: 8px; }

.cp-final { position: relative; text-align: center; padding: clamp(80px, 14vw, 160px) 0; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.cp-final h2 { max-width: 14ch; font-size: clamp(36px, 7vw, 80px); }
.cp-halo-2 { top: 10%; }

/* ---------- footer ---------- */
.cp-foot { max-width: var(--max); margin: 0 auto; padding: 36px var(--pad) 48px; border-top: 1px solid var(--line); display: grid; gap: 18px;
  grid-template-columns: 1fr auto; align-items: center; color: var(--fg3); font-size: 13px; }
.cp-foot > p { grid-column: 1 / -1; max-width: 80ch; }
.cp-social { display: flex; gap: 8px; }
.cp-social a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line); color: var(--fg2); transition: color .2s, border-color .2s; }
.cp-social a:hover { color: var(--fg); border-color: var(--line2); }
.cp-social svg { width: 18px; height: 18px; }
.cp-social svg [fill="var(--chalk, #fff)"] { fill: var(--bg); }
.cp-legal { display: flex; flex-wrap: wrap; gap: 18px; grid-column: 1 / -1; }
.cp-legal a { text-decoration: none; } .cp-legal a:hover { color: var(--fg); }

/* ---------- Start Here modal ---------- */
.cp-modal { padding: 0; border: 0; background: transparent; color: var(--fg); width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); }
.cp-modal::backdrop { background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cp-modal[open] .cp-modal-in { animation: pop .35s var(--ease); }
@keyframes pop { from { transform: translateY(14px) scale(.98); opacity: 0; } }
.cp-modal-in { padding: 28px; background: linear-gradient(180deg, rgba(30,30,30,.92), rgba(16,16,16,.94)); }
.cp-modal h2 { font-size: clamp(28px, 5vw, 40px); }
.cp-x { position: absolute; right: 14px; top: 14px; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: var(--fg2); cursor: pointer; display: grid; place-items: center; }
.cp-x svg { width: 18px; height: 18px; }
.cp-flow { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.cp-step { display: flex; gap: 14px; padding: 16px; border-radius: var(--r-sm); border: 1px solid var(--line); background: rgba(255,255,255,.03); transition: opacity .3s, border-color .3s; }
.cp-step p { color: var(--fg2); font-size: 14px; margin: 4px 0 12px; }
.cp-step.is-done { border-color: rgba(255,255,255,.3); }
.cp-step.is-done .cp-num { background: var(--fg); color: #0a0a0a; border-color: var(--fg); }
.cp-step.is-locked { opacity: .5; }
.cp-step.is-locked .cp-btn { pointer-events: none; background: transparent; color: var(--fg2); box-shadow: 0 0 0 1px var(--line2) inset; }
.cp-step .cp-btn svg { width: 15px; height: 15px; }
.cp-step.is-locked .cp-btn svg { display: block; }
.cp-step:not(.is-locked) .cp-btn svg { display: none; }
.cp-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; }
.cp-link svg { width: 16px; height: 16px; }
.cp-step a:not(.cp-btn):not(.cp-link) { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- reveal on scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .cp-grid-3 { grid-template-columns: 1fr 1fr; } .cp-card-hero { grid-column: 1 / -1; }
  .cp-roles { grid-template-columns: repeat(2, 1fr); }
  .cp-steps { grid-template-columns: 1fr 1fr; }
  .cp-timeline { grid-template-columns: 1fr; }
  .cp-fund-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .cp-nav { display: none; }
  .cp-top { gap: 12px; padding-top: 10px; padding-bottom: 10px; }
  .cp-top .cp-btn { margin-left: auto; }
  .cp-brand { width: 128px; }
  .cp-label { font-size: 11px; letter-spacing: .06em; padding: 7px 12px; gap: 8px; }
  .cp-hero { padding-top: 36px; }
  .cp-grid-3, .cp-steps { grid-template-columns: 1fr; }
  .cp-card { min-height: 0; }
  .cp-roles { gap: 10px; }
  .cp-role { padding: 16px; }
  .cp-role p { font-size: 13px; }
  .cp-count { padding: 14px; }
  .cp-count-grid { gap: 6px; }
  .cp-cta-row .cp-btn { width: 100%; }
  .cp-fund-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .cp-foot { grid-template-columns: 1fr; }
  .cp-modal-in { padding: 22px 18px; }
  .glass { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ===== v2 (2 Nov): green/red accents, sheen, eyebrow, animated icons, eye, Discord, coins ===== */
:root { --green: #2fd68f; --green-d: #1f8f63; --red: #ff5a4f; }
em { font-style: normal; }
em.g, b.g { color: var(--green); }
em.r { color: var(--red); }
h2 em.g { background: linear-gradient(90deg, #7af0bd, var(--green)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* $750: a slow green reflection sweeping across the metal */
.cp-amount { position: relative;
  background: linear-gradient(105deg, #fff 0%, #fff 40%, #c6f5df 45%, #39e09a 48.5%, #eafff5 51%, #fff 56%, #fff 100%);
  background-size: 260% 100%; background-position: 120% 0; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sheen 6.5s cubic-bezier(.45,.05,.3,1) 1.2s infinite; }
@keyframes sheen { 0% { background-position: 120% 0; } 45%, 100% { background-position: -40% 0; } }

.cp-prize-line { position: relative; z-index: 1; }

/* eyebrow: hairlines that draw in, an N°01 tag and a decode effect (replaces the pill) */
.cp-eyebrow { display: flex; align-items: center; justify-content: center; gap: 14px; width: min(760px, 100%); font-size: 13px; letter-spacing: .32em;
  text-transform: uppercase; color: var(--fg2); font-variant-numeric: tabular-nums; }
.cp-rule { flex: 1; height: 1px; max-width: 160px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.5)); transform-origin: right;
  animation: rule 1.4s var(--ease) .2s both; }
.cp-rule:last-child { background: linear-gradient(270deg, transparent, rgba(255,255,255,.5)); transform-origin: left; }
@keyframes rule { from { transform: scaleX(0); opacity: 0; } }
.cp-no { flex: none; font: 600 12px/1 "Onest", sans-serif; letter-spacing: .08em; color: #0a0a0a; background: var(--green); padding: 6px 8px; border-radius: 6px;
  box-shadow: 0 0 22px rgba(47,214,143,.35); animation: tag 1s var(--ease) .1s both; }
@keyframes tag { from { transform: translateY(8px) rotate(-6deg); opacity: 0; } }
.cp-decode { white-space: nowrap; }
.cp-decode .sc { color: var(--green); opacity: .8; }

/* role icons: draw in, then the green part breathes */
.cp-role .cp-ico, .cp-card .cp-ico { color: var(--fg); }
.cp-ico .g { stroke: var(--green); }
.cp-role .cp-ico path, .cp-role .cp-ico rect, .cp-role .cp-ico circle { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .cp-role .cp-ico path, .js .cp-role .cp-ico rect, .js .cp-role .cp-ico circle { stroke-dashoffset: 1; }
.js .reveal.is-in .cp-role .cp-ico path, .js .reveal.is-in .cp-role .cp-ico rect, .js .reveal.is-in .cp-role .cp-ico circle {
  animation: draw 1.3s var(--ease) forwards; }
.js .reveal.is-in .cp-role:nth-child(2) .cp-ico * { animation-delay: .1s; } .js .reveal.is-in .cp-role:nth-child(3) .cp-ico * { animation-delay: .2s; }
.js .reveal.is-in .cp-role:nth-child(4) .cp-ico * { animation-delay: .3s; } .js .reveal.is-in .cp-role:nth-child(5) .cp-ico * { animation-delay: .4s; }
.js .reveal.is-in .cp-role:nth-child(6) .cp-ico * { animation-delay: .5s; } .js .reveal.is-in .cp-role:nth-child(7) .cp-ico * { animation-delay: .6s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.cp-role .cp-ico { position: relative; }
.cp-role .cp-ico::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 0 rgba(47,214,143,.0); animation: halo 3.6s ease-in-out infinite; }
.cp-role:nth-child(odd) .cp-ico::after { animation-delay: 1.8s; }
@keyframes halo { 50% { box-shadow: 0 0 18px 0 rgba(47,214,143,.22); border-color: rgba(47,214,143,.4); } }
.cp-role:hover .cp-ico svg { transform: translateY(-2px) rotate(-6deg); }
.cp-role .cp-ico svg { transition: transform .35s var(--ease); }

/* fair play: the eye */
.cp-fair { display: grid; grid-template-columns: 260px 1fr; gap: clamp(20px, 4vw, 48px); align-items: center; padding: clamp(24px, 4vw, 44px); overflow: hidden; }
.cp-eye { position: relative; width: 100%; max-width: 260px; aspect-ratio: 200 / 120; justify-self: center; }
.cp-eye-svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 30px rgba(47,214,143,.18)); }
.cp-eye-lid { fill: #0d0d0d; stroke: rgba(255,255,255,.75); stroke-width: 2.5; }
.cp-pupil { transition: transform .25s ease-out; }
.cp-blink { animation: blink 6s infinite; }
@keyframes blink { 0%, 92%, 100% { transform: translateY(0); } 95% { transform: translateY(120px); } 97% { transform: translateY(120px); } }
.cp-scan { position: absolute; left: -10%; right: -10%; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, rgba(47,214,143,.7), transparent);
  animation: scan 4.5s ease-in-out infinite; opacity: .6; }
@keyframes scan { 0%, 100% { transform: translateY(-42px); opacity: 0; } 20%, 80% { opacity: .6; } 50% { transform: translateY(42px); } }
.cp-fair h2 { max-width: 18ch; }

/* funding bar in green */
.cp-bar span { background: linear-gradient(90deg, var(--green-d), var(--green) 70%, #9ff5cf); box-shadow: 0 0 22px rgba(47,214,143,.45); position: relative; }
.cp-pct { color: var(--green); }

/* Discord mark in the final CTA */
.cp-discord { position: relative; width: 84px; height: 84px; display: grid; place-items: center; border-radius: 26px; color: var(--fg);
  background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.03)); border: 1px solid var(--line2); animation: bob 4s ease-in-out infinite; }
.cp-discord svg { width: 42px; height: 42px; filter: drop-shadow(0 0 12px rgba(255,255,255,.35)); }
.cp-ring { position: absolute; inset: -1px; border-radius: inherit; border: 1px solid rgba(47,214,143,.55); animation: ring 3s ease-out infinite; }
.cp-ring-2 { animation-delay: 1.5s; }
@keyframes ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-3deg); } }

/* greyscale USDT coins drifting in the background */
.cp-coins i { position: absolute; display: block; filter: grayscale(1) blur(.5px); opacity: .07; animation: coin 38s linear infinite; }
.cp-coins svg { width: 100%; height: 100%; }
.cp-coins .c1 { width: 70px; height: 70px; left: 6%; top: 105%; animation-duration: 42s; }
.cp-coins .c2 { width: 46px; height: 46px; left: 22%; top: 105%; animation-duration: 36s; animation-delay: -12s; }
.cp-coins .c3 { width: 90px; height: 90px; left: 78%; top: 105%; animation-duration: 48s; animation-delay: -20s; opacity: .05; }
.cp-coins .c4 { width: 38px; height: 38px; left: 60%; top: 105%; animation-duration: 33s; animation-delay: -5s; }
.cp-coins .c5 { width: 58px; height: 58px; left: 90%; top: 105%; animation-duration: 40s; animation-delay: -30s; }
.cp-coins .c6 { width: 30px; height: 30px; left: 40%; top: 105%; animation-duration: 30s; animation-delay: -16s; }
.cp-coins .c7 { width: 64px; height: 64px; left: 50%; top: 105%; animation-duration: 46s; animation-delay: -38s; opacity: .05; }
@keyframes coin { from { transform: translate3d(0, 0, 0) rotate(0deg); } to { transform: translate3d(-40px, -125vh, 0) rotate(300deg); } }

@media (max-width: 720px) {
  .cp-eyebrow { flex-direction: column; font-size: 10.5px; letter-spacing: .2em; gap: 12px; }
  .cp-rule { display: none; }
  .cp-decode { white-space: normal; text-align: center; }
  .cp-fair { grid-template-columns: 1fr; text-align: left; }
  .cp-eye { max-width: 200px; }
  .cp-coins .c3, .cp-coins .c5, .cp-coins .c7 { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cp-amount { background-position: 30% 0; } .cp-coins { display: none; } }

.cp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }