/* Homepage sections introduced in the conversion rebuild.
   Reuses the existing dark theme tokens from style.css. */

/* ------------------------------------------------------- hero screenshots */
.hero-shots { position: relative; width: 100%; max-width: 46rem; margin-top: 0.5rem; }
.hero-shots-inner {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid rgba(59, 130, 246, 0.3);
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.65);
  background: #0b1220;
  aspect-ratio: 8 / 5;
}
.hero-shot {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}
.hero-shot.is-active { opacity: 1; pointer-events: auto; }
.hero-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.hero-shot figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0.7rem 0.9rem;
  font-size: 0.78rem;
  color: var(--slate-300);
  background: linear-gradient(to top, rgba(2, 6, 23, 0.92), rgba(2, 6, 23, 0));
}
.hero-shot-dots { display: flex; gap: 0.45rem; justify-content: center; margin-top: 0.85rem; }
.hero-shot-dot {
  width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: rgba(148, 163, 184, 0.35);
  border: 0; padding: 0; cursor: pointer;
  transition: background .2s, transform .2s;
}
.hero-shot-dot.is-active { background: var(--blue-500); transform: scale(1.25); }

/* ------------------------------------------------------------- two offers */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 1.75rem;
  max-width: 64rem;
  margin: 2.5rem auto 0;
}
.offer-card {
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.25rem;
  padding: 2rem 1.9rem;
  display: flex;
  flex-direction: column;
  transition: border-color .3s, transform .3s;
}
.offer-card:hover { border-color: rgba(59, 130, 246, 0.4); transform: translateY(-4px); }
.offer-icon {
  width: 3.25rem; height: 3.25rem; border-radius: 0.9rem;
  background: rgba(59, 130, 246, 0.12); color: var(--blue-400);
  display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem;
}
.offer-card h3 { font-size: 1.35rem; font-weight: 800; margin: 0 0 0.5rem; color: #fff; }
.offer-lead { color: var(--slate-300); font-size: 1rem; line-height: 1.6; margin: 0 0 1.1rem; }
.offer-list { list-style: none; padding: 0; margin: 0 0 1.3rem; display: flex; flex-direction: column; gap: 0.6rem; }
.offer-list li { position: relative; padding-left: 1.4rem; color: var(--muted); font-size: 0.92rem; line-height: 1.6; }
.offer-list li::before { content: '✓'; position: absolute; left: 0; color: var(--blue-400); font-weight: 800; }
.offer-price { margin: auto 0 1rem; color: #fff; font-weight: 700; font-size: 0.95rem; }
.offer-price span { display: block; color: var(--slate-500); font-weight: 500; font-size: 0.82rem; margin-top: 0.15rem; }
.offer-link { color: var(--blue-400); font-weight: 700; font-size: 0.92rem; text-decoration: none; display: inline-flex; gap: 0.3rem; transition: gap .2s; }
.offer-link:hover { gap: 0.55rem; }

/* ---------------------------------------------------------- better together */
.bundle {
  max-width: 54rem;
  margin: 2.25rem auto 0;
  position: relative;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.16), rgba(15, 23, 42, 0.6));
  border: 1px solid rgba(59, 130, 246, 0.35);
  border-radius: 1.25rem;
  padding: 2.25rem 2rem 2rem;
  text-align: center;
}
.bundle-flag {
  position: absolute; top: -0.75rem; left: 50%; transform: translateX(-50%);
  background: var(--blue-600); color: #fff;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.3rem 0.8rem; border-radius: 999px; white-space: nowrap;
}
.bundle h3 { font-size: 1.4rem; font-weight: 800; margin: 0 0 0.75rem; color: #fff; }
.bundle p { color: var(--slate-300); font-size: 1rem; line-height: 1.75; margin: 0 auto 0.85rem; max-width: 44rem; }
.bundle .bundle-sub { color: var(--muted); font-size: 0.93rem; margin-bottom: 1.5rem; }

/* ----------------------------------------------------------------- demo */
.demo-box {
  max-width: 46rem; margin: 2.25rem auto 0;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 1.25rem; padding: 2rem 1.9rem; text-align: center;
}
.demo-lead { font-size: 1.1rem; font-weight: 700; color: #fff; margin: 0 0 0.75rem; }
.demo-box p { color: var(--muted); font-size: 0.97rem; line-height: 1.75; margin: 0 auto 1.4rem; max-width: 38rem; }
.demo-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.demo-prompts { list-style: none; padding: 0; margin: 1.25rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.demo-prompts li button {
  background: rgba(2, 6, 23, 0.7); border: 1px solid rgba(59, 130, 246, 0.3);
  color: var(--slate-300); font: inherit; font-size: 0.84rem;
  padding: 0.4rem 0.8rem; border-radius: 999px; cursor: pointer;
}
.demo-prompts li button:hover { border-color: var(--blue-500); color: #fff; }

/* ------------------------------------------------------------- use cases */
.uc-tabs { display: flex; flex-wrap: wrap; gap: 0.55rem; justify-content: center; margin: 2.25rem auto 1.5rem; }
.uc-tab {
  background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--slate-300); font: inherit; font-size: 0.86rem; font-weight: 600;
  padding: 0.5rem 0.95rem; border-radius: 999px; cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.uc-tab:hover { border-color: rgba(59, 130, 246, 0.45); color: #fff; }
.uc-tab.is-active { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }
.uc-panels { max-width: 46rem; margin: 0 auto; }
.uc-panel { display: none; background: rgba(15, 23, 42, 0.5); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 1.25rem; padding: 1.9rem 1.8rem; }
.uc-panel.is-active { display: block; }
.uc-panel h3 { font-size: 1.2rem; font-weight: 800; margin: 0 0 0.4rem; color: #fff; }
.uc-pain { color: var(--muted); font-size: 0.93rem; margin: 0 0 1.25rem; }
.chat { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.25rem; }
.chat p { margin: 0; padding: 0.7rem 0.95rem; border-radius: 1rem; font-size: 0.9rem; line-height: 1.6; max-width: 85%; }
.chat-in { align-self: flex-end; background: rgba(37, 99, 235, 0.22); border: 1px solid rgba(59, 130, 246, 0.3); color: #e2e8f0; border-bottom-right-radius: 0.35rem; }
.chat-out { align-self: flex-start; background: rgba(2, 6, 23, 0.7); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--slate-300); border-bottom-left-radius: 0.35rem; }
.uc-link { color: var(--blue-400); font-weight: 700; font-size: 0.9rem; text-decoration: none; }
.uc-link:hover { color: #93c5fd; }

/* ----------------------------------------------------------------- steps */
.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 1.5rem; max-width: 64rem; margin: 2.5rem auto 0; }
.step-item { background: rgba(15, 23, 42, 0.5); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 1.1rem; padding: 1.6rem 1.4rem; }
.step-day { display: inline-block; background: rgba(59, 130, 246, 0.15); color: var(--blue-400); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.25rem 0.6rem; border-radius: 999px; margin-bottom: 0.85rem; }
.step-item h4 { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.4rem; color: #fff; }
.step-item p { color: var(--muted); font-size: 0.89rem; line-height: 1.65; margin: 0; }

/* ------------------------------------------------------------- also from */
.also-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 1.1rem; max-width: 66rem; margin: 2.5rem auto 0; }
.also-card { display: block; background: rgba(15, 23, 42, 0.5); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 1rem; padding: 1.4rem 1.35rem; text-decoration: none; transition: border-color .25s, transform .25s; }
.also-card:hover { border-color: rgba(59, 130, 246, 0.4); transform: translateY(-3px); }
.also-card h3 { font-size: 1rem; font-weight: 700; margin: 0 0 0.4rem; color: #fff; }
.also-card p { color: var(--muted); font-size: 0.87rem; line-height: 1.6; margin: 0; }

/* ------------------------------------------------------------------- FAQ */
.wdfaq { max-width: 50rem; margin: 2.25rem auto 0; display: flex; flex-direction: column; gap: 0.9rem; }
.wdfaq details { background: rgba(15, 23, 42, 0.55); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0.9rem; overflow: hidden; transition: border-color .25s; }
.wdfaq details[open] { border-color: rgba(59, 130, 246, 0.35); }
.wdfaq summary { cursor: pointer; padding: 1.15rem 1.4rem; font-weight: 650; font-size: 1rem; color: #fff; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.wdfaq summary::-webkit-details-marker { display: none; }
.wdfaq summary::after { content: '+'; color: var(--blue-400); font-size: 1.4rem; font-weight: 400; line-height: 1; flex-shrink: 0; transition: transform .25s; }
.wdfaq details[open] summary::after { transform: rotate(45deg); }
.wdfaq .wdfaq-a { padding: 0 1.4rem 1.3rem; color: var(--muted); font-size: 0.94rem; line-height: 1.75; }

/* The sticky mobile CTA bar is gone. Its body padding went with it: that
   4.25rem was reserved on all 52 pages that load this stylesheet, while the
   bar itself only ever existed on the homepage, so 51 pages carried 68px of
   empty space at the foot for a bar that was never there. */

/* ------------------------------------------------- floating WhatsApp (human) */
.wa-float {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 65;
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: #25d366; color: #052e16;
  font-weight: 700; font-size: 0.85rem;
  padding: 0.7rem 1rem; border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 10px 28px -8px rgba(0, 0, 0, 0.6);
}
.wa-float:hover { filter: brightness(1.05); }
@media (max-width: 768px) { .wa-float { bottom: 4.9rem; } }

@media (prefers-reduced-motion: reduce) {
  .hero-shot { transition: none; }
  .offer-card:hover, .also-card:hover { transform: none; }
}

/* ------------------------------------------------------------- pricing */
.pr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 1.6rem; max-width: 68rem; margin: 2.5rem auto 0; }
.pr-grid--two { max-width: 46rem; }
.pr-card { position: relative; background: rgba(15, 23, 42, 0.55); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 1.25rem; padding: 2rem 1.75rem; display: flex; flex-direction: column; }
.pr-card.is-featured { border-color: rgba(59, 130, 246, 0.5); background: linear-gradient(160deg, rgba(37, 99, 235, 0.14), rgba(15, 23, 42, 0.6)); }
.pr-flag { position: absolute; top: -0.7rem; left: 50%; transform: translateX(-50%); background: var(--blue-600); color: #fff; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.28rem 0.75rem; border-radius: 999px; white-space: nowrap; }
.pr-card h3 { font-size: 1.25rem; font-weight: 800; margin: 0 0 0.5rem; color: #fff; }
.pr-blurb { color: var(--muted); font-size: 0.92rem; line-height: 1.6; margin: 0 0 1.1rem; }
.pr-price { font-size: 1.5rem; font-weight: 800; color: #fff; margin-bottom: 0.25rem; }
.pr-price--sub { font-size: 1.1rem; color: var(--slate-300); margin-bottom: 1rem; }
.pr-from { font-size: 0.75rem; font-weight: 600; color: var(--slate-500); text-transform: uppercase; letter-spacing: 0.06em; }
.pr-suffix { font-size: 0.8rem; font-weight: 500; color: var(--slate-500); }
.pr-quote { font-size: 1rem; font-weight: 700; color: var(--blue-400); }
.pr-list { list-style: none; padding: 0; margin: 1.1rem 0 1.5rem; display: flex; flex-direction: column; gap: 0.55rem; }
.pr-list li { position: relative; padding-left: 1.4rem; color: var(--muted); font-size: 0.89rem; line-height: 1.6; }
.pr-list li::before { content: '✓'; position: absolute; left: 0; color: var(--blue-400); font-weight: 800; }
.pr-list--inline { flex-direction: row; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: center; }
.pr-card .btn { margin-top: auto; }
.pr-bundle { position: relative; max-width: 54rem; margin: 0 auto; text-align: center; background: linear-gradient(135deg, rgba(37, 99, 235, 0.16), rgba(15, 23, 42, 0.6)); border: 1px solid rgba(59, 130, 246, 0.35); border-radius: 1.25rem; padding: 2.5rem 2rem 2rem; }
.pr-bundle h2 { font-size: 1.5rem; font-weight: 800; margin: 0 0 0.6rem; color: #fff; }
.pr-bundle p { color: var(--slate-300); font-size: 1rem; line-height: 1.7; margin: 0 auto 1rem; max-width: 40rem; }
.pr-currency { text-align: center; color: var(--slate-500); font-size: 0.85rem; margin-top: 1.5rem; }

/* ------------------------------------------------------- ROI calculator */
.roi-box { max-width: 54rem; margin: 2.5rem auto 0; background: rgba(15, 23, 42, 0.55); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 1.25rem; padding: 2rem 1.9rem; }
.roi-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 1.1rem; }
.roi-inputs label { display: flex; flex-direction: column; gap: 0.4rem; color: var(--slate-300); font-size: 0.85rem; font-weight: 600; }
.roi-inputs input { background: rgba(2, 6, 23, 0.7); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0.6rem; padding: 0.6rem 0.75rem; color: #fff; font: inherit; font-size: 1rem; }
.roi-inputs input:focus { outline: 2px solid var(--blue-500); outline-offset: 1px; border-color: var(--blue-500); }
.roi-outputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 1rem; margin-top: 1.75rem; }
.roi-out { background: rgba(2, 6, 23, 0.6); border: 1px solid rgba(59, 130, 246, 0.25); border-radius: 1rem; padding: 1.25rem 1rem; text-align: center; }
.roi-num { display: block; font-size: 1.9rem; font-weight: 900; color: var(--blue-400); line-height: 1; }
.roi-lbl { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 0.5rem; line-height: 1.45; }
.roi-summary { color: var(--slate-500); font-size: 0.85rem; line-height: 1.65; margin: 1.25rem 0 0; text-align: center; }

/* --------------------------------------------------------- consent banner */
.consent-banner {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 90;
  max-width: 46rem; margin: 0 auto;
  background: rgba(2, 6, 23, 0.97);
  border: 1px solid rgba(59, 130, 246, 0.35);
  border-radius: 1rem;
  padding: 1.1rem 1.25rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.consent-banner p { margin: 0; flex: 1 1 18rem; color: var(--slate-300); font-size: 0.88rem; line-height: 1.6; }
.consent-banner a { color: var(--blue-400); }
.consent-actions { display: flex; gap: 0.55rem; flex-wrap: wrap; }
.consent-btn {
  font: inherit; font-size: 0.84rem; font-weight: 700;
  padding: 0.55rem 1rem; border-radius: 0.55rem; cursor: pointer;
  background: var(--blue-600); color: #fff; border: 1px solid var(--blue-600);
}
.consent-btn--ghost { background: transparent; color: var(--slate-300); border-color: rgba(255, 255, 255, 0.2); }
.consent-btn:hover { filter: brightness(1.08); }
@media (max-width: 768px) { .consent-banner { bottom: 4.9rem; } }
.step-item h3.step-h { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.4rem; color: #fff; }

/* ------------------------------------------------------ maintenance notice */
.maint-bar {
  position: relative; z-index: 80;
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.7rem 2.6rem 0.7rem 1rem;
  background: linear-gradient(90deg, rgba(180, 83, 9, 0.9), rgba(146, 64, 14, 0.9));
  border-bottom: 1px solid rgba(251, 191, 36, 0.45);
  color: #fef3c7; font-size: 0.86rem; line-height: 1.5;
}
.maint-dot {
  width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #fbbf24; flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.7); animation: maintpulse 2.4s infinite;
}
@keyframes maintpulse {
  0%   { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.6); }
  70%  { box-shadow: 0 0 0 0.4rem rgba(251, 191, 36, 0); }
  100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
}
.maint-msg { flex: 1 1 16rem; }
.maint-link { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.maint-link:hover { color: #fde68a; }
.maint-close {
  position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%);
  background: transparent; border: 0; color: #fde68a;
  font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0.2rem 0.45rem; border-radius: 0.35rem;
}
.maint-close:hover { background: rgba(0, 0, 0, 0.2); color: #fff; }
@media (prefers-reduced-motion: reduce) { .maint-dot { animation: none; } }
@media (max-width: 640px) { .maint-bar { font-size: 0.8rem; padding-right: 2.4rem; } }

/* The hidden attribute must win over component display rules.
   .footer-contact-item sets display:flex, which otherwise keeps an
   unconfigured contact row visible as a bare icon with no text. */
[hidden] { display: none !important; }

.demo-note { color: var(--slate-500); font-size: 0.85rem; line-height: 1.6; margin: 1.25rem auto 0; max-width: 34rem; }
.demo-note a { color: var(--blue-400); }

/* ------------------------------------------- per-industry colour identity
   Each use-case tab carries its own accent. One custom property drives the
   tab, the panel border and tint, the chat bubbles and the link, so a tab
   change reads as a change of context rather than just a swapped paragraph.
   Values are the accent's RGB channels, so alpha can vary per element. */
.uc-tab[data-uc="service"],  .uc-panel[data-uc="service"]  { --uc: 59, 130, 246; }   /* blue    */
.uc-tab[data-uc="ecom"],     .uc-panel[data-uc="ecom"]     { --uc: 245, 158, 11; }   /* amber   */
.uc-tab[data-uc="leads"],    .uc-panel[data-uc="leads"]    { --uc: 16, 185, 129; }   /* emerald */
.uc-tab[data-uc="booking"],  .uc-panel[data-uc="booking"]  { --uc: 34, 211, 238; }   /* cyan    */
.uc-tab[data-uc="property"], .uc-panel[data-uc="property"] { --uc: 167, 139, 250; }  /* violet  */
.uc-tab[data-uc="school"],   .uc-panel[data-uc="school"]   { --uc: 251, 113, 133; }  /* rose    */

/* tabs */
.uc-tab:hover { border-color: rgba(var(--uc), 0.55); color: #fff; }
.uc-tab.is-active {
  background: rgba(var(--uc), 0.16);
  border-color: rgba(var(--uc), 0.75);
  color: rgb(var(--uc));
  box-shadow: 0 0 0 1px rgba(var(--uc), 0.25), 0 8px 22px -12px rgba(var(--uc), 0.8);
}

/* panel takes the same accent */
.uc-panel {
  border-color: rgba(var(--uc), 0.3);
  background:
    linear-gradient(160deg, rgba(var(--uc), 0.09), rgba(15, 23, 42, 0.55) 62%);
  position: relative;
  overflow: hidden;
}
/* a thin accent rule along the top edge, so the colour reads even when the
   tint is subtle on a dark ground */
.uc-panel::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(var(--uc), 0.9), rgba(var(--uc), 0));
}
.uc-panel h3 { color: #fff; }
.uc-panel .uc-pain { color: var(--muted); }

/* chat bubbles pick up the industry colour */
.uc-panel .chat-in {
  background: rgba(var(--uc), 0.2);
  border-color: rgba(var(--uc), 0.45);
  color: #f1f5f9;
}
.uc-panel .chat-out {
  background: rgba(2, 6, 23, 0.72);
  border-color: rgba(var(--uc), 0.16);
}

/* link */
.uc-panel .uc-link { color: rgb(var(--uc)); }
.uc-panel .uc-link:hover { filter: brightness(1.18); }

@media (prefers-reduced-motion: reduce) {
  .uc-tab.is-active { box-shadow: 0 0 0 1px rgba(var(--uc), 0.25); }
}

/* ---------------------------------------------------- mobile floors
   Measured at 390px: these pills rendered at 10.9px and 11.2px, under the
   12px that counts as legible, and .uc-link was a 17px-high target against
   the 24px WCAG 2.2 AA minimum. */
@media (max-width: 768px) {
  .bundle-flag, .step-day { font-size: 0.75rem; }
  .uc-link { display: inline-flex; align-items: center; padding: 0.25rem 0; min-height: 1.5rem; }
  .footer-social-link, [data-social] { display: inline-flex; align-items: center; min-height: 1.5rem; }
}