/* ==========================================================================
   BOOOST — Business landing (2026-06 rebuild)
   ONE coherent layout system for the whole Business page: a single content
   container, one vertical rhythm, one section pattern. Reuses the cyberpunk
   tokens from tokens.css. Everything is scoped to .landing-business.
   ========================================================================== */

.landing-business {
  --biz-max: 1140px;            /* the single content width            */
  --biz-pad-x: clamp(20px, 5vw, 48px);
  --biz-sec-y: clamp(72px, 9vw, 128px); /* the single vertical rhythm   */
  --biz-prose: 680px;          /* centered prose (headers, faq)        */
}

/* The business landing is one continuous dark surface — no per-section
   backgrounds that make it feel like stitched-together pages. */
.landing-business .landing-inner {
  display: block;              /* override the flex column from style.css */
  background: var(--cyber-black);
}

/* ---- The one section + container pattern ---- */
.biz-sec {
  position: relative;
  z-index: 1;
  padding-block: var(--biz-sec-y);
}
.biz-sec--alt {
  background: rgba(255, 255, 255, 0.015);
  border-block: 1px solid var(--cyber-border);
}
.biz-sec--slim { padding-block: clamp(1.75rem, 4vw, 2.75rem); }
.biz-wrap {
  width: 100%;
  max-width: var(--biz-max);
  margin-inline: auto;
  padding-inline: var(--biz-pad-x);
}

/* ---- The one section header ---- */
.biz-head {
  max-width: var(--biz-prose);
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}
.biz-eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--cyber-magenta);
  margin-bottom: var(--space-4);
}
.biz-h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--cyber-text);
  margin: 0 0 var(--space-4);
}
.biz-sub {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--cyber-text-muted);
  margin: 0;
}

/* ---- Buttons ---- */
.landing-business .landing-cta-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.btn-ghost-dark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--cyber-border);
  background: rgba(255, 255, 255, 0.02);
  color: var(--cyber-text);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: var(--text-base);
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.btn-ghost-dark:hover {
  border-color: var(--cyber-cyan);
  color: var(--cyber-cyan);
  box-shadow: 0 0 0 1px var(--cyber-cyan), 0 0 24px rgba(0, 240, 255, 0.18);
  transform: translateY(-1px);
}

/* ---- Hero (same container, NOT full-screen) ---- */
.biz-hero {
  padding-top: clamp(5rem, 11vw, 8rem);
  text-align: center;
}
.biz-hero__inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}
.biz-hero .landing-h1 {
  margin: 0;
}
.biz-hero .landing-sub {
  max-width: 600px;
  margin: 0;
  color: var(--cyber-text-muted);
}
.biz-hero__shot {
  margin-top: clamp(3rem, 6vw, 5rem);
}

/* ---- Screenshot frame ---- */
.shot-frame {
  position: relative;
  border: 1px solid var(--cyber-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--cyber-surface);
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
}
.shot-frame::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyber-magenta), var(--cyber-cyan));
  opacity: 0.6;
}
.shot-frame img { display: block; width: 100%; height: auto; }

/* ---- Proof band ---- */
.biz-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
.biz-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  text-align: center;
}
.biz-stat__value {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight: 700;
  color: var(--cyber-cyan);
  line-height: 1;
}
.biz-stat__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cyber-text-muted);
}

/* ---- Who it's for ---- */
.who-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.who-card {
  padding: var(--space-6);
  border: 1px solid var(--cyber-border);
  border-radius: var(--radius-lg);
  background: var(--cyber-surface);
}
.who-card h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--cyber-text);
  margin: 0 0 var(--space-2);
}
.who-card p {
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--cyber-text-muted);
  margin: 0;
}

/* ---- Showcase rows (alternating) ---- */
.showcase-row {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.showcase-row + .showcase-row { margin-top: clamp(3.5rem, 8vw, 7rem); }
.showcase-row--reverse .showcase-row__text { order: 2; }
.showcase-row--reverse .showcase-row__shot { order: 1; }
.showcase-kicker {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cyber-magenta);
  margin-bottom: var(--space-3);
}
.showcase-row__text h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 2.8vw, 1.9rem);
  line-height: 1.15;
  color: var(--cyber-text);
  margin: 0 0 var(--space-4);
}
.showcase-row__text p {
  font-size: var(--text-md);
  line-height: 1.65;
  color: var(--cyber-text-muted);
  margin: 0;
}

/* ---- Feature tiles ---- */
.feature-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
.feature-tile {
  padding: var(--space-5);
  border: 1px solid var(--cyber-border);
  border-radius: var(--radius-lg);
  background: var(--cyber-surface);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.feature-tile:hover {
  border-color: var(--cyber-border-glow);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -24px rgba(255, 45, 107, 0.35);
}
.feature-tile h4 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--cyber-text);
  margin: 0 0 var(--space-2);
}
.feature-tile p {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--cyber-text-muted);
  margin: 0;
}

/* ---- How it works ---- */
.biz-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
}
.biz-step__n {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--cyber-magenta);
  color: var(--cyber-magenta);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  margin-bottom: var(--space-4);
}
.biz-step h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--cyber-text);
  margin: 0 0 var(--space-2);
}
.biz-step p {
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--cyber-text-muted);
  margin: 0;
}

/* ---- Trust band ---- */
.trust-band {
  text-align: center;
  max-width: var(--biz-prose);
  margin-inline: auto;
}
.trust-band h2 { /* uses .biz-h2 */ }

/* ---- FAQ (override inherited width to the system) ---- */
.landing-business .landing-faq { padding: 0; }
.landing-business .faq-list {
  max-width: var(--biz-prose);
  margin-inline: auto;
}

/* ---- CTA (override inherited width to the system) ---- */
.landing-business .landing-wishlist { padding: 0; }
.landing-business .wishlist-box {
  max-width: 640px;
  margin-inline: auto;
}

/* ---- Footer aligned to the container ---- */
.landing-business .landing-footer {
  max-width: var(--biz-max);
  margin-inline: auto;
  padding-inline: var(--biz-pad-x);
}

/* ---- Reveal-on-scroll (the observer adds .revealed) ---- */
.landing-business .scroll-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.landing-business .scroll-reveal.revealed { opacity: 1; transform: none; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .showcase-row {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .showcase-row--reverse .showcase-row__text,
  .showcase-row--reverse .showcase-row__shot { order: initial; }
  .who-grid { grid-template-columns: 1fr; }
  .biz-steps { grid-template-columns: 1fr; }
  .feature-tiles { grid-template-columns: repeat(2, 1fr); }
  .biz-stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
}
@media (max-width: 520px) {
  .feature-tiles { grid-template-columns: 1fr; }
  .biz-stats { grid-template-columns: 1fr; }
}