/* ============================================
   SOLAR PUNCH STUDIO — style.css
   ============================================ */

:root {
  --black:     #0a0a0a;
  --off-black: #111111;
  --dark:      #1a1a1a;
  --mid:       #2a2a2a;
  --border:    #333333;
  --muted:     #666666;
  --light:     #aaaaaa;
  --white:     #f5f0e8;
  --cream:     #ede8da;

  --sun:       #f5a623;
  --punch:     #e8351a;
  --gold:      #c9a84c;
  --magenta:   #d6206e;
  --magenta-lt:#ff4d9d;
  --glow:      rgba(245, 166, 35, 0.15);
  --grad-head: linear-gradient(95deg, #f5a623 0%, #e8351a 52%, #d6206e 100%);

  --font-display: 'Archivo Black', sans-serif;
  --font-mono:    'Space Mono', monospace;
  --font-body:    'DM Sans', sans-serif;

  --nav-h: 96px;
  --max-w: 1200px;
  --radius: 4px;
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ── BRAND GRADIENT HEADINGS (sun → punch → magenta, echoes the logo) ── */
.section-title,
.page-hero h1,
.cta-banner h2,
.portfolio-header h1,
.custom-head h2,
.faq-section h2,
.about-intro-text h2 {
  background: var(--grad-head);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

/* ── NAV ── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px;
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}
.nav-logo {
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: 0.04em;
}
.logo-solar { color: var(--sun); }
.logo-punch { color: var(--white); }
.nav-logo img { height: 66px; width: auto; display: block; }

.nav-links {
  display: flex; align-items: center; gap: 32px;
}
.nav-links a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--light);
  transition: color var(--transition);
}
.nav-links a:hover,
.nav-links a.active { color: var(--sun); }

.nav-cta {
  padding: 8px 20px;
  border: 1px solid var(--sun) !important;
  color: var(--sun) !important;
  transition: background var(--transition), color var(--transition) !important;
}
.nav-cta:hover {
  background: var(--sun) !important;
  color: var(--black) !important;
}

/* EN / ES language toggle */
.nav-lang {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}
.nav-lang a { color: var(--light); transition: color var(--transition); }
.nav-lang a:hover { color: var(--sun); }
.nav-lang .lang-on { color: var(--sun); }
.nav-lang .lang-sep { color: var(--muted); }

.nav-toggle { display: none; flex-direction: column; gap: 5px; }
.nav-toggle span {
  display: block; width: 24px; height: 2px;
  background: var(--white);
  transition: transform var(--transition), opacity var(--transition);
}

/* ── HERO ── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center;
  padding: calc(var(--nav-h) + 60px) 40px 80px;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 70% 55% at 50% 105%, rgba(232,53,26,0.12) 0%, transparent 70%),
              var(--black);
}
/* Soft pulsing glow centered directly behind the hero logo */
.hero-glow {
  position: absolute; top: 44%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(64vw, 620px); aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,166,35,0.22) 0%, rgba(214,32,110,0.13) 48%, transparent 72%);
  z-index: 0; pointer-events: none;
  animation: glow-pulse 6s ease-in-out infinite;
}
@keyframes glow-pulse {
  0%, 100% { opacity: 0.78; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.06); }
}
.sun-circle {
  position: absolute;
  right: 5%; top: 50%; transform: translateY(-50%);
  width: min(45vw, 520px); height: min(45vw, 520px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,166,35,0.18) 0%, rgba(245,166,35,0.06) 40%, transparent 70%);
  border: 1px solid rgba(245,166,35,0.12);
  animation: pulse-sun 6s ease-in-out infinite;
}
.sun-rays {
  position: absolute;
  right: 5%; top: 50%; transform: translateY(-50%);
  width: min(45vw, 520px); height: min(45vw, 520px);
  border-radius: 50%;
  background: conic-gradient(
    transparent 0deg, rgba(245,166,35,0.04) 10deg, transparent 20deg,
    transparent 40deg, rgba(245,166,35,0.04) 50deg, transparent 60deg,
    transparent 80deg, rgba(245,166,35,0.04) 90deg, transparent 100deg,
    transparent 120deg, rgba(245,166,35,0.04) 130deg, transparent 140deg,
    transparent 160deg, rgba(245,166,35,0.04) 170deg, transparent 180deg,
    transparent 200deg, rgba(245,166,35,0.04) 210deg, transparent 220deg,
    transparent 240deg, rgba(245,166,35,0.04) 250deg, transparent 260deg,
    transparent 280deg, rgba(245,166,35,0.04) 290deg, transparent 300deg,
    transparent 320deg, rgba(245,166,35,0.04) 330deg, transparent 340deg,
    transparent 360deg
  );
  animation: spin-rays 40s linear infinite;
}
.grain {
  position: absolute; inset: 0; z-index: 1; opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px;
  pointer-events: none;
}

