/*
Theme Name: Velez Labs
Theme URI: https://velezlabs.com
Author: Michael Velez
Author URI: https://velezlabs.com
Description: Premium one-page funnel theme for Velez Labs — AI integration for small business (OK & TX). Includes scroll-driven motion, cursor-follow ambient light, and animated counters.
Version: 2.0
Requires at least: 5.9
Requires PHP: 7.4
Text Domain: velez-labs
*/

:root {
  --emerald: #00FFB3;
  --emerald-dim: rgba(0,255,179,0.14);
  --emerald-glow: rgba(0,255,179,0.35);
  --platinum: #1A1A1A;
  --platinum-deep: #121212;
  --platinum-raise: #202322;
  --gold: #D4AF37;
  --text: #F2F2F0;
  --text-dim: #9DA3A0;
  --line: rgba(242,242,240,0.1);
  --line-emerald: rgba(0,255,179,0.18);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--platinum);
  color: var(--text);
  font-family: 'Space Grotesk', sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; }
a { color: var(--emerald); }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 1.5rem; }
.wrap--narrow { max-width: 780px; }
section { padding: clamp(4rem, 9vh, 6.5rem) 0; position: relative; }

/* -------- Type -------- */
.eyebrow {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.25rem;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 2rem; height: 1px;
  background: var(--gold);
  vertical-align: middle;
  margin-right: 0.75rem;
  opacity: 0.7;
}
h1, h2, h3 {
  font-family: 'Rajdhani', sans-serif;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: 0.005em;
  margin: 0 0 1.25rem;
}
h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); font-weight: 700; max-width: 22ch; }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 600; }
.accent { color: var(--emerald); }
.lede { font-size: clamp(1.02rem, 1.5vw, 1.2rem); color: var(--text-dim); max-width: 58ch; }
.lede strong, p strong { color: var(--text); font-weight: 500; }

/* -------- Buttons (with magnetic + shimmer) -------- */
.btn {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95rem 2.1rem;
  display: inline-block;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 0;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out),
              border-color 0.15s ease, color 0.15s ease;
  will-change: transform;
}
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.btn--primary { background: var(--emerald); color: #0B0B0B; }
.btn--primary::before {
  content: ""; position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transition: left 0.7s var(--ease-out);
}
.btn--primary:hover { box-shadow: 0 10px 32px rgba(0,255,179,0.32); }
.btn--primary:hover::before { left: 100%; }
.btn--ghost { color: var(--text); border: 1px solid rgba(242,242,240,0.28); background: transparent; }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }

