*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #050810; --surface: #080d1a;
  --text: #e2e8f0; --muted: #64748b; --dimmed: #94a3b8;
  --border: #1e2d45; --border-bright: #2a3f5f;
  --teal: #00e5cc;
}
html, body { height: 100%; font-family: 'Geist', -apple-system, sans-serif; background: var(--bg); color: var(--text); overflow-x: hidden; }
canvas#stars { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 2rem; position: relative; z-index: 1; }
.hero-glow { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 600px; height: 400px; background: radial-gradient(ellipse at 50% 20%, rgba(255,180,0,0.1) 0%, rgba(255,120,0,0.04) 40%, transparent 70%); pointer-events: none; }
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 3.5rem; }
.mascot { width: 110px; height: 110px; margin-bottom: 2rem; filter: drop-shadow(0 0 28px rgba(255,180,0,0.4)); }
.rocket-body { animation: rocket-float 4s ease-in-out infinite; transform-origin: 55px 55px; }
.rocket-flame { animation: flame-flicker 0.4s ease-in-out infinite alternate; transform-origin: 55px 90px; }
.rocket-window-glow { animation: window-pulse 2.5s ease-in-out infinite; }
.rocket-star { animation: star-twinkle 2s ease-in-out infinite; }
@keyframes rocket-float { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-7px) rotate(2deg)} }
@keyframes flame-flicker { 0%{transform:scaleY(1) scaleX(1);opacity:1} 100%{transform:scaleY(1.25) scaleX(0.8);opacity:0.8} }
@keyframes window-pulse { 0%,100%{opacity:1} 50%{opacity:0.45} }
@keyframes star-twinkle { 0%,100%{opacity:0.3;transform:scale(1)} 50%{opacity:1;transform:scale(1.4)} }
.hi { font-size: clamp(4rem,12vw,7rem); font-weight: 700; letter-spacing: -0.05em; line-height: 1; margin-bottom: 0.75rem; background: linear-gradient(135deg,#FFD700 0%,#FF9500 50%,#FF6B00 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; opacity: 0; animation: fade-up 0.8s ease forwards 0.2s; }
.tagline { font-size: 0.85rem; color: var(--muted); letter-spacing: 0.02em; margin-bottom: 2rem; opacity: 0; animation: fade-up 0.8s ease forwards 0.6s; }
.contact-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1.5rem; border: 1px solid rgba(255,180,0,0.35); background: linear-gradient(135deg,rgba(255,180,0,0.07),rgba(255,100,0,0.07)); color: #FFD700; font-family: 'Geist Mono', monospace; font-size: 0.78rem; letter-spacing: 0.05em; text-decoration: none; border-radius: 3px; transition: all 0.2s ease; opacity: 0; animation: fade-up 0.8s ease forwards 0.8s; position: relative; overflow: hidden; }
.contact-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg,rgba(255,215,0,0.12),rgba(255,107,0,0.12)); opacity: 0; transition: opacity 0.2s; }
.contact-btn:hover::before { opacity: 1; }
.contact-btn:hover { border-color: rgba(255,180,0,0.65); box-shadow: 0 0 22px rgba(255,150,0,0.18); color: #FFE55C; }
.contact-btn svg { width: 14px; height: 14px; flex-shrink: 0; position: relative; }
.contact-btn span { position: relative; }
.grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.75rem; width: 100%; max-width: 520px; opacity: 0; animation: fade-up 0.8s ease forwards 1s; }
@media(max-width:400px){ .grid { grid-template-columns: repeat(2,1fr); max-width: 320px; } }
.card { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; padding: 1.1rem 0.75rem 0.9rem; border: 1px solid var(--border); background: var(--surface); border-radius: 4px; text-decoration: none; color: var(--text); transition: all 0.22s ease; position: relative; overflow: hidden; cursor: pointer; }
.card::before { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity 0.25s; }
.card:hover { transform: translateY(-3px); }
.card:hover::before { opacity: 1; }
.card-claw   { --cc: rgba(255,107,53,0.45); --cg: rgba(255,80,40,0.14); }
.card-plex   { --cc: rgba(229,160,13,0.55); --cg: rgba(229,160,13,0.16); }
.card-pizza  { --cc: rgba(230,120,30,0.45); --cg: rgba(220,100,20,0.14); }
.card-coffee { --cc: rgba(160,90,50,0.45);  --cg: rgba(150,80,40,0.14); }
.card-photos { --cc: rgba(0,180,216,0.45);  --cg: rgba(0,160,200,0.14); }
.card-cars   { --cc: rgba(180,180,180,0.4); --cg: rgba(160,160,160,0.1); }
.card-garden { --cc: rgba(80,200,100,0.45); --cg: rgba(60,180,80,0.14); }
.card-arcade { --cc: rgba(0,229,160,0.45); --cg: rgba(0,229,160,0.14); }
.card-shelf { --cc: rgba(196,164,90,0.5); --cg: rgba(196,164,90,0.15); }
.card-shelf::before { background: linear-gradient(135deg,rgba(196,164,90,0.09),rgba(150,120,60,0.09)); }
.card:hover { border-color: var(--cc); box-shadow: 0 8px 30px var(--cg); }
.card-claw::before   { background: linear-gradient(135deg,rgba(255,107,53,0.07),rgba(255,51,102,0.07)); }
.card-plex::before   { background: linear-gradient(135deg,rgba(229,160,13,0.09),rgba(180,110,0,0.09)); }
.card-pizza::before  { background: linear-gradient(135deg,rgba(230,120,30,0.08),rgba(200,60,10,0.08)); }
.card-coffee::before { background: linear-gradient(135deg,rgba(160,90,50,0.09),rgba(100,55,35,0.09)); }
.card-photos::before { background: linear-gradient(135deg,rgba(0,180,216,0.07),rgba(0,100,170,0.07)); }
.card-cars::before   { background: linear-gradient(135deg,rgba(190,190,190,0.05),rgba(120,120,120,0.05)); }
.card-garden::before { background: linear-gradient(135deg,rgba(80,200,100,0.07),rgba(40,160,60,0.07)); }
.card-arcade::before { background: linear-gradient(135deg,rgba(0,229,160,0.07),rgba(0,180,120,0.07)); }
.card-icon { width: 54px; height: 54px; flex-shrink: 0; }
.card-name { font-family: 'Geist Mono', monospace; font-size: 0.67rem; color: var(--muted); letter-spacing: 0.04em; }
.card-live { position: absolute; top: 0.5rem; right: 0.5rem; width: 5px; height: 5px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 6px #22c55e; animation: live-pulse 2s ease-in-out infinite; }
.card-soon { position: absolute; top: 0.42rem; right: 0.5rem; font-family: 'Geist Mono', monospace; font-size: 0.54rem; color: var(--muted); letter-spacing: 0.05em; opacity: 0.55; }
.card-off { position: absolute; top: 0.5rem; right: 0.5rem; width: 5px; height: 5px; border-radius: 50%; background: #64748b; }
@keyframes live-pulse { 0%,100%{opacity:1;box-shadow:0 0 6px #22c55e} 50%{opacity:0.35;box-shadow:0 0 2px #22c55e} }
footer { position: relative; z-index: 1; padding: 2rem; font-family: 'Geist Mono', monospace; font-size: 0.67rem; color: var(--muted); text-align: center; letter-spacing: 0.04em; opacity: 0; animation: fade-up 0.8s ease forwards 1.2s; }
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--text); }
@keyframes fade-up { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@media(max-width:480px){ .page{padding:3rem 1.25rem} .hi{font-size:clamp(3.5rem,15vw,5rem)} }
.card-flip { --cc: rgba(255,180,40,0.5); --cg: rgba(255,160,0,0.16); }
.card-flip::before { background: linear-gradient(135deg,rgba(255,180,0,0.09),rgba(200,120,0,0.09)); }