.hero-content {
  position: relative; z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sun);
  margin-bottom: 16px;
  animation: fade-up 0.8s 0.1s both;
}
.hero-title {
  font-family: var(--font-display);
  line-height: 0.9;
  margin-bottom: 24px;
}
.hero-logo { margin-bottom: 28px; }
.hero-logo img {
  width: min(540px, 86vw);
  height: auto;
  margin: 0 auto;
  animation: fade-up 0.8s 0.2s both;
  filter: drop-shadow(0 12px 44px rgba(245,166,35,0.14));
}
.hero-line-1 {
  display: block;
  font-size: clamp(5rem, 14vw, 11rem);
  color: var(--sun);
  animation: fade-up 0.8s 0.2s both;
}
.hero-line-2 {
  display: block;
  font-size: clamp(5rem, 14vw, 11rem);
  color: var(--white);
  animation: fade-up 0.8s 0.3s both;
}
.hero-line-3 {
  display: block;
  font-size: clamp(2rem, 5.5vw, 4.5rem);
  color: var(--muted);
  letter-spacing: 0.35em;
  animation: fade-up 0.8s 0.4s both;
}
.hero-tagline {
  font-family: var(--font-body);
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  font-weight: 500;
  color: var(--white);
  line-height: 1.25;
  margin-bottom: 14px;
  animation: fade-up 0.8s 0.4s both;
}
.hero-tagline b { color: var(--sun); font-weight: 500; }
.hero-sub {
  font-size: 1.05rem;
  color: var(--light);
  max-width: 620px;
  margin: 0 auto 36px;
  font-weight: 300;
  animation: fade-up 0.8s 0.5s both;
}
.hero-actions {
  display: flex; gap: 16px; flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 36px;
  animation: fade-up 0.8s 0.6s both;
}
.hero-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  animation: fade-up 0.8s 0.7s both;
}
.hero-tags span {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border: 1px solid var(--border);
  color: var(--muted);
}

.hero-scroll {
  position: absolute; bottom: 40px; left: 40px; z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  color: var(--muted);
  writing-mode: vertical-rl;
  animation: fade-in 1s 1s both;
}
.hero-scroll::after {
  content: '';
  display: block;
  width: 1px; height: 48px;
  background: var(--border);
  margin: 12px auto 0;
}

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 14px 32px;
  transition: all var(--transition);
  white-space: nowrap;
}
.btn-primary {
  background: var(--sun);
  color: var(--black);
}
.btn-primary:hover {
  background: #f0b544;
  transform: translateY(-1px);
}
.btn-ghost {
  border: 1px solid var(--border);
  color: var(--white);
}
.btn-ghost:hover {
  border-color: var(--sun);
  color: var(--sun);
}
.btn-outline {
  border: 1px solid var(--sun);
  color: var(--sun);
}
.btn-outline:hover {
  background: var(--sun);
  color: var(--black);
}

/* ── BADGES ── */
.badges {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 0;
  background: var(--off-black);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 20px 40px;
  overflow: hidden;
}
.badge-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 24px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--light);
}
.badge-icon { color: var(--sun); font-size: 0.9rem; }
.badge-divider { color: var(--border); padding: 0 8px; }

/* ── SECTIONS ── */
.section {
  padding: 100px 40px;
  max-width: var(--max-w);
  margin: 0 auto;
}
.section-header { text-align: center; margin-bottom: 64px; }
.section-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sun);
  margin-bottom: 12px;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.05;
  margin-bottom: 16px;
}
.section-sub {
  color: var(--light);
  font-weight: 300;
  font-size: 1rem;
}
.section-cta { text-align: center; margin-top: 48px; }

/* Full-width tonal band for section rhythm */
.band-soft { background: var(--off-black); }
.band-glow { background: radial-gradient(ellipse 70% 80% at 50% 45%, rgba(214,32,110,0.06) 0%, transparent 70%); }

