/* Site-specific visual styles; Tailwind utilities handle layout. */
html { scroll-behavior: smooth; }
body { background: #0D0D0D; }
.grid-lines { background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 40px 40px; }
.mint-text { background: linear-gradient(135deg, #9AF7CF, #10B981); -webkit-background-clip: text; background-clip: text; color: transparent; }
.phone { background: #080808; border: 7px solid #292929; border-radius: 2.2rem; box-shadow: 0 22px 45px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,255,255,.08); overflow: hidden; }
.phone img { display: block; width: 100%; height: 100%; object-fit: cover; }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show { opacity: 1; transform: none; }

/* Crops the transparent canvas around Logo.png for a visually centered hero icon. */
.hero-logo-wrap { width: 12.5rem; height: 10.75rem; margin: 0 auto 1.5rem; overflow: hidden; display: flex; justify-content: center; }
.hero-logo-wrap img { width: 14.5rem; max-width: none; height: 14.5rem; object-fit: contain; transform: translate(-.95rem, -2.35rem); }
@media (min-width: 640px) { .hero-logo-wrap { width: 14rem; height: 12rem; margin-bottom: 1.75rem; } .hero-logo-wrap img { width: 16.25rem; height: 16.25rem; transform: translate(-1.1rem, -2.65rem); } }