/* ==========================================================================
   VibeScript Landing — Global Styles (Light Theme)
   Updated: 2025-10-20
   ========================================================================== */

/* Base / Reset */
*:where(*, *::before, *::after){ box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  color: #111827;                 /* near-black body text */
  background: #ffffff;            /* white background */
  font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  line-height: 1.6;
}

/* Design Tokens */
:root{
  --text: #111827;
  --muted: #4b5563;

  --card: #ffffff;
  --line: #e5e7eb;                /* subtle gray border */
  --ring: rgba(99,102,241,.28);

  /* Chakra stops */
  --r:#ef4444; --o:#f97316; --y:#eab308; --g:#22c55e; --c:#06b6d4; --b:#3b82f6; --i:#6366f1; --p:#8b5cf6;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 10px 24px rgba(0,0,0,.08);
  --shadow-lg: 0 16px 38px rgba(0,0,0,.12);
}

/* Animated Chakra Text (headings) */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.chakra-text{
  background-image: linear-gradient(90deg, var(--r), var(--o), var(--y), var(--g), var(--c), var(--b), var(--i), var(--p));
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 20s ease infinite;    /* subtle speed */
}
@media (prefers-reduced-motion: reduce){
  .chakra-text{ animation: none; }
}

/* Layout */
.container{ max-width: 1080px; margin: 0 auto; padding: 16px; }
main{ display: grid; gap: 20px; }

/* Header */
header{
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,.9);
  border-bottom: 1px solid var(--line);
}
.nav{ display: flex; align-items: center; gap: 12px; }
.brand{ display: flex; align-items: center; gap: 10px; }
.logo{ width: 28px; height: 28px; border-radius: 7px; object-fit: cover; }
.brand-name{ font-weight: 900; letter-spacing: .2px; color: var(--text); }

/* Pill tag */
.pill{
  margin-left: auto;
  border: 1px solid var(--line);
  background: #ffffff;
  color: #111827;
  padding: 7px 12px;
  border-radius: 999px;
  font-weight: 800;
  box-shadow: var(--shadow-sm);
}

/* Typography */
h1,h2,h3,h4{ margin: 0 0 8px; line-height: 1.2; color: var(--text); }
h1{ font-size: clamp(28px, 8vw, 44px); letter-spacing: -.01em; }
h2{ font-size: clamp(22px, 5.5vw, 28px); }
h3{ font-size: clamp(18px, 4.8vw, 20px); }
p{ margin: 0 0 8px; }
.muted{ color: var(--muted); }

/* Links */
a{ color: #111827; text-decoration: none; }
a:hover{ text-decoration: underline; }

/* Hero container with faint energy texture */
.bg-banner{
  position: relative; overflow: hidden; border-radius: 18px;
  border: 1px solid var(--line); background: #ffffff;
  box-shadow: var(--shadow-md);
}
.bg-banner::before{
  content:""; position:absolute; inset:0; opacity:.10;
  background-image: url("/assets/images/vibescript-real-energy-waveform-banner.png");
  background-size: cover; background-position: center;
  filter: saturate(120%);
}
.hero{ display: grid; gap: 16px; padding-top: 22px; }
.headline{ margin: 0; }
.lead{ color: var(--muted); margin: 0; }

/* Cards */
.cards{ display: grid; gap: 12px; }
.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px; padding: 14px;
  box-shadow: var(--shadow-sm);
}
.card h3{ margin: 0 0 6px; }

/* Proof strip — responsive (fixes clipping) */
.proof{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.proof-item{
  display:flex; align-items:center; gap:12px;
  padding:14px; border-radius:14px;
  background:#ffffff;
  border:1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.proof-item:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: #d1d5db;
}
.proof-item img{ width:28px; height:28px; }

/* =========================== Buttons (CTA) =============================== */
/* Real button baseline */
button, .btn{
  -webkit-tap-highlight-color: transparent;
  font: inherit;
  border: 0;
  background: none;
  color: inherit;
}

/* Chakra button — animated gradient, glow, squish */
.btn-chakra{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 18px;
  min-height: 52px; min-width: 220px;          /* big tap target */
  border-radius: 14px;
  font-weight: 800; font-size: 1rem;
  color: #ffffff;
  cursor: pointer;
  background-image: linear-gradient(90deg, var(--r), var(--o), var(--y), var(--g), var(--c), var(--b), var(--i), var(--p));
  background-size: 200% 100%;
  animation: gradientShift 20s ease infinite;   /* subtle loop */
  box-shadow:
    0 10px 24px rgba(99,102,241,.25),
    0 2px 6px rgba(0,0,0,.05);
  transition: transform .08s ease, box-shadow .12s ease, background-position .6s ease;
}
.btn-chakra:hover{
  box-shadow:
    0 14px 30px rgba(99,102,241,.30),
    0 3px 8px rgba(0,0,0,.06);
  background-position: 100% 0;
  transform: translateY(-1px);
}
.btn-chakra:active{
  transform: scale(.97);                         /* squish */
}
.btn-chakra:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255,255,255,1),
    0 0 0 6px rgba(99,102,241,.35),
    0 14px 30px rgba(99,102,241,.30);
}

/* Ghost button (secondary) */
.btn-ghost{
  display: inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 12px 16px; min-height: 48px; min-width: 180px;
  border-radius: 12px; font-weight: 700;
  color: #111827; background: #ffffff; border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;
}
.btn-ghost:hover{ transform: translateY(-1px); box-shadow: var(--shadow-md); border-color:#d1d5db; }
.btn-ghost:active{ transform: scale(.98); }
.btn-ghost:focus-visible{ outline:none; box-shadow: 0 0 0 3px var(--ring), var(--shadow-md); }

/* Forms */
.input{
  width:100%;
  background:#ffffff; color:#111827;
  border:1px solid var(--line);
  border-radius:12px; padding:12px 14px; font-size:16px;
  outline:none;
}
.input:focus{ box-shadow: 0 0 0 3px var(--ring); }

/* Sections */
.faq{ display: grid; gap: 12px; }
.divider{ height: 1px; background: linear-gradient(90deg, transparent, #e5e7eb, transparent); }

/* Footer */
footer{ border-top: 1px solid var(--line); margin-top: 16px; }
.foot-grid{ display: grid; gap: 10px; }
.foot-brand{ display: flex; align-items: center; gap: 10px; }
.foot-links{ display: flex; gap: 16px; flex-wrap: wrap; }

/* Sticky CTA (mobile) */
.sticky-cta{
  position: fixed; z-index: 50; inset: auto 0 0 0;
  display: flex; align-items: center; justify-content: center;
  padding: 10px; gap: 10px; border-top: 1px solid var(--line);
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(6px);
}

/* Reveal on scroll */
.reveal{ opacity: 0; transform: translateY(8px); transition: opacity .48s ease, transform .48s ease; }
.reveal.is-in{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
  .reveal{ transition: none; }
  .btn-chakra{ animation: none; }
  html{ scroll-behavior: auto; }
}

/* Media Queries */
@media (min-width: 860px){
  .hero{ grid-template-columns: 1.2fr .8fr; align-items: center; }
  .cards{ grid-template-columns: 1fr 1fr; }
  .foot-grid{ grid-template-columns: auto 1fr; align-items: center; justify-content: space-between; }
}