/* ── SERVICES GRID ── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.service-card {
  background: var(--off-black);
  padding: 40px 32px;
  display: flex; flex-direction: column; gap: 12px;
  transition: background var(--transition);
  position: relative;
}
.service-card:hover { background: var(--dark); }
.service-card.featured {
  background: var(--dark);
  border: 1px solid rgba(214,32,110,0.45);
  margin: -1px;
  z-index: 1;
}
.service-card.featured::before {
  content: 'Popular';
  position: absolute; top: 16px; right: 16px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--magenta-lt);
  border: 1px solid var(--magenta-lt);
  padding: 3px 8px;
}
.service-num {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--muted);
  letter-spacing: 0.1em;
}
.service-card h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  color: var(--white);
}
.service-card p {
  font-size: 0.9rem;
  color: var(--light);
  line-height: 1.6;
  flex: 1;
}
.service-price {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--sun);
  letter-spacing: 0.02em;
}
.service-link {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color var(--transition);
}
.service-link:hover { color: var(--sun); }

/* ── ABOUT STRIP ── */
.about-strip {
  background: var(--off-black);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 100px 40px;
}
.about-strip-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.about-strip-text { display: flex; flex-direction: column; gap: 24px; }
.about-strip-text h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.1;
}
.about-strip-text p {
  color: var(--light);
  font-weight: 300;
  line-height: 1.7;
}
.about-stats {
  display: flex; gap: 40px;
  padding: 24px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat-num {
  font-family: var(--font-display);
  font-size: 2.5rem;
  color: var(--sun);
  line-height: 1;
}
.stat-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* VINYL */
.about-strip-visual {
  display: flex; align-items: center; justify-content: center;
}
.vinyl-wrap {
  position: relative;
  width: 320px; height: 320px;
}
.vinyl {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at center, #1a1a1a 0%, #0d0d0d 30%, #1a1a1a 31%, #111 35%, #1a1a1a 36%, #111 55%, #1a1a1a 56%, #0d0d0d 100%);
  box-shadow: 0 0 60px rgba(245,166,35,0.1), inset 0 0 40px rgba(0,0,0,0.5);
  animation: spin-vinyl 8s linear infinite;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--border);
}
.vinyl-label {
  width: 110px; height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--sun) 0%, #c8841a 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--black);
  letter-spacing: 0.06em;
  line-height: 1.1;
  box-shadow: 0 0 20px rgba(245,166,35,0.3);
  animation: counter-spin 8s linear infinite;
}
.vinyl-label span { display: block; text-align: center; }

/* ── TRUSTED BY (home) ── */
.trusted {
  background: transparent;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 100px 40px;
}
.trusted-inner { max-width: var(--max-w); margin: 0 auto; text-align: center; }
.trusted-inner > .section-title { margin-bottom: 12px; }
.trusted-lead { color: var(--light); font-weight: 300; font-size: 1.05rem; }
.trusted-cols {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 48px; margin-top: 56px;
}
.trusted-col h3 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--sun);
  letter-spacing: 0.02em;
  margin-bottom: 12px;
}
.trusted-col p { color: var(--light); font-weight: 300; line-height: 1.6; font-size: 0.95rem; }
@media (max-width: 800px) {
  .trusted { padding: 72px 24px; }
  .trusted-cols { grid-template-columns: 1fr; gap: 36px; }
}

/* ── PORTFOLIO GRID ── */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}
.portfolio-card {
  border: 1px solid var(--border);
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition);
}
.portfolio-card:hover {
  border-color: var(--sun);
  transform: translateY(-4px);
}
.portfolio-art {
  height: 200px;
  display: flex; align-items: flex-end; padding: 16px;
}
.portfolio-art span {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  background: rgba(0,0,0,0.4);
  padding: 4px 8px;
}
.portfolio-info { padding: 20px 24px; }
.portfolio-info h4 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  margin-bottom: 6px;
}
.portfolio-info p {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* ── CTA BANNER ── */
.cta-banner {
  background: linear-gradient(135deg, rgba(245,166,35,0.1) 0%, rgba(232,53,26,0.06) 100%);
  border-top: 1px solid rgba(245,166,35,0.2);
  border-bottom: 1px solid rgba(245,166,35,0.2);
  padding: 100px 40px;
  text-align: center;
}
.cta-banner-inner { max-width: 600px; margin: 0 auto; }
.cta-banner h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.9rem);
  line-height: 1.08;
  margin-bottom: 16px;
}
.cta-banner p { color: var(--light); margin-bottom: 36px; }
.cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ── FOOTER ── */
.footer {
  background: var(--off-black);
  border-top: 1px solid var(--border);
  padding: 80px 40px 0;
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 64px;
  padding-bottom: 64px;
}
.footer-brand .logo-solar { font-family: var(--font-display); font-size: 1.4rem; color: var(--sun); }
.footer-brand .logo-punch { font-family: var(--font-display); font-size: 1.4rem; }
.footer-brand p {
  margin-top: 16px;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.6;
}
.footer-social {
  display: flex; gap: 16px; margin-top: 20px; flex-wrap: wrap;
}
.footer-social a {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color var(--transition);
}
.footer-social a:hover { color: var(--sun); }