/* -------- Nav -------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(18,18,18,0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.nav.is-scrolled { background: rgba(18,18,18,0.92); border-color: var(--line-emerald); }
.nav__inner {
  max-width: 1080px; margin: 0 auto; padding: 0.8rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.nav__logo {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700; font-size: 1.15rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text); text-decoration: none;
}
.nav__logo span { color: var(--emerald); }
.nav__cta {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700; font-size: 0.85rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none;
  color: #0B0B0B; background: var(--emerald);
  padding: 0.55rem 1.2rem;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.nav__cta:hover { box-shadow: 0 6px 20px rgba(0,255,179,0.35); transform: translateY(-1px); }
.nav__phone {
  font-size: 0.9rem; color: var(--text-dim); text-decoration: none;
  margin-left: auto; margin-right: 1rem;
  transition: color 0.2s ease;
}
.nav__phone:hover { color: var(--gold); }
@media (max-width: 560px) { .nav__phone { display: none; } }

/* -------- Ambient cursor light (hero) -------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 70% -10%, rgba(0,255,179,0.07), transparent 60%),
    linear-gradient(180deg, var(--platinum-deep) 0%, var(--platinum) 100%);
  padding-top: clamp(4.5rem, 11vh, 7.5rem);
}
.hero__ambient {
  position: absolute;
  top: 0; left: 0;
  width: 500px; height: 500px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, var(--emerald-glow) 0%, transparent 60%);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.4s ease;
  mix-blend-mode: screen;
  filter: blur(40px);
  will-change: transform;
  z-index: 0;
}
.hero:hover .hero__ambient { opacity: 0.55; }
.hero .wrap { position: relative; z-index: 1; }
.hero h1 {
  font-weight: 700;
  font-size: clamp(2.5rem, 6.5vw, 4.6rem);
  max-width: 18ch;
  margin-bottom: 1.75rem;
}
.hero h1 .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out), filter 0.9s var(--ease-out);
}
.hero h1.is-in .word { opacity: 1; transform: none; filter: none; }
.hero h1.is-in .word:nth-child(1) { transition-delay: 0.05s; }
.hero h1.is-in .word:nth-child(2) { transition-delay: 0.15s; }
.hero h1.is-in .word:nth-child(3) { transition-delay: 0.25s; }
.hero h1.is-in .word:nth-child(4) { transition-delay: 0.35s; }
.hero h1.is-in .word:nth-child(5) { transition-delay: 0.45s; }
.hero h1.is-in .word:nth-child(6) { transition-delay: 0.55s; }
.hero h1.is-in .word:nth-child(7) { transition-delay: 0.65s; }
.hero__sub { margin-bottom: 2.25rem; }

/* -------- Integration rail -------- */
.rail { display: flex; align-items: center; flex-wrap: wrap; margin: 0 0 2.75rem; padding: 0; list-style: none; }
.rail__node {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600; font-size: 0.9rem; letter-spacing: 0.14em;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--line-emerald);
  color: var(--text-dim);
  white-space: nowrap;
  transition: color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease, transform 0.5s var(--ease-out);
}
.rail__node.is-lit {
  color: var(--emerald);
  border-color: var(--emerald);
  box-shadow: 0 0 24px rgba(0,255,179,0.28);
  transform: translateY(-2px);
}
.rail__wire { width: clamp(1.25rem, 3vw, 2.5rem); height: 1px; background: var(--line-emerald); position: relative; }
.rail__wire::after {
  content: ""; position: absolute; top: -1px; left: 0;
  width: 0; height: 3px; background: var(--emerald); border-radius: 2px; opacity: 0;
  box-shadow: 0 0 8px var(--emerald);
}
.rail__wire.is-lit::after { animation: pulse 0.5s var(--ease-out) forwards; }
@keyframes pulse { from { width: 0; opacity: 1; } to { width: 100%; opacity: 1; } }
@media (max-width: 560px) {
  .rail { row-gap: 0.6rem; }
  .rail__wire { display: none; }
  .rail__node { margin-right: 0.6rem; }
}

.hero__ctas { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 3rem; }
.hero__trust {
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
  font-size: 0.95rem; color: var(--text-dim); max-width: 62ch;
}
.hero__trust strong { color: var(--gold); font-weight: 500; }

/* -------- Cost of silence stats (animated counters) -------- */
.cost { background: var(--platinum-deep); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cost__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 2.5rem 0; }
.cost__stat { background: var(--platinum-deep); padding: 1.75rem 1.5rem; transition: background 0.4s ease; }
.cost__stat:hover { background: var(--platinum-raise); }
.cost__num {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700; font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  color: var(--emerald); line-height: 1;
  display: inline-block;
  font-variant-numeric: tabular-nums;
}
.cost__label { font-size: 0.92rem; color: var(--text-dim); margin-top: 0.5rem; }
@media (max-width: 680px) { .cost__stats { grid-template-columns: 1fr; } }

/* -------- Wall cards (hover glow) -------- */
.wall__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
.wall__card {
  border: 1px solid var(--line);
  background: var(--platinum-raise);
  padding: 1.75rem 1.5rem;
  position: relative;
  transition: transform 0.5s var(--ease-out), border-color 0.4s ease, box-shadow 0.4s ease;
}
.wall__card::before {
  content: "";
  position: absolute; inset: 0;
  border: 1px solid transparent;
  background: linear-gradient(135deg, transparent, rgba(0,255,179,0.35), transparent) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.wall__card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(0,255,179,0.2); }
