/* ============================================================
   PRODUCT TOUR HERO + TABLET  (shared .pt-* component)
   ------------------------------------------------------------
   Drives the top-of-page hero on every product marketing page:
   eyebrow (scrolls to CTA) → glowing two-tone headline → tablet
   showing a guided back-office tour → sub-copy → primary CTA.

   .pt-* is GLOBAL (not page-namespaced) so the identical markup
   from partials/product_hero.php works on any product page.
   Per-page colour is injected inline on .pt-hero:
     --pt-accent     light tint  (eyebrow / caption / progress)
     --pt-grad-from  vivid shade (gradient + fills)
     --pt-grad-to    light shade (gradient end)
     --pt-glow       rgba glow   (drop-shadows / button glow)
   ============================================================ */

.pt-hero {
  --pt-accent:    var(--accent-cyan, #22d3ee);
  --pt-grad-from: var(--accent-cyan, #22d3ee);
  --pt-grad-to:   #67e8f9;
  --pt-glow:      rgba(34, 211, 238, 0.45);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(4.5rem, 9vh, 6rem) 1.5rem 4.5rem;
  overflow: hidden;
}
.pt-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 8%, var(--pt-glow) 0%, transparent 42%),
    radial-gradient(ellipse at 85% 75%, var(--pt-glow) 0%, transparent 45%);
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}
.pt-hero > * { position: relative; z-index: 1; }

/* ---- eyebrow (clickable → smooth-scrolls to the CTA) ---- */
.pt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: 0.22em;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--pt-accent);
  text-decoration: none;
  padding: 0.5rem 1.15rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--pt-accent);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.pt-eyebrow:hover,
.pt-eyebrow:focus-visible {
  background: linear-gradient(135deg, var(--pt-grad-from), var(--pt-grad-to));
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -8px var(--pt-glow);
}

/* ---- headline: two-tone accent gradient + MR.ROBOT-style pulsing glow ---- */
.pt-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 5.2vw, 4.6rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0.95rem 0 0;
  background: linear-gradient(115deg,
    var(--pt-grad-from) 0%, var(--pt-grad-to) 50%, var(--pt-grad-from) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 24px var(--pt-glow));
  animation: ptGlow 3.4s ease-in-out infinite;
}
@keyframes ptGlow {
  0%, 100% { filter: drop-shadow(0 0 16px var(--pt-glow)); }
  50%      { filter: drop-shadow(0 0 32px var(--pt-glow)) drop-shadow(0 0 56px var(--pt-glow)); }
}
/* desktop: one line (spaces between the spans); mobile: 2 words / 2 words */
.pt-h1 .pt-line { display: inline; }

/* LIGHT THEME: the global `body.light-theme h1` (styles.css) forces a dark slate→gray
   gradient onto EVERY <h1>, and since .pt-h1 is an <h1> it wins (higher specificity) →
   the headline rendered BLACK on every product page. Re-assert the page's vivid
   --pt-grad gradient here (specificity 0,2,1 > the global 0,1,2). */
body.light-theme .pt-h1 {
  background: linear-gradient(115deg, var(--pt-grad-from) 0%, var(--pt-grad-to) 50%, var(--pt-grad-from) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============================================================
   TABLET  — attached right under the headline
   ============================================================ */
.pt-stage {
  position: relative;
  width: min(92vw, 1040px);
  max-width: 100%;
  margin: 1.7rem auto 0;
}
/* soft glow radiating from BEHIND the tablet, in the page's own accent (--pt-glow) —
   the same "device glow" treatment used site-wide for visual consistency. */
.pt-stage::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  inset: -9% -5%;   /* extends BEYOND the tablet so the glow radiates out as a soft halo */
  background: radial-gradient(58% 56% at 50% 53%, var(--pt-glow), transparent 72%);
  filter: blur(52px); opacity: .95;
}
.pt-stage > .pt-tablet { position: relative; z-index: 1; }
.pt-tablet {
  position: relative;
  padding: clamp(10px, 1.6vw, 20px);
  border-radius: clamp(20px, 2.6vw, 34px);
  background: linear-gradient(155deg, #2b303b 0%, #15181f 58%, #1f232d 100%);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.55),
    0 0 60px var(--pt-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  cursor: pointer;              /* click anywhere to advance */
}
.pt-tablet::after {            /* front-camera dot */
  content: '';
  position: absolute;
  top: clamp(4px, 0.7vw, 9px);
  left: 50%;
  transform: translateX(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #5b6472, #0a0c10);
  z-index: 5;
}
.pt-screen {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: clamp(8px, 1.1vw, 14px);
  overflow: hidden;
  background: #0b0e14;
}

/* ---- slideshow (no overlay text — captions live below the tablet) ---- */
.pt-tour { position: absolute; inset: 0; }
.pt-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 0;
  transform: scale(1.06);
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
.pt-slide.pt-prev { opacity: 1; z-index: 1; transform: scale(1); }
.pt-slide.pt-on   { opacity: 1; z-index: 2; transform: scale(1); }
.pt-slide > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transform: scale(1);
  transition: transform 6s ease-out;
}
.pt-slide.pt-on > img { transform: scale(1.07); }   /* Ken Burns */

/* ============================================================
   BELOW THE TABLET — Instagram-stories progress + caption
   ============================================================ */
.pt-belowbar {
  width: min(92vw, 1040px);
  max-width: 100%;
  margin: 1.1rem auto 0;
}
.pt-progress {
  display: flex;
  gap: 7px;
}
.pt-seg {
  flex: 1 1 0;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
  cursor: pointer;
}
.pt-seg > i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--pt-grad-from), var(--pt-grad-to));
}
.pt-seg.is-done > i { width: 100%; }

