/* Base */
:root { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji"; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body { color: #0f172a; background: #fff; overflow-x: hidden; }

/* Utilities */
.section { width: 100%; display: flex; align-items: center; justify-content: center; }
.section.full { min-height: 100vh; }
.bg-cover { background-image: var(--bg); background-size: cover; background-position: var(--bg-pos, center); background-repeat: no-repeat; background-attachment: fixed; }
.gradient-hero { background: linear-gradient(180deg,#071327 0%,#0D2244 100%); }

/* Images */
.img-fixed { position: fixed; z-index: 50; pointer-events: none; user-select: none; width: 25vw; max-width: 480px; min-width: 180px; right: 6vw; top: 50%; transform: translate3d(0, -50%, 0); }
.hero-logo { max-width: 80vw; max-height: 80vh; width: auto; height: auto; display: block; }
.cover { max-width: 80vw; max-height: 80vh; width: auto; height: auto; display: block; border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }

/* Card */
.card { background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.35); padding: 24px; width: min(90vw, 640px); }
.card-title { margin: 0 0 12px; text-align: center; font-size: clamp(20px, 3.5vw, 28px); font-weight: 600; color: #171717; }
.grid-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pill { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 16px; text-decoration: none; color: #111827; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; transition: .2s ease; }
.pill:hover { background: #f8fafc; border-color: #d1d5db; }

/* Footer */
.footer { width: 100%; background-image: var(--bg); background-size: cover; background-position: center; background-repeat: no-repeat; }
.footer .social { height: clamp(40vh, 45vh, 50vh); width: 100%; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; gap: 32px; }
.footer .social a { color: #fff; text-decoration: none; transition: color .2s ease; }
.footer .social a:hover { color: #60a5fa; }

/* Repeating background section (guitar field) */
.section[style*='--repeat'] { background-image: var(--bg); background-repeat: var(--repeat); background-size: var(--bg-size); background-position: var(--bg-pos, center); }

/* Extra floating guitars */
.guitar-float { position: fixed; z-index: 40; pointer-events: none; user-select: none; will-change: transform; opacity: var(--op, .6); width: var(--w, 18vw); }