.footer-col h5 {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sun);
  margin-bottom: 20px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a, .footer-col li {
  font-size: 0.85rem;
  color: var(--muted);
  transition: color var(--transition);
}
.footer-col a:hover { color: var(--white); }

.footer-bottom {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 24px 0;
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
}
.footer-bottom p {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.footer-bottom-links {
  display: flex; gap: 24px;
}
.footer-bottom-links a {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color var(--transition);
}
.footer-bottom-links a:hover { color: var(--sun); }

/* ── WHATSAPP FLOAT ── */
.wa-float {
  position: fixed; bottom: 32px; right: 32px; z-index: 99;
  width: 52px; height: 52px;
  background: #25D366;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.35);
  transition: transform var(--transition), box-shadow var(--transition);
}
.wa-float:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 28px rgba(37, 211, 102, 0.5);
}
.wa-float svg { width: 26px; height: 26px; }

/* ── PAGE HERO (inner pages) ── */
.page-hero {
  padding: calc(var(--nav-h) + 60px) 40px 60px;
  max-width: var(--max-w);
  margin: 0 auto;
  border-bottom: 1px solid var(--border);
}
.page-hero .section-label { margin-bottom: 12px; }
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  line-height: 1;
  margin-bottom: 20px;
}
.page-hero p {
  color: var(--light);
  font-size: 1.05rem;
  font-weight: 300;
  max-width: 560px;
}

/* ── CONTACT FORM ── */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.form-group {
  display: flex; flex-direction: column; gap: 8px;
}
.form-group.full { grid-column: 1 / -1; }
.form-group label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.form-group input,
.form-group select,
.form-group textarea {
  background: var(--dark);
  border: 1px solid var(--border);
  color: var(--white);
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  outline: none;
  transition: border-color var(--transition);
  border-radius: var(--radius);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--sun);
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-group select option { background: var(--dark); }

/* ── ANIMATIONS ── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pulse-sun {
  0%, 100% { transform: translateY(-50%) scale(1); opacity: 1; }
  50%       { transform: translateY(-50%) scale(1.04); opacity: 0.8; }
}
@keyframes spin-rays {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}
@keyframes spin-vinyl {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes counter-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  :root { --nav-h: 80px; }
  .nav { padding: 0 24px; }
  .nav-logo img { height: 54px; }
  .nav-links {
    display: none;
    position: fixed; inset: 0; top: var(--nav-h);
    background: var(--off-black);
    flex-direction: column; align-items: center; justify-content: center;
    gap: 32px;
    border-top: 1px solid var(--border);
  }
  .nav-links.open { display: flex; }
  .nav-links a { font-size: 0.9rem; }
  .nav-toggle { display: flex; }

  .hero { padding: calc(var(--nav-h) + 40px) 24px 60px; }
  .hero-scroll { display: none; }

  .badges { padding: 16px 24px; gap: 4px; }
  .badge-divider { display: none; }

  .section { padding: 72px 24px; }

  .about-strip { padding: 72px 24px; }
  .about-strip-inner { grid-template-columns: 1fr; gap: 48px; }
  .vinyl-wrap { width: 240px; height: 240px; }

  .footer-inner { grid-template-columns: 1fr 1fr; gap: 40px; }

  .form-grid { grid-template-columns: 1fr; }
  .form-group.full { grid-column: 1; }
}

@media (max-width: 600px) {
  .hero-line-1, .hero-line-2 { font-size: clamp(4rem, 20vw, 6rem); }
  .footer-inner { grid-template-columns: 1fr; }
  .cta-actions { flex-direction: column; align-items: center; }
  .hero-actions { flex-direction: column; }
  .about-strip-visual { display: none; }
}