/* captions stacked; only the active one shows (keeps data-t lang-switch working) */
.pt-caps {
  position: relative;
  min-height: 3.2em;
  margin-top: 0.95rem;
}
.pt-cap {
  position: absolute;
  inset: 0;
  margin: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.9rem, 1.5vw, 1.14rem);
  line-height: 1.5;
  color: var(--pt-accent);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}
.pt-cap.pt-on { opacity: 1; transform: translateY(0); }

/* ============================================================
   SUB-COPY + PRIMARY CTA  (below the tablet)
   ============================================================ */
.pt-sub {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  color: var(--text-secondary, #94a3b8);
  line-height: 1.7;
  max-width: 700px;
  margin: 1.7rem auto 0;
}
.pt-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  scroll-margin-top: 6rem;
  padding: 1rem 2.3rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.06rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: #fff;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--pt-grad-from), var(--pt-grad-to));
  box-shadow: 0 12px 34px -8px var(--pt-glow), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  cursor: pointer;
  animation: ptCtaPulse 2.8s ease-in-out infinite;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, filter 0.3s ease;
}
@keyframes ptCtaPulse {
  0%, 100% { transform: scale(1);     box-shadow: 0 12px 30px -12px var(--pt-glow), inset 0 1px 0 rgba(255,255,255,0.2); }
  50%      { transform: scale(1.035); box-shadow: 0 18px 44px -8px var(--pt-glow),  inset 0 1px 0 rgba(255,255,255,0.2); }
}
.pt-cta:hover {
  transform: scale(1.07);
  filter: brightness(1.07);
  box-shadow: 0 20px 52px -8px var(--pt-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  animation-play-state: paused;
}
.pt-cta:active { transform: scale(1.01); }
.pt-cta i { transition: transform 0.25s ease; }
.pt-cta:hover i { transform: translateX(4px); }
html[dir="rtl"] .pt-cta .fa-arrow-right { transform: scaleX(-1); }
html[dir="rtl"] .pt-cta:hover .fa-arrow-right { transform: scaleX(-1) translateX(4px); }
/* only the hero's own CTA needs the top gap; reused .pt-cta elsewhere (e.g. the
   secondary "open dashboard" band) sits flush inside its own layout */
.pt-hero > .pt-cta { margin-top: 1.9rem; }

/* ---- back-to-top button (product pages; colour injected from .pt-hero) ---- */
.pt-totop {
  position: fixed;
  right: 16px;            /* bottom-right — mirrors the bottom-left WhatsApp float */
  bottom: 72px;           /* same height as .wa-float, so it clears the cookie banner */
  z-index: 998;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  font-size: 1.15rem;
  background: linear-gradient(135deg, var(--pt-grad-from, #22d3ee), var(--pt-grad-to, #67e8f9));
  box-shadow: 0 10px 30px -6px var(--pt-glow, rgba(34,211,238,0.5));
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.85);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, visibility 0.3s;
}
.pt-totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.pt-totop:hover { transform: translateY(-3px) scale(1.1); box-shadow: 0 16px 40px -6px var(--pt-glow, rgba(34,211,238,0.6)); filter: brightness(1.07); }
@media (prefers-reduced-motion: reduce) {
  .pt-totop { transition: opacity 0.2s ease, visibility 0.2s; transform: none; }
  .pt-totop.is-visible { transform: none; }
}

/* ---- section eyebrow LABELS (.<ns>-section-label) ----
   These are decorative section headings, NOT buttons. An ambient shimmer + glow
   (with default cursor and no hover reaction) makes them read clearly different
   from the interactive .pt-eyebrow / .pt-cta buttons that lead somewhere. */
[class*="-section-label"] {
  position: relative;
  overflow: hidden;
  cursor: default;
  isolation: isolate;
  border-radius: 12px !important;   /* match the nav-bar pill shape (overrides per-page 50px) */
  font-size: 0.95rem !important;     /* bumped ~2 steps up from the per-page 0.78rem (user: too small) */
  padding: 0.5rem 1.15rem !important;
  letter-spacing: 0.2em !important;  /* a touch tighter so the larger text doesn't over-stretch */
  animation: ptLabelGlow 3.6s ease-in-out infinite;
}
[class*="-section-label"]::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: ptLabelSheen 4.8s ease-in-out infinite;
}
@keyframes ptLabelGlow {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50%      { box-shadow: 0 0 16px -3px var(--pt-accent, #22d3ee); }
}
@keyframes ptLabelSheen {
  0%        { left: -60%; }
  55%, 100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  [class*="-section-label"] { animation: none; }
  [class*="-section-label"]::after { display: none; }
}

/* placeholder (no slides yet) */
.pt-ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  background: radial-gradient(ellipse at 50% 35%, var(--pt-glow), transparent 60%), #0b0e14;
  color: var(--text-secondary, #94a3b8);
}
.pt-ph i { font-size: clamp(2.2rem, 5vw, 3rem); color: var(--pt-accent, #22d3ee); }
.pt-ph span { font-family: var(--font-display); letter-spacing: 0.12em; font-size: 0.8rem; text-transform: uppercase; opacity: 0.8; }

@media (prefers-reduced-motion: reduce) {
  .pt-slide, .pt-slide > img { transition: opacity 0.4s ease; transform: none !important; }
  .pt-h1, .pt-cta { animation: none; }
}

@media (max-width: 600px) {
  .pt-hero { padding: clamp(4rem, 12vh, 5rem) 1.1rem 3rem; }
  .pt-h1 .pt-line { display: block; }   /* 2 words top / 2 words bottom */
  .pt-stage { margin-top: 1.3rem; }
  .pt-tablet { padding: 9px; border-radius: 20px; }
  .pt-caps { min-height: 4em; }
  .pt-cta { padding: 0.9rem 1.8rem; font-size: 1rem; }
}