/* ============================================================
   VIBEFIRE — Base + Components
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  word-break: keep-all;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: rgba(255,69,0,.32); color: #fff; }

ul { list-style: none; padding: 0; }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #26282f; border-radius: 99px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #34373f; }

/* ============================================================
   Typography helpers
   ============================================================ */
.display { font-family: var(--font-display); line-height: var(--lh-tight); letter-spacing: -.01em; color: var(--text); font-weight: 400; }
.font-display { font-family: var(--font-display); font-weight: 400; }
.font-mono { font-family: var(--font-mono); }

h1,h2,h3,h4 { color: var(--text); line-height: var(--lh-snug); font-weight: 700; letter-spacing: -.01em; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fire-300);
  font-weight: 500;
}

.fire-text {
  background: var(--fire-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.muted { color: var(--muted); }
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }

/* ============================================================
   Layout
   ============================================================ */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); }
.wrap-wide { max-width: var(--maxw-wide); }
.wrap-text { max-width: var(--maxw-text); }
.section { padding-block: clamp(64px, 9vw, 128px); position: relative; }
.section-sm { padding-block: clamp(48px, 6vw, 80px); }

.stack > * + * { margin-top: var(--s-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.grid { display: grid; gap: var(--s-5); }

.divider { height: 1px; background: var(--line); border: 0; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  --bh: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--bh); padding-inline: 26px;
  border-radius: var(--r-pill);
  font-weight: 700; font-size: 16px; letter-spacing: -.01em;
  white-space: nowrap;
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), opacity var(--dur-1);
  user-select: none;
}
.btn:active { transform: translateY(1px) scale(.99); }

.btn-fire {
  background: var(--fire-grad);
  color: var(--on-fire);
  box-shadow: var(--glow-fire);
}
.btn-fire:hover { box-shadow: var(--glow-fire-strong); transform: translateY(-1px); }

.btn-ghost {
  background: rgba(255,255,255,.04);
  color: var(--text);
  border: 1px solid var(--line-2);
}
.btn-ghost:hover { background: rgba(255,255,255,.08); border-color: var(--line-fire); }

.btn-outline-fire {
  background: transparent; color: var(--fire-300);
  border: 1px solid var(--line-fire);
}
.btn-outline-fire:hover { background: rgba(255,69,0,.10); border-color: var(--fire); color: var(--fire-300); }

.btn-quiet { background: transparent; color: var(--muted); padding-inline: 14px; }
.btn-quiet:hover { color: var(--text); }

.btn-lg { --bh: 60px; padding-inline: 34px; font-size: 17px; }
.btn-sm { --bh: 42px; padding-inline: 18px; font-size: 14px; }
.btn-block { width: 100%; }

.btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; box-shadow: none; }
.btn.is-loading { color: transparent !important; position: relative; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(0,0,0,.3); border-top-color: rgba(0,0,0,.85);
  animation: spin .7s linear infinite;
}
.btn-ghost.is-loading::after, .btn-outline-fire.is-loading::after { border-color: rgba(255,255,255,.25); border-top-color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   Badges / chips / pills
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding-inline: 11px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em;
  border: 1px solid var(--line-2);
  color: var(--text-soft);
}
.badge-fire { background: rgba(255,69,0,.12); border-color: var(--line-fire); color: var(--fire-300); }
.badge-free { background: rgba(54,211,153,.12); border-color: rgba(54,211,153,.4); color: var(--ember-green); }
.badge-amber { background: rgba(255,178,0,.12); border-color: rgba(255,178,0,.4); color: var(--amber-300); }
.badge-soon { background: rgba(255,255,255,.05); border-color: var(--line-2); color: var(--muted); }
.badge-solid { background: var(--fire-grad); color: var(--on-fire); border: 0; }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding-inline: 16px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  color: var(--muted); font-size: 14px; font-weight: 600;
  transition: all var(--dur-1) var(--ease);
}
.chip:hover { color: var(--text); border-color: var(--line-2); }
.chip[aria-pressed="true"], .chip.is-active { background: rgba(255,69,0,.12); border-color: var(--line-fire); color: var(--fire-300); }

/* ============================================================
   Cards / surfaces
   ============================================================ */
.card {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.card-pad { padding: clamp(20px, 2.4vw, 30px); }
.card-hover:hover { transform: translateY(-4px); border-color: var(--line-fire); box-shadow: var(--glow-soft); }
.panel { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); }

.glass {
  background: rgba(20,21,26,.72);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  border: 1px solid var(--line);
}

/* hairline gradient ring used for premium cards */
.ring-fire { position: relative; }
.ring-fire::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(255,69,0,.6), rgba(255,178,0,.25) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}

/* ============================================================
   Forms
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 8px; }
.label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-soft); }
.input, .textarea, .select {
  width: 100%; height: 52px; padding-inline: 16px;
  background: var(--surface-2); border: 1px solid var(--line-2);
  border-radius: var(--r-md); color: var(--text); font-size: 16px;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), background var(--dur-1);
}
.textarea { height: auto; padding: 14px 16px; min-height: 120px; resize: vertical; line-height: 1.6; }
.input::placeholder, .textarea::placeholder { color: var(--muted-2); }
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--fire);
  box-shadow: 0 0 0 4px rgba(255,69,0,.14);
  background: var(--surface-3);
}
.input.is-error, .textarea.is-error { border-color: #ff5247; box-shadow: 0 0 0 4px rgba(255,82,71,.14); }
.field-err { font-size: 13px; color: #ff7a70; min-height: 16px; }

.check { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; color: var(--muted); line-height: 1.5; }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check .box {
  flex: none; width: 22px; height: 22px; border-radius: 7px; margin-top: 1px;
  border: 1px solid var(--line-2); background: var(--surface-3);
  display: grid; place-items: center; transition: all var(--dur-1) var(--ease);
}
.check .box svg { width: 13px; height: 13px; opacity: 0; transform: scale(.6); transition: all var(--dur-1) var(--ease); color: var(--on-fire); }
.check input:checked + .box { background: var(--fire-grad); border-color: transparent; }
.check input:checked + .box svg { opacity: 1; transform: scale(1); }
.check input:focus-visible + .box { box-shadow: 0 0 0 4px rgba(255,69,0,.18); }

/* ============================================================
   Utility
   ============================================================ */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); }
.center { text-align: center; }
.relative { position: relative; }
.hide-mobile { } .only-mobile { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* focus ring */
:focus-visible { outline: 2px solid var(--fire-300); outline-offset: 2px; border-radius: 4px; }

/* ============================================================
   Reveal-on-scroll
   ============================================================ */
.reveal { transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
/* Resting state is VISIBLE. The hidden start-state is only applied once JS confirms
   it is safe to animate (tab visible, motion allowed) — so captures, no-JS, and
   backgrounded iframes never get stuck on opacity:0. */
html.reveal-anim .reveal { opacity: 0; transform: translateY(22px); }
html.reveal-anim .reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }
.reveal[data-d="5"] { transition-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   Image placeholder (no real assets yet)
   ============================================================ */
.ph {
  position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 10px, rgba(255,255,255,0) 10px 20px),
    var(--surface-2);
  border: 1px dashed var(--line-2);
  display: grid; place-items: center;
  color: var(--muted-2); font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em;
  text-align: center;
}
.ph span { padding: 4px 8px; }

@media (max-width: 720px) {
  .hide-mobile { display: none !important; }
  .only-mobile { display: revert; }
}