:root { color-scheme: dark; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #0b1713; color: #f4fff9; }
* { box-sizing: border-box; }
body { margin: 0; }
.hero { position: relative; isolation: isolate; min-height: 100svh; display: grid; place-items: center; overflow: hidden; padding: 72px 24px; }
.ambient, .stars, .cards, .veil { position: absolute; inset: 0; pointer-events: none; }
.ambient { background: radial-gradient(ellipse at 18% 25%, #184332 0, transparent 48%), radial-gradient(ellipse at 82% 65%, #183b34 0, transparent 48%), radial-gradient(ellipse at 50% 80%, #102c26, #09100e 80%); }
.stars { opacity: .48; background-image: radial-gradient(circle, #8cebb5 0, #4bc38b66 1px, transparent 5px), radial-gradient(circle, #b8efce 0, #67bf9a55 1px, transparent 7px), radial-gradient(circle, #4fbead 0, transparent 4px); background-size: 113px 127px, 197px 173px, 269px 211px; background-position: 12px 34px, 63px 19px, 37px 86px; animation: shimmer 8s ease-in-out infinite alternate; }
.cards img { position: absolute; left: var(--x); top: var(--y); width: clamp(105px, 10.2vw, 180px); height: auto; opacity: .53; border-radius: 7px; transform: translate(-50%, -50%) rotate(var(--r)); filter: saturate(.8) drop-shadow(0 12px 20px #0008); animation: float 9s ease-in-out infinite; animation-delay: var(--d); }
.veil { background: radial-gradient(ellipse 39% 50% at center, #081610ed, #0a1816a8 62%, transparent 100%), linear-gradient(0deg, #080f0c99, transparent 25%, transparent 80%, #080f0c44); }
.content { position: relative; z-index: 1; width: min(100%, 760px); text-align: center; }
.status { display: inline-flex; align-items: center; gap: 9px; border: 1px solid #8de6b833; border-radius: 999px; padding: 9px 16px; background: #81dbaa0d; color: #a2dfbf; font-size: 11px; font-weight: 650; letter-spacing: .15em; text-transform: uppercase; }
.status span { width: 6px; height: 6px; border-radius: 50%; background: #80dfb0; box-shadow: 0 0 12px #80dfb080; }
h1 { margin: 27px 0 18px; font-size: clamp(58px, 7.5vw, 108px); font-weight: 750; letter-spacing: -.065em; line-height: 1.04; text-shadow: 0 8px 40px #04150e80; }
p { margin: 0; color: #c2d8cd; font-size: clamp(17px, 2vw, 25px); line-height: 1.5; letter-spacing: -.025em; }
.actions { display: flex; justify-content: center; gap: 14px; margin-top: 34px; }
.button { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 11px; padding: 0 25px; border-radius: 13px; font-size: 15px; font-weight: 650; text-decoration: none; transition: transform .2s, background .2s, box-shadow .2s; }
.button svg { width: 17px; height: 17px; }
.primary { color: #102c22; background: linear-gradient(135deg, #91e7bc, #59c58e); border: 1px solid #a4edc980; box-shadow: 0 4px 24px #46bb8018, inset 0 1px #ffffff40; }
.token { min-width: 134px; color: #effff6; border: 1px solid #b8efcf30; background: #a0e5bf0d; backdrop-filter: blur(14px); }
.token img { object-fit: contain; }
.arrow { margin-left: 8px; color: #9abaac; }
.button:hover { transform: translateY(-3px); box-shadow: 0 8px 30px #65d99b25; }
.token:hover { background: #a0e5bf22; }
.button:focus-visible { outline: 3px solid #c0f8d9; outline-offset: 5px; }
@keyframes float { 50% { transform: translate(-50%, calc(-50% - 16px)) rotate(calc(var(--r) + 3deg)); } }
@keyframes shimmer { to { opacity: .24; transform: translateY(-5px); } }
@media (max-width: 600px) {
  .hero { padding: 56px 20px; }
  .cards img { width: 110px; opacity: .38; }
  .cards img:nth-child(6), .cards img:nth-child(7) { opacity: .18; }
  .veil { background: radial-gradient(ellipse 90% 48% at center, #081610ed, #0a1816a8 62%, transparent 100%); }
  .actions { gap: 10px; margin-top: 28px; }
  .button { font-size: 14px; padding: 0 18px; }
  .token { min-width: 108px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }