/* ==========================================================================
   ubook — landing page (business.html) only.

   Everything in here used to sit in styles.css, which all 27 pages load, even
   though only this one page ever used it. Splitting it out means the app pages
   no longer download — or risk colliding with — generic names like .section,
   .hero, .feature and .step.

   business.html loads: styles.css (tokens + base) → app.css (appbar, footer,
   hero) → this file. So the chrome is identical to every other page and only
   the marketing sections below are page-specific.
   ========================================================================== */

/* ------- section rhythm ------- */
.section { padding: 88px 0; position: relative; }
.section--tight { padding: 56px 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--primary-ink); background: var(--pink-100);
  border: 1px solid var(--pink-200); padding: 7px 14px; border-radius: var(--r-pill);
}
.section-head { max-width: 660px; margin: 0 auto 52px; text-align: center; }
.section-head .eyebrow { margin-bottom: 18px; }
.section-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(28px, 4vw, 42px); line-height: 1.12; letter-spacing: -0.01em;
  color: var(--plum-900); margin-bottom: 14px;
}
.section-sub { font-size: 17px; line-height: 1.65; color: var(--text-muted); }

/* ------- hero -------
   Same dark video hero as the homepage, but split: copy on the left, the
   sign-up card on the right. .home-hero and .hero-media come from app.css. */
.biz-hero-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center;
}
.hero-copy h1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(32px, 4.4vw, 54px); line-height: 1.08; letter-spacing: -0.015em;
  color: #fff; margin-bottom: 18px;
}
.hero-copy h1 .grad { color: #EFC4A6; font-style: italic; }
.biz-hero-grid .hero-sub {
  font-size: clamp(15.5px, 1.5vw, 18px); line-height: 1.65;
  color: rgba(255, 255, 255, .8); max-width: 46ch; margin: 0;
}

.hero-bullets { list-style: none; margin: 24px 0 26px; padding: 0; display: grid; gap: 11px; }
.hero-bullets li { display: flex; align-items: flex-start; gap: 11px; font-size: 15.5px; color: rgba(255, 255, 255, .88); }
.hero-bullets svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: #EFC4A6; }

.hero-trust { display: flex; align-items: center; gap: 14px; font-size: 14px; color: rgba(255, 255, 255, .68); }
.avatars { display: flex; }
.avatars span {
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .85); margin-left: -10px;
  display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff;
}
.avatars span:first-child { margin-left: 0; }
.a1 { background: linear-gradient(135deg, #C4684A, #8A3A22); }
.a2 { background: linear-gradient(135deg, #D9A86B, #A8722F); }
.a3 { background: linear-gradient(135deg, #7B6553, #3A2C22); }
.a4 { background: linear-gradient(135deg, #C08398, #8A4A61); }
.hero-trust .stars { color: #E0B87E; }

/* ------- sign-up card (the page leads with registration) ------- */
.hero-visual { position: relative; display: flex; justify-content: center; }
.biz-signup {
  background: var(--surface-solid); border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg); padding: 32px 30px; width: 100%; max-width: 430px; margin-left: auto;
}
.biz-signup h2 { font-family: var(--font-display); font-weight: 600; font-size: 25px; color: var(--plum-900); }
.bs-sub { margin: 6px 0 22px; color: var(--text-muted); font-size: 15px; }
.bs-field { display: block; margin-bottom: 16px; }
.bs-field span { display: block; font-size: 13px; font-weight: 600; color: var(--plum-900); margin-bottom: 7px; }
.bs-field input {
  width: 100%; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--r-md);
  font-family: inherit; font-size: 16px; color: var(--text); background: var(--surface-solid);
}
.bs-field input::placeholder { color: var(--pink-400); }
.bs-field input:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.biz-signup .btn { margin-top: 6px; }
.bs-note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--text-muted); }
.bs-login { margin: 16px 0 0; text-align: center; font-size: 14.5px; color: var(--text-muted); }
.bs-login a { color: var(--primary-ink); font-weight: 600; }

/* ------- stats strip ------- */
.stats-strip {
  background: var(--plum-900); border-radius: var(--r-xl); padding: 40px; color: #fff;
  box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
}
.stats-strip::before {
  content: ""; position: absolute; top: -50%; right: -8%; width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(180, 87, 58, .5), transparent 62%); pointer-events: none;
}
.stats-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.stat .num { font-family: var(--font-display); font-weight: 600; font-size: clamp(30px, 4vw, 44px); color: #fff; }
.stat .num .u { color: #EFC4A6; }
.stat .lbl { font-size: 14px; color: rgba(255, 255, 255, .7); margin-top: 4px; }

/* ------- features ------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature {
  background: var(--pink-50); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: var(--pink-300); }
.feature .f-ic {
  width: 52px; height: 52px; border-radius: var(--r-md); display: grid; place-items: center; margin-bottom: 18px;
  background: var(--surface-solid); border: 1px solid var(--line); color: var(--primary);
}
.feature .f-ic svg { width: 26px; height: 26px; }
.feature h3 { font-family: var(--font-display); font-weight: 600; font-size: 20px; margin-bottom: 8px; color: var(--plum-900); }
.feature p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--text-muted); }

/* ------- how it works ------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: step; }
.step { position: relative; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px 26px; }
.step .num {
  counter-increment: step; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 22px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, #C4684A, #8A3A22); margin-bottom: 18px; box-shadow: var(--shadow-sm);
}
.step h3 { font-family: var(--font-display); font-weight: 600; font-size: 20px; margin-bottom: 8px; color: var(--plum-900); }
.step p { margin: 0; color: var(--text-muted); font-size: 15px; line-height: 1.65; }

/* ------- final CTA ------- */
.final-cta {
  text-align: center; background: var(--plum-900); border-radius: var(--r-xl);
  padding: 68px 40px; color: #fff; box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
}
.final-cta::before {
  content: ""; position: absolute; top: -40%; left: 50%; transform: translateX(-50%);
  width: 720px; height: 720px;
  background: radial-gradient(circle, rgba(180, 87, 58, .55), transparent 62%); pointer-events: none;
}
.final-cta > * { position: relative; }
.final-cta h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(30px, 4.2vw, 46px); margin-bottom: 16px; }
.final-cta p { font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .82); max-width: 560px; margin: 0 auto 30px; }
.final-cta .btn-light { background: #fff; color: var(--primary-ink); }

/* ------- scroll-in animation ------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ------- responsive ------- */
@media (max-width: 960px) {
  .biz-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-visual { order: -1; }
  .biz-signup { margin: 0 auto; }
  .feature-grid, .steps { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 620px) {
  .section { padding: 60px 0; }
  .feature-grid, .steps { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stats-strip { padding: 30px 24px; }
  .final-cta { padding: 48px 24px; }
  .biz-signup { padding: 26px 22px; }
}