/* Vector Vision - site styles */
@import url("colors_and_type.css");

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--sv-emerald-ink); color: var(--sv-fg-1); font-family: 'Oxanium', sans-serif; -webkit-font-smoothing: antialiased; }
body { overflow-x: hidden; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* Subtle pitch-grid backdrop */
.pitch-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.35;
  background-image:
    linear-gradient(rgba(163,230,53,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(163,230,53,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 80%);
}

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 700ms cubic-bezier(0.16,1,0.3,1), transform 700ms cubic-bezier(0.16,1,0.3,1); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* Marquee for sport ticker */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { display: flex; gap: 48px; animation: marquee 40s linear infinite; width: max-content; }

/* Pulse dot */
@keyframes pulseDot { 0%,100% { box-shadow: 0 0 0 0 rgba(163,230,53,0.7); } 50% { box-shadow: 0 0 0 10px rgba(163,230,53,0); } }
.pulse-dot { animation: pulseDot 1.6s ease-out infinite; }

/* Skeleton point pulse */
@keyframes pointFlicker { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
.pose-point { animation: pointFlicker 2.4s ease-in-out infinite; }

/* Frame sweep */
@keyframes sweep { 0% { transform: translateX(-100%);} 100% { transform: translateX(100%);} }
.scan-line { position: absolute; left:0; top:0; width: 30%; height: 100%; background: linear-gradient(90deg, transparent, rgba(163,230,53,0.18), transparent); animation: sweep 3.6s ease-in-out infinite; }

/* Buttons */
.btn-primary {
  height: 52px; padding: 0 28px; border: 0; border-radius: 10px;
  background: linear-gradient(135deg, #a3e635 0%, #84cc16 100%);
  color: #00110e; font-weight: 700; font-size: 15px; letter-spacing: 0.01em;
  cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
  box-shadow: 0 8px 24px rgba(163,230,53,0.25), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform 150ms var(--sv-ease-out), box-shadow 150ms var(--sv-ease-out);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(163,230,53,0.35), inset 0 1px 0 rgba(255,255,255,0.25); }
.btn-primary:active { transform: scale(0.98); }

.btn-outline {
  height: 52px; padding: 0 24px; border: 1px solid rgba(163,230,53,0.35);
  border-radius: 10px; background: transparent; color: #eaf7f1; font-weight: 600; font-size: 14px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
  transition: all 150ms var(--sv-ease-out);
}
.btn-outline:hover { background: rgba(163,230,53,0.06); border-color: rgba(163,230,53,0.6); }

.btn-ghost {
  height: 40px; padding: 0 16px; border: 0; background: transparent;
  color: #eaf7f1; font-weight: 500; font-size: 14px; cursor: pointer;
  border-radius: 8px;
  transition: all 150ms var(--sv-ease-out);
}
.btn-ghost:hover { background: rgba(163,230,53,0.08); color: #a3e635; }

/* Card */
.vv-card {
  background: linear-gradient(135deg, #001612 0%, #0f3430 100%);
  border: 1px solid rgba(163,230,53,0.18);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), inset 0 1px 0 rgba(163,230,53,0.08);
  transition: transform 300ms var(--sv-ease-out), box-shadow 300ms var(--sv-ease-out), border-color 300ms var(--sv-ease-out);
}
.vv-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(0,0,0,0.5), inset 0 1px 0 rgba(163,230,53,0.15); border-color: rgba(163,230,53,0.32); }

/* Eyebrow */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: #a3e635;
}
.eyebrow::before { content: ''; width: 24px; height: 1px; background: #a3e635; }

.eyebrow-plain {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #a3e635;
}

/* Section */
.section { position: relative; padding: 120px 32px; }
.section-inner { max-width: 1240px; margin: 0 auto; position: relative; z-index: 1; }

/* Diagonal bars */
.diag-bars { position: absolute; display: flex; gap: 8px; pointer-events: none; }
.diag-bar { width: 40px; height: 12px; background: linear-gradient(-45deg, #a3e635, #84cc16); transform: rotate(-45deg); box-shadow: 0 0 10px rgba(163,230,53,0.6); }

/* Headline gradient */
.lime-grad {
  background: linear-gradient(135deg, #a3e635 0%, #84cc16 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* Tag chip */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 9999px;
  background: rgba(163,230,53,0.07); border: 1px solid rgba(163,230,53,0.22);
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #a3e635;
}

/* Phone frame */
.phone {
  width: 280px; aspect-ratio: 9 / 19.5; border-radius: 38px;
  background: #050b09; border: 8px solid #0a1614;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), inset 0 1px 0 rgba(163,230,53,0.1);
  position: relative; overflow: hidden;
}
.phone::after { content:''; position:absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 90px; height: 22px; border-radius: 999px; background: #000; z-index: 5; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #00110e; }
::-webkit-scrollbar-thumb { background: rgba(163,230,53,0.2); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(163,230,53,0.4); }

/* Custom cursor dot */
.cursor-dot { position: fixed; pointer-events: none; width: 8px; height: 8px; border-radius: 50%; background: #a3e635; box-shadow: 0 0 16px rgba(163,230,53,0.7); z-index: 9999; transition: transform 60ms ease-out, opacity 200ms; mix-blend-mode: screen; opacity: 0; }
.cursor-ring { position: fixed; pointer-events: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(163,230,53,0.5); z-index: 9998; transition: transform 220ms cubic-bezier(0.16,1,0.3,1), opacity 200ms, width 200ms, height 200ms; opacity: 0; }

/* Nav */
.nav {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 100; padding: 10px 14px; border-radius: 999px;
  background: rgba(0,17,14,0.65); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(163,230,53,0.18);
  display: flex; align-items: center; gap: 6px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.nav a.nav-link { font-size: 13px; font-weight: 500; color: #cbd5cf; padding: 8px 14px; border-radius: 999px; transition: all 150ms; }
.nav a.nav-link:hover { background: rgba(163,230,53,0.08); color: #a3e635; }

/* FAQ */
.faq-item { border-bottom: 1px solid rgba(163,230,53,0.12); }
.faq-q { display: flex; justify-content: space-between; align-items: center; padding: 24px 0; cursor: pointer; gap: 16px; }
.faq-q:hover .faq-title { color: #a3e635; }
.faq-title { font-size: 19px; font-weight: 600; color: #eaf7f1; transition: color 150ms; }
.faq-toggle { width: 36px; height: 36px; border-radius: 999px; border: 1px solid rgba(163,230,53,0.3); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition: all 200ms; color: #a3e635; }
.faq-item.open .faq-toggle { background: #a3e635; color: #00110e; transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 350ms cubic-bezier(0.16,1,0.3,1); color: #cbd5cf; line-height: 1.65; font-size: 15px; }
.faq-item.open .faq-a { max-height: 280px; padding-bottom: 24px; }

/* Sport pill */
.sport-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px; border-radius: 9999px;
  background: rgba(163,230,53,0.05); border: 1px solid rgba(163,230,53,0.2);
  font-size: 14px; font-weight: 600; color: #eaf7f1;
  transition: all 250ms var(--sv-ease-out);
  cursor: pointer;
}
.sport-pill:hover { background: rgba(163,230,53,0.1); border-color: rgba(163,230,53,0.4); transform: translateY(-2px); }
.sport-pill.active { background: linear-gradient(135deg, #a3e635, #84cc16); color: #00110e; border-color: transparent; }

/* For phase pill on phone screen */
.phase-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 10px; background: rgba(163,230,53,0.05); margin-bottom: 8px; }

/* ===== RESPONSIVE ===== */

/* Tablet */
@media (max-width: 880px) {
  .section { padding: 80px 20px; }
  .nav { display: none; }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Mobile */
@media (max-width: 640px) {
  /* Nav */
  .nav-desktop-links { display: none !important; }
  .nav-mobile-controls { display: flex !important; }
  .main-nav-bar { padding: 12px 20px !important; }

  /* Hero */
  .hero-grid { grid-template-columns: 1fr !important; gap: 0 !important; padding-top: 100px !important; }
  .hero-right-panel { display: none !important; }

  /* Section spacing */
  .section { padding: 60px 20px !important; }

  /* Testimonials - 1 col */
  .testimonials-grid { grid-template-columns: 1fr !important; }

  /* Typography */
  h1 { font-size: clamp(2.4rem, 10vw, 3.5rem) !important; }
  h2 { font-size: clamp(1.8rem, 7vw, 2.8rem) !important; }

  /* Buttons */
  .btn-primary { font-size: 14px !important; padding: 0 20px !important; }
  .btn-outline { font-size: 13px !important; padding: 0 16px !important; }

  /* FAQ title */
  .faq-title { font-size: 16px !important; }

  /* Phone frame hidden on very small screens */
  .phone { width: 220px !important; }

  /* Sport pills wrap */
  .sport-pill { padding: 8px 14px !important; font-size: 13px !important; }

  /* Marquee slow down a bit */
  .marquee-track { animation-duration: 28s !important; }

  /* Waitlist form stack on mobile */
  form[style] { flex-direction: column !important; }
}