.wall__card:hover::before { opacity: 1; }
.wall__card h3 { color: var(--text); margin-bottom: 0.6rem; }
.wall__card p { color: var(--text-dim); font-size: 0.97rem; margin: 0; }
.wall__pct {
  font-family: 'Rajdhani', sans-serif; font-weight: 700;
  color: var(--gold); font-size: 1.05rem; letter-spacing: 0.08em;
  display: block; margin-bottom: 0.75rem;
}
.wall__punch { margin-top: 2.25rem; font-size: clamp(1.1rem, 1.8vw, 1.3rem); color: var(--text); max-width: 52ch; }
@media (max-width: 760px) { .wall__grid { grid-template-columns: 1fr; } }

/* -------- Guide -------- */
.guide { background: var(--platinum-deep); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.guide__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: start; }
.guide__creds { border-left: 2px solid var(--emerald); padding-left: 1.5rem; display: grid; gap: 1.25rem; }
.guide__cred strong { display: block; font-family: 'Rajdhani', sans-serif; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.95rem; color: var(--emerald); }
.guide__cred span { color: var(--text-dim); font-size: 0.95rem; }
@media (max-width: 760px) { .guide__grid { grid-template-columns: 1fr; gap: 2rem; } }

/* -------- Plan steps -------- */
.plan__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.5rem; counter-reset: step; }
.plan__step {
  border: 1px solid var(--line);
  background: var(--platinum-raise);
  padding: 1.9rem 1.5rem;
  position: relative;
  transition: transform 0.5s var(--ease-out), border-color 0.4s ease;
}
.plan__step:hover { transform: translateY(-4px); border-color: var(--line-emerald); }
.plan__step::before {
  counter-increment: step;
  content: "0" counter(step);
  font-family: 'Rajdhani', sans-serif; font-weight: 700;
  font-size: 0.95rem; letter-spacing: 0.2em;
  color: var(--gold);
  display: block; margin-bottom: 1rem;
}
.plan__step h3 { margin-bottom: 0.6rem; }
.plan__step p { color: var(--text-dim); font-size: 0.97rem; margin: 0; }
.plan__step em { color: var(--emerald); font-style: normal; }
@media (max-width: 760px) { .plan__steps { grid-template-columns: 1fr; } }

