/* ================================================================
   GOS DEVICE SHOWCASE — copied as-is from gos.css
   (the "Live sync / Real-time alerts" laptop + phone section)
   Inserted as the 3rd section on the Business Booster page.
   ================================================================ */

/* styles.css already defines --text-primary / --text-muted with the
   same values gos.css uses, so only the vars it's missing are added
   here — nothing existing is overridden. */
:root {
  --glass-bg-strong: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.1);
  --font-mono: 'JetBrains Mono', monospace;
  --glass-bg: rgba(255, 255, 255, 0.045);
  --glow-blue-soft: #ff6b6b;
  --glow-purple: #d82323;
  --glow-cyan: #ffffff;
}

.js-float { animation: float-y 5s ease-in-out infinite; }
@keyframes float-y {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -10px, 0); }
}

/* ================================================================
   DEVICE SHOWCASE (pinned)
   ================================================================ */
.launch-showcase {
  position: relative;
  z-index: 2;
  height: 550vh; /* scroll distance that drives the pinned timeline — stretched out so the animation plays out more slowly as you scroll */
}
.showcase-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  perspective: 1600px;
}

.showcase-glow {
  position: absolute;
  inset: -20%;
  z-index: 0;
  background: radial-gradient(circle at 50% 50%, rgba(216, 35, 35, 0.22), rgba(216, 35, 35, 0.12) 45%, transparent 70%);
  filter: blur(60px);
  will-change: transform, opacity;
}

.showcase-badge {
  position: absolute;
  z-index: 5;
  padding: 8px 16px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-primary);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.showcase-badge-a { top: 14%; left: 8%; }
.showcase-badge-b { bottom: 16%; right: 9%; animation-delay: -2.5s; }

/* -- Devices: base wrapper -- */
.device {
  position: absolute;
  transform-style: preserve-3d;
  will-change: transform;
}

/* -- Laptop -- */
.device-laptop {
  width: min(62vw, 760px);
  z-index: 3;
}
.device-laptop-lid {
  position: relative;
  border-radius: 18px 18px 6px 6px;
  background: linear-gradient(155deg, #1c1d22, #08090b 60%);
  padding: 14px 14px 20px;
  box-shadow:
    0 40px 90px -30px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
.device-laptop-cam {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2a2b30;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.03);
}
.device-laptop-bezel {
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
}
.device-laptop-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, #0c0d14, #06070a 70%);
}
/* Screen sheen — a soft diagonal highlight that slowly sweeps across
   the glass, giving the "floating reflection" effect requested. */
.device-laptop-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.05) 48%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.05) 52%, transparent 70%);
  background-size: 250% 250%;
  animation: screen-sheen 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes screen-sheen {
  0%, 100% { background-position: 120% -20%; }
  50%      { background-position: -20% 120%; }
}
.device-laptop-hinge {
  height: 8px;
  margin: 0 6%;
  background: linear-gradient(90deg, #0a0a0c, #232429, #0a0a0c);
  border-radius: 0 0 4px 4px;
}
.device-laptop-base {
  height: 14px;
  margin: 0 -2%;
  background: linear-gradient(180deg, #1a1b1f, #08090b);
  border-radius: 0 0 14px 14px;
  box-shadow: 0 24px 40px -16px rgba(0, 0, 0, 0.7);
}

/* -- Real product screenshot rendered inside the laptop screen -- */
.dash-screenshot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #000;
  display: block;
}

/* -- Phone -- */
.device-phone {
  width: min(17vw, 210px);
  z-index: 4;
}
.device-phone-frame {
  position: relative;
  aspect-ratio: 9 / 19;
  border-radius: 34px;
  background: linear-gradient(160deg, #202126, #08090b);
  padding: 10px;
  box-shadow:
    0 30px 70px -20px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
.device-phone-notch {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 18px;
  border-radius: 10px;
  background: #08090b;
  z-index: 2;
}
.device-phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(170deg, #0c0d14, #06070a 70%);
}
.device-phone-shadow {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -6%;
  height: 24px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), transparent 70%);
  filter: blur(6px);
  z-index: -1;
}

.phone-screenshot {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.phone-dash { position: absolute; inset: 0; padding: 30px 10px 10px; display: flex; flex-direction: column; gap: 10px; }
.phone-status { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); text-align: center; margin-bottom: 4px; }
.phone-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(10px);
  transform: translate3d(120%, 0, 0);
  opacity: 0;
  will-change: transform, opacity;
}
.phone-card-icon { font-size: 15px; line-height: 1; }
.phone-card-copy strong { display: block; font-size: 10.5px; color: var(--text-primary); }
.phone-card-copy p { margin: 2px 0 0; font-size: 9px; color: var(--text-muted); }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 900px) {
  .launch-showcase { height: 260vh; }
  .device-laptop { width: 86vw; }
  .device-phone { width: 30vw; position: static; margin-top: 24px; }
  .showcase-pin { flex-direction: column; }
}
@media (max-width: 560px) {
  .showcase-badge { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js-float, .device-laptop-screen::after {
    animation: none !important;
  }
}

/* ================================================================
   GOS SOLUTION SECTION — copied as-is from gos.css
   (the "Give your business the competitive edge" section)
   Inserted as the 4th section on the Business Booster page.
   ================================================================ */

.js-reveal { opacity: 0; will-change: transform, opacity; }

/* -- Shared glass surface used by .solution-card -- */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.launch-eyebrow {
  display: inline-block;
  margin: 0 auto 22px;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--glow-blue-soft);
  background: rgba(216, 35, 35, 0.1);
  border: 1px solid rgba(216, 35, 35, 0.3);
}