/* -------- Systems -------- */
.systems { background: var(--platinum-deep); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.systems__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 2.5rem; }
.system {
  border: 1px solid var(--line);
  padding: 1.9rem 1.5rem;
  background: var(--platinum);
  transition: transform 0.5s var(--ease-out), border-color 0.3s ease, box-shadow 0.4s ease;
  position: relative;
  overflow: hidden;
}
.system::after {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--emerald), transparent);
  transform: translateX(-100%);
  transition: transform 0.7s var(--ease-out);
}
.system:hover { border-color: var(--line-emerald); transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(0,255,179,0.28); }
.system:hover::after { transform: translateX(100%); }
.system h3 { color: var(--emerald); margin-bottom: 0.6rem; }
.system p { color: var(--text-dim); font-size: 0.97rem; margin: 0 0 0.9rem; }
.system__for { font-size: 0.85rem; color: var(--gold); font-family: 'Rajdhani', sans-serif; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
@media (max-width: 760px) { .systems__grid { grid-template-columns: 1fr; } }

/* -------- FAQ -------- */
.faq__item {
  border: 1px solid var(--line);
  background: var(--platinum-raise);
  margin-bottom: 0.85rem;
  transition: border-color 0.3s ease;
}
.faq__item:hover { border-color: var(--line-emerald); }
.faq__item.is-open { border-color: var(--line-emerald); }
.faq__q {
  width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer;
  padding: 1.25rem 1.5rem;
  font-family: 'Rajdhani', sans-serif; font-weight: 600;
  font-size: 1.08rem; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--text);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq__q:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.faq__q::after { content: "+"; color: var(--emerald); font-size: 1.4rem; font-weight: 500; transition: transform 0.3s var(--ease-out); flex-shrink: 0; }
.faq__item.is-open .faq__q::after { transform: rotate(45deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease-out); }
.faq__a-inner { padding: 0 1.5rem 1.4rem; color: var(--text-dim); font-size: 0.98rem; }
.faq__a-inner strong { color: var(--text); }
.faq__a-inner em { color: var(--text-dim); font-style: italic; }

/* -------- Proof -------- */
.proof { background: var(--platinum-deep); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proof__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 2.5rem; }
.quote {
  border: 1px solid var(--line); padding: 1.9rem 1.5rem;
  background: var(--platinum);
  transition: transform 0.5s var(--ease-out), border-color 0.3s ease;
}
.quote:hover { transform: translateY(-3px); border-color: var(--line-emerald); }
.quote p { color: var(--text); font-size: 1rem; margin: 0 0 1rem; }
.quote cite { font-style: normal; color: var(--gold); font-family: 'Rajdhani', sans-serif; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.88rem; }
@media (max-width: 760px) { .proof__grid { grid-template-columns: 1fr; } }

/* -------- Offer box (animated glow border) -------- */
.offer__box {
  border: 1px solid var(--emerald);
  background: linear-gradient(180deg, rgba(0,255,179,0.05), transparent);
  padding: clamp(2rem, 4vw, 3rem);
  margin-top: 2.5rem;
  position: relative;
  overflow: hidden;
}
.offer__box::before {
  content: "";
  position: absolute; top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: conic-gradient(from 0deg, transparent 0%, rgba(0,255,179,0.15) 25%, transparent 50%);
  animation: rotate-glow 12s linear infinite;
  z-index: 0;
}
.offer__box > * { position: relative; z-index: 1; }
@keyframes rotate-glow { to { transform: rotate(360deg); } }
.offer__box ul { margin: 1.25rem 0 1.75rem; padding-left: 1.2rem; color: var(--text-dim); }
.offer__box li { margin-bottom: 0.5rem; }
.offer__box li strong { color: var(--text); }
.offer__tag {
  font-family: 'Rajdhani', sans-serif; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase; font-size: 0.85rem;
  color: #0B0B0B; background: var(--gold);
  display: inline-block; padding: 0.35rem 0.9rem; margin-bottom: 1.25rem;
}

/* -------- Call steps -------- */
.call__steps { margin: 2rem 0 2.5rem; padding: 0; list-style: none; display: grid; gap: 1rem; max-width: 620px; }
.call__steps li { display: flex; gap: 1rem; align-items: baseline; color: var(--text-dim); }
.call__steps li::before { content: "→"; color: var(--emerald); font-weight: 700; }
.call__steps li strong { color: var(--text); }

/* -------- Footer -------- */
footer { border-top: 1px solid var(--line); padding: 2.5rem 0 3rem; background: var(--platinum-deep); }
.footer__inner { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; align-items: center; color: var(--text-dim); font-size: 0.9rem; }
.footer__inner a { color: var(--text-dim); text-decoration: none; transition: color 0.2s ease; }
.footer__inner a:hover { color: var(--emerald); }

/* -------- Scroll reveal + parallax -------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal--fade { transform: none; }

/* Scroll progress bar */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--emerald), var(--gold));
  width: 0%;
  z-index: 100;
  transition: width 0.1s linear;
  box-shadow: 0 0 8px var(--emerald);
}

/* -------- Reduced motion -------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .rail__wire.is-lit::after { animation: none; width: 100%; opacity: 1; }
  .btn--primary:hover, .wall__card:hover, .plan__step:hover, .system:hover, .quote:hover { transform: none; }
  .faq__a { transition: none; }
  .offer__box::before { animation: none; }
  .hero h1 .word { opacity: 1; transform: none; filter: none; transition: none; }
  .hero__ambient { display: none; }
  .system::after { display: none; }
}