/* Animated gradient text — background-position animates via CSS,
   background-clip renders the gradient through the glyph shapes. */
.launch-line-gradient {
  background: linear-gradient(90deg, var(--glow-blue-soft), var(--glow-purple), var(--glow-cyan), var(--glow-blue-soft));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradient-flow 8s linear infinite;
}
@keyframes gradient-flow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

.solution {
  position: relative;
  z-index: 3;
  /* Pull the solution into the unused lower area of the pinned showcase. */
  margin-top: -120px;
  padding: 0 clamp(20px, 5vw, 64px) 140px;
}
.solution-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 900px) {
  .solution-inner { grid-template-columns: 1.1fr 0.9fr; align-items: center; }
}
.solution-title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  line-height: 1.15;
  margin: 10px 0 22px;
}
.solution-copy p {
  color: var(--text-muted);
  font-size: 15.5px;
  line-height: 1.7;
  margin: 0 0 14px;
}
.solution-card {
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.solution-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.solution-num {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--glow-blue-soft);
  color: var(--glow-blue-soft);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.solution-item p { margin: 0; color: var(--text-muted); font-size: 14.5px; line-height: 1.5; padding-top: 4px; }
.solution-item strong { color: var(--text-primary); }

@media (prefers-reduced-motion: reduce) {
  .js-reveal { opacity: 1 !important; transform: none !important; }
  .launch-line-gradient { animation: none !important; }
}

/* ================================================================
   PRODUCT NAME HEADINGS — "shine" sweep text effect
   Used for the "Workout+" heading (page 2) and the "Customer
   DashBoard" heading (page 3).
   ================================================================ */
.product-name-shine {
  display: inline-block;
  margin: 0 0 14px;
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 700;
  letter-spacing: 0.01em;
  background: linear-gradient(100deg,
    var(--text-primary) 0%,
    var(--text-primary) 35%,
    #ffffff 48%,
    #ffffff 52%,
    var(--text-primary) 65%,
    var(--text-primary) 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: text-shine 3.2s linear infinite;
}
@keyframes text-shine {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* Positions the "Customer DashBoard" heading over the device
   showcase (page 3), which otherwise has no copy column. */
.showcase-heading {
  position: absolute;
  top: 11%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  margin: 0;
  text-align: center;
  white-space: nowrap;
  /* Match the Workout+ section heading's font style */
  font-size: clamp(28px, 4.5vw, 46px);
  font-weight: 800;
  letter-spacing: -0.01em;
}

@media (max-width: 560px) {
  .showcase-heading { font-size: 20px; top: 6%; }
}

/* Section-level "Workout+" heading, centered in the blank space
   above the page-2 showcase grid (image + copy). */
.workout-section-heading {
  display: block;
  text-align: center;
  font-size: clamp(34px, 5.5vw, 58px);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-lg, 40px);
}

/* Bigger "The kiosk" tag next to the Workout+ heading — scoped to
   .showcase-copy only, so the hero badge and other .hero-tag uses
   elsewhere on the page are unaffected. */
.showcase-copy .hero-tag {
  font-size: 20px;
  padding: 9px 22px;
}

@media (prefers-reduced-motion: reduce) {
  .product-name-shine { animation: none; }
}

/* Fine-tune only the Sales Kiosk title. */
.sales-kiosk-heading { transform: translateY(-25px); }