/* ============================================================
   Flexibee — landing page custom CSS
   "Cinematic Calendar OS" — dark, depth-cut, parallax
   Color tokens — kept in sync with index.html Tailwind extend
   ============================================================ */

:root {
  --ink:        #060918;
  --ink-800:    #0d1025;
  --ink-700:    #141832;
  --ink-600:    #1c2147;
  --bee:        #0050FF;
  --bee-dark:   #0040DD;
  --bee-cyan:   #00C2FF;
  --bee-purple: #7C3AED;
  --bee-pale:   #D0E2FF;
  --bee-foam:   #EBF2FF;

  /* Master easing curves — used for ALL motion to keep cinematic feel */
  --ease-cinema: cubic-bezier(0.16, 1, 0.3, 1);     /* hero snap, premium */
  --ease-glide:  cubic-bezier(0.65, 0, 0.35, 1);    /* section transitions */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* gentle overshoot */
  --ease-stage:  cubic-bezier(0.7, 0, 0.3, 1);      /* curtain reveal */
}

@property --grad-angle {
  syntax: '<angle>';
  initial-value: 180deg;
  inherits: false;
}
@property --shimmer {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: false;
}
@property --curtain {
  syntax: '<percentage>';
  initial-value: 100%;
  inherits: false;
}
@property --shine {
  syntax: '<percentage>';
  initial-value: 50%;
  inherits: false;
}

/* ============================================================
   Base
   ============================================================ */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  background: var(--ink);
}
body {
  background: var(--ink);
  color: #E5E7EB;
  font-family: 'Lato', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: rgba(0, 80, 255, 0.5); color: white; }

/* Custom scrollbar — minimal, premium. Thumb only visible while scrolling.
   No bright gradient — that read as a vertical "seam" on the right edge. */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.18); background-clip: padding-box; }
/* Firefox */
html { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.08) transparent; }

/* ============================================================
   Hero — full viewport with three.js canvas
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  overflow: hidden;
}

/* Old WebGL canvas — kept hidden for backward compat (JS still references it) */
#aurora-canvas { display: none; }

/* ============================================================
   HERO BACKGROUND — CSS-only premium drifting blobs.
   Replaces shader aurora. Linear/Vercel/Stripe-style:
   3 soft radial blobs (bee/cyan/purple) drift slowly +
   subtle dot grid + film grain + bottom fade.
   ============================================================ */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--ink);
}

/* Cinematic looping video — base layer, fills hero edge-to-edge.
   Darkened heavily so headline reads cleanly without fighting subject in the footage. */
.hero-bg__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.32) saturate(1.15) contrast(1.05) hue-rotate(-15deg);
  z-index: 0;
}
/* Color tint + readability scrim — pushes video toward brand blue,
   adds darker zone on left where headline lives. */
.hero-bg__video-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* left-side reading scrim */
    linear-gradient(90deg, rgba(6, 9, 24, 0.85) 0%, rgba(6, 9, 24, 0.6) 25%, rgba(6, 9, 24, 0.3) 50%, transparent 75%),
    /* top + bottom soft fade */
    linear-gradient(180deg, rgba(6, 9, 24, 0.7) 0%, transparent 25%, transparent 60%, rgba(6, 9, 24, 0.7) 100%),
    /* brand color wash */
    radial-gradient(ellipse 70% 60% at 30% 50%, rgba(0, 80, 255, 0.25), transparent 70%),
    radial-gradient(ellipse 50% 60% at 80% 30%, rgba(124, 58, 237, 0.18), transparent 70%);
}

.hero-bg__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  will-change: transform;
  z-index: 2;
  mix-blend-mode: screen;
}
.hero-bg__blob--bee {
  width: 60vw;
  height: 60vw;
  max-width: 900px;
  max-height: 900px;
  top: -20vh;
  left: -10vw;
  background: radial-gradient(circle, rgba(0, 80, 255, 0.55) 0%, rgba(0, 80, 255, 0) 70%);
  animation: blobDriftBee 22s ease-in-out infinite alternate;
}
.hero-bg__blob--cyan {
  width: 50vw;
  height: 50vw;
  max-width: 800px;
  max-height: 800px;
  bottom: -10vh;
  left: 5vw;
  background: radial-gradient(circle, rgba(0, 194, 255, 0.4) 0%, rgba(0, 194, 255, 0) 70%);
  animation: blobDriftCyan 28s ease-in-out infinite alternate;
}
.hero-bg__blob--purple {
  width: 45vw;
  height: 45vw;
  max-width: 700px;
  max-height: 700px;
  top: 10vh;
  left: 25vw;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.4) 0%, rgba(124, 58, 237, 0) 70%);
  animation: blobDriftPurple 34s ease-in-out infinite alternate;
}
@keyframes blobDriftBee {
  0%   { transform: translate(0, 0)        scale(1)   rotate(0deg); }
  100% { transform: translate(120px, 80px) scale(1.15) rotate(20deg); }
}
@keyframes blobDriftCyan {
  0%   { transform: translate(0, 0)        scale(1)   rotate(0deg); }
  100% { transform: translate(-90px, -60px) scale(1.2) rotate(-15deg); }
}
@keyframes blobDriftPurple {
  0%   { transform: translate(0, 0)         scale(0.9) rotate(0deg); }
  100% { transform: translate(60px, -100px) scale(1.1) rotate(25deg); }
}

/* Horizon line removed — read as a dividing seam, not an atmospheric detail */
.hero-bg__horizon { display: none; }

/* Subtle dot grid — gives geometric structure without competing with video */
.hero-bg__grid {
  position: absolute;
  inset: 0;
  z-index: 3;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 100%);
}

/* Film grain — barely perceptible, adds cinematic texture.
   SVG fractal noise inline so no extra HTTP request. */
.hero-bg__grain {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Bottom fade — clean handoff to next section, no hard seam.
   Higher z-index so it sits above the video and overlays. */
.hero-bg__bottom-fade {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 35%;
  z-index: 4;
  background: linear-gradient(180deg, transparent 0%, var(--ink) 100%);
}

/* Hero gets a soft top-down vignette so headline reads cleanly over blobs */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% 35%, transparent 0%, rgba(6, 9, 24, 0.4) 80%);
}

/* Page-load choreography for hero — staggered reveals */
.reveal-line {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.reveal-line > span {
  display: inline-block;
  transform: translateY(110%);
  animation: lineRise 1.1s var(--ease-cinema) forwards;
  animation-delay: var(--delay, 0s);
}
@keyframes lineRise {
  to { transform: translateY(0); }
}

.fade-in {
  opacity: 0;
  transform: translateY(16px);
  animation: fadeIn 1s var(--ease-cinema) forwards;
  animation-delay: var(--delay, 0s);
}
@keyframes fadeIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Hero calendar mock — floating, tilted, with depth
   ============================================================ */
.calendar-mock-stage {
  position: relative;
  perspective: 1800px;
  perspective-origin: 60% 50%;
}
.calendar-mock {
  position: relative;
  transform: rotateX(8deg) rotateY(-12deg) rotateZ(-2deg);
  transform-style: preserve-3d;
  transition: transform 1.2s var(--ease-cinema);
  opacity: 0;
  animation: panelEnter 1.4s var(--ease-cinema) 1.6s forwards;
  will-change: transform;
}
@keyframes panelEnter {
  from { opacity: 0; transform: rotateX(18deg) rotateY(-22deg) rotateZ(-4deg) translateX(80px); }
  to   { opacity: 1; transform: rotateX(8deg)  rotateY(-12deg) rotateZ(-2deg) translateX(0); }
}
.calendar-mock:hover {
  transform: rotateX(6deg) rotateY(-8deg) rotateZ(-1deg);
}

.glass {
  /* Pre-mixed background — no backdrop-filter so we don't trigger expensive
     repaints on every scroll/resize across multiple layered glass panels. */
  background:
    linear-gradient(180deg, rgba(28, 33, 71, 0.92) 0%, rgba(13, 16, 37, 0.96) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.06) inset,
    0 30px 60px -20px rgba(0, 0, 0, 0.6),
    0 60px 120px -40px rgba(0, 80, 255, 0.35);
}

/* Floating booking confirmation card — orbits the calendar */
.confirm-toast {
  position: absolute;
  top: -28px;
  right: -56px;
  transform: translateZ(80px) rotate(3deg);
  animation: float 6s ease-in-out infinite, panelEnter 1.4s var(--ease-cinema) 1.9s backwards;
}
@keyframes float {
  0%, 100% { transform: translateZ(80px) translateY(0) rotate(3deg); }
  50%      { transform: translateZ(80px) translateY(-8px) rotate(2deg); }
}

/* Hero CTA primary button — animated gradient stroke */
.btn-primary {
  position: relative;
  isolation: isolate;
  background: linear-gradient(var(--ink-800), var(--ink-800)) padding-box,
              conic-gradient(from var(--grad-angle), var(--bee-cyan), var(--bee), var(--bee-purple), var(--bee-cyan)) border-box;
  border: 1.5px solid transparent;
  animation: spinBorder 6s linear infinite;
}
@keyframes spinBorder {
  to { --grad-angle: 540deg; }
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--bee), var(--bee-purple));
  opacity: 0;
  transition: opacity .4s var(--ease-cinema);
  z-index: -1;
}
.btn-primary:hover::before { opacity: 1; }
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary { transition: transform .3s var(--ease-cinema); }

/* ============================================================
   Scroll-triggered reveal — generic, used by IntersectionObserver
   ============================================================ */
/* DRAMATIC SECTION ENTRY — fade-up + scale + slight blur, premium feel.
   Triggered by IntersectionObserver. Replaces the cine-transition sections —
   each section ENTERS with this animation, no separate transition runway. */
.reveal {
  opacity: 0;
  transform: translateY(60px) scale(0.97);
  filter: blur(6px);
  transition:
    opacity 1.1s var(--ease-cinema),
    transform 1.3s var(--ease-cinema),
    filter 0.9s var(--ease-cinema);
  transition-delay: var(--reveal-delay, 0s);
  will-change: transform, opacity, filter;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.reveal-x-left {
  opacity: 0;
  transform: translateX(-80px) scale(0.97);
  filter: blur(4px);
  transition:
    opacity 1.1s var(--ease-cinema),
    transform 1.3s var(--ease-cinema),
    filter 0.8s var(--ease-cinema);
}
.reveal-x-left.is-visible { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }

.reveal-x-right {
  opacity: 0;
  transform: translateX(80px) scale(0.97);
  filter: blur(4px);
  transition:
    opacity 1.1s var(--ease-cinema),
    transform 1.3s var(--ease-cinema),
    filter 0.8s var(--ease-cinema);
}
.reveal-x-right.is-visible { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }

/* (section-level entry removed — relying on per-element .reveal triggers) */

/* ============================================================
   PARALLAX BOUNDARY — between dark and light sections.
   Each .section-light gets a parallax band at its top edge that
   moves at different speed than scroll, creating depth on the
   dark→light handoff. JS sets --boundary-y based on scroll.
   ============================================================ */
.section-light {
  position: relative;
  /* allow boundary parallax band to extend above section */
  isolation: isolate;
}
.section-light::before {
  content: '';
  position: absolute;
  top: -120px;
  left: 0;
  right: 0;
  height: 240px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 80% at 50% 50%,
      rgba(0, 80, 255, 0.15) 0%,
      rgba(0, 194, 255, 0.08) 40%,
      transparent 80%);
  filter: blur(40px);
  transform: translateY(calc(var(--boundary-y, 0) * -0.4px));
  will-change: transform;
}
/* Same for transition INTO dark section after light (light → dark cut).
   Apply this to dark sections that follow a .section-light. */
.section-light + section:not(.section-light)::before,
.section-light + .cine-pin::before,
.section-light + .cta-band::before {
  content: '';
  position: absolute;
  top: -120px;
  left: 0;
  right: 0;
  height: 240px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 80% at 50% 50%,
      rgba(0, 194, 255, 0.18) 0%,
      rgba(0, 80, 255, 0.10) 40%,
      transparent 80%);
  filter: blur(40px);
  transform: translateY(calc(var(--boundary-y, 0) * 0.5px));
  will-change: transform;
}

/* Subtle horizontal line streaks at boundary — second parallax layer */
.section-light::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 194, 255, 0.4) 30%,
    rgba(0, 80, 255, 0.6) 50%,
    rgba(124, 58, 237, 0.4) 70%,
    transparent 100%);
  transform: translateX(calc(var(--boundary-y, 0) * 1.2px));
  filter: blur(1px);
}

/* Mask-curtain reveal — content seems to "develop" downward (cinematic) */
.reveal-mask {
  -webkit-mask-image: linear-gradient(180deg, black 0%, transparent 0%);
          mask-image: linear-gradient(180deg, black 0%, transparent 0%);
  transition: -webkit-mask-image 1.6s var(--ease-stage), mask-image 1.6s var(--ease-stage);
}
.reveal-mask.is-visible {
  -webkit-mask-image: linear-gradient(180deg, black 100%, transparent 100%);
          mask-image: linear-gradient(180deg, black 100%, transparent 100%);
}

/* ============================================================
   Marquee — infinite horizontal scroll of industries
   ============================================================ */
.marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
}
.marquee__track {
  display: flex;
  gap: 4rem;
  flex-shrink: 0;
  min-width: 100%;
  animation: marquee 40s linear infinite;
}
@keyframes marquee {
  to { transform: translateX(-100%); }
}
.marquee:hover .marquee__track {
  animation-play-state: paused;
}

/* ============================================================
   Industry cards — depth-cut photos with parallax + tilt
   ============================================================ */
.industry-card {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .8s var(--ease-cinema);
  isolation: isolate;
}
.industry-card:hover {
  transform: translateY(-8px);
}
.industry-card__bg {
  position: absolute;
  inset: -8%;
  background-size: cover;
  background-position: center;
  filter: brightness(0.55) saturate(1.1);
  transform: scale(1.0);
  transition: transform 1.4s var(--ease-cinema), filter .8s ease;
  /* depth-cut: feather photo edges into ink */
  -webkit-mask-image: radial-gradient(ellipse 75% 80% at 50% 45%, black 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 75% 80% at 50% 45%, black 30%, transparent 100%);
}
.industry-card:hover .industry-card__bg {
  transform: scale(1.08);
  filter: brightness(0.7) saturate(1.2);
}
.industry-card__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 40%, rgba(6,9,24,0.9) 100%),
    linear-gradient(0deg, var(--ink) 0%, transparent 50%);
}
.industry-card__content {
  position: relative;
  z-index: 2;
  padding: 2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.industry-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bee-cyan);
  margin-bottom: 0.6rem;
}
.industry-card__tag::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--bee-cyan);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--bee-cyan);
}
.industry-card__title {
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 1.875rem;
  line-height: 1;
  margin-bottom: 0.6rem;
  color: white;
}
.industry-card__desc {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.55;
  max-width: 28ch;
}
.industry-card__features {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0 0;
  display: grid;
  gap: 0.35rem;
}
.industry-card__features li {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.6);
  padding-left: 1rem;
  position: relative;
}
.industry-card__features li::before {
  content: '+';
  position: absolute;
  left: 0;
  color: var(--bee-cyan);
  font-weight: 600;
}

/* Industry card stagger animation */
.industry-grid > .industry-card {
  --reveal-delay: calc(var(--idx, 0) * 80ms);
}

/* Text-wrap: balance — wymusza ładne 2-liniowe nagłówki na desktop */
.headline,
.section-title,
h1.headline,
h2.section-title {
  text-wrap: balance;
  word-break: keep-all;
  hyphens: none;
}
/* text-balance utility (Tailwind nie ma jeszcze stable) */
.text-balance {
  text-wrap: balance;
}

/* ============================================================
   Mobile hamburger menu + drawer
   ============================================================ */
.mobile-hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: background 150ms;
}
.mobile-hamburger:hover {
  background: rgba(255, 255, 255, 0.08);
}
.mobile-hamburger__line {
  display: block;
  width: 18px;
  height: 2px;
  background: white;
  border-radius: 1px;
  position: relative;
  transition: background 200ms;
}
.mobile-hamburger__line::before,
.mobile-hamburger__line::after {
  content: '';
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: white;
  border-radius: 1px;
  transition: transform 250ms ease, top 200ms ease 100ms, bottom 200ms ease 100ms;
}
.mobile-hamburger__line::before { top: -6px; }
.mobile-hamburger__line::after  { bottom: -6px; }
[aria-expanded="true"] .mobile-hamburger__line {
  background: transparent;
}
[aria-expanded="true"] .mobile-hamburger__line::before {
  top: 0;
  transform: rotate(45deg);
  transition: top 200ms ease, transform 250ms ease 100ms;
}
[aria-expanded="true"] .mobile-hamburger__line::after {
  bottom: 0;
  transform: rotate(-45deg);
  transition: bottom 200ms ease, transform 250ms ease 100ms;
}

.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 380px;
  height: 100vh;
  height: 100dvh;
  background: linear-gradient(180deg, rgba(13, 16, 37, 0.98) 0%, rgba(6, 9, 24, 0.98) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  transform: translateX(100%);
  transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 200;
  overflow-y: auto;
  padding: 0;
}
.mobile-drawer.is-open {
  transform: translateX(0);
}
.mobile-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: sticky;
  top: 0;
  background: rgba(13, 16, 37, 0.98);
  backdrop-filter: blur(10px);
  z-index: 1;
}
.mobile-drawer__close {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: white;
}
.mobile-drawer__close:hover {
  background: rgba(255, 255, 255, 0.1);
}
.mobile-drawer__body {
  padding: 1.5rem;
}
.mobile-drawer__group {
  margin-bottom: 1.75rem;
}
.mobile-drawer__group-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.4);
  padding: 0 0.5rem;
  margin-bottom: 0.75rem;
}
.mobile-drawer__link {
  display: block;
  padding: 0.875rem 0.75rem;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 1rem;
  transition: background 150ms ease, color 150ms ease;
}
.mobile-drawer__link:hover,
.mobile-drawer__link:focus-visible {
  background: rgba(0, 194, 255, 0.08);
  color: white;
}
.mobile-drawer__link--cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, var(--bee-cyan), var(--bee), var(--bee-purple));
  color: white;
  font-weight: 500;
  margin-top: 1rem;
  padding: 1rem;
  box-shadow: 0 12px 32px -8px rgba(0, 80, 255, 0.5);
}
.mobile-drawer__link--cta:hover {
  background: linear-gradient(135deg, var(--bee-cyan), var(--bee), var(--bee-purple));
  filter: brightness(1.1);
}
.mobile-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 9, 24, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 300ms;
  z-index: 199;
}
.mobile-drawer-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
body.mobile-drawer-open {
  overflow: hidden;
}

/* Improve nav on mobile - tighter padding, hide CTA text */
@media (max-width: 768px) {
  .nav .max-w-7xl {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ============================================================
   Nav dropdown — mega menu z linkami do podstron
   ============================================================ */
.nav-dropdown {
  position: relative;
}
.nav-dropdown__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: transparent;
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  padding: 0;
}
.nav-dropdown__chev {
  transition: transform 200ms ease;
  opacity: 0.6;
}
.nav-dropdown:hover .nav-dropdown__chev,
.nav-dropdown:focus-within .nav-dropdown__chev {
  transform: rotate(180deg);
  opacity: 1;
}
.nav-dropdown__menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 320px;
  background: linear-gradient(180deg, rgba(20, 24, 50, 0.98) 0%, rgba(13, 16, 37, 0.98) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 0.5rem;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 80, 255, 0.08);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
  z-index: 100;
}
.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* Bridge — usuwa flicker między btn a menu */
.nav-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 16px;
}
.nav-dropdown__item {
  display: block;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.85);
  transition: background 150ms ease, color 150ms ease;
}
.nav-dropdown__item:hover {
  background: rgba(0, 194, 255, 0.08);
  color: white;
}
.nav-dropdown__title {
  display: block;
  font-family: 'Unbounded', sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
}
.nav-dropdown__desc {
  display: block;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 0.125rem;
  line-height: 1.4;
}
.nav-dropdown__item:hover .nav-dropdown__desc {
  color: rgba(255, 255, 255, 0.7);
}

/* "Zobacz więcej" link na kartach branżowych i feature cards */
.industry-card__link,
.feature-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  color: var(--bee-cyan);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: gap 200ms ease, color 200ms ease;
}
.industry-card__link:hover,
.feature-card__link:hover {
  color: white;
  gap: 0.875rem;
}

/* ============================================================
   Showcase calendar — 3-layer parallax scene
   ============================================================ */
.showcase-stage {
  position: relative;
  height: 120vh;
  isolation: isolate;
}
.showcase-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 80, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 80, 255, 0.07) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black, transparent);
          mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black, transparent);
  transform: translateY(var(--parallax-bg, 0px));
  will-change: transform;
}
.showcase-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 600px at 70% 30%, rgba(0, 194, 255, 0.18), transparent 60%),
    radial-gradient(circle 800px at 30% 70%, rgba(124, 58, 237, 0.15), transparent 60%);
  filter: blur(40px);
  transform: translateY(var(--parallax-mid, 0px));
}
.showcase-panel {
  transform: translateY(var(--parallax-panel, 0px)) rotateY(-8deg) rotateX(4deg);
  transform-style: preserve-3d;
  perspective: 1600px;
  will-change: transform;
}
.showcase-floating {
  transform: translateY(var(--parallax-fg, 0px)) translateZ(60px) rotate(-3deg);
  will-change: transform;
}

/* Time slot pulsing — "available right now" */
.slot-pulse {
  position: relative;
  animation: slotPulse 2.4s var(--ease-cinema) infinite;
}
@keyframes slotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 80, 255, 0.6); }
  50%      { box-shadow: 0 0 0 10px rgba(0, 80, 255, 0); }
}

/* ============================================================
   Feature cards — gradient borders, hover lift
   ============================================================ */
.feature-card {
  position: relative;
  padding: 2rem;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(20,24,50,0.6) 0%, rgba(13,16,37,0.4) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform .6s var(--ease-cinema), border-color .4s ease, background .4s ease;
  overflow: hidden;
  isolation: isolate;
}
.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 240px at var(--mx, 50%) var(--my, 50%), rgba(0, 80, 255, 0.18), transparent 60%);
  opacity: 0;
  transition: opacity .5s var(--ease-cinema);
  z-index: -1;
  pointer-events: none;
}
.feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 80, 255, 0.4);
}
.feature-card:hover::before { opacity: 1; }
.feature-card__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--bee) 0%, var(--bee-purple) 100%);
  margin-bottom: 1.4rem;
  box-shadow: 0 10px 30px -8px rgba(0, 80, 255, 0.5);
}

/* ============================================================
   Płatności — orbital scene
   ============================================================ */
.orbit-stage {
  position: relative;
  width: 640px;
  height: 640px;
  margin: 0 auto;
}
.orbit-ring {
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(0, 80, 255, 0.25);
  border-radius: 50%;
  animation: orbitSpin 60s linear infinite;
}
.orbit-ring--mid {
  inset: 18%;
  border-color: rgba(0, 194, 255, 0.2);
  animation-duration: 45s;
  animation-direction: reverse;
}
.orbit-ring--inner {
  inset: 36%;
  border-color: rgba(124, 58, 237, 0.25);
  animation-duration: 30s;
}
@keyframes orbitSpin {
  to { transform: rotate(360deg); }
}
.orbit-node {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90px;
  height: 90px;
  margin-left: -45px;
  margin-top: -45px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(20,24,50,0.95) 0%, rgba(13,16,37,1) 100%);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 22px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: white;
  text-align: center;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.6);
  transform: translate(var(--ox, 0px), var(--oy, 0px));
}
.orbit-node--center {
  width: 220px;
  height: 220px;
  margin-left: -110px;
  margin-top: -110px;
  background:
    radial-gradient(circle at 30% 20%, rgba(0, 194, 255, 0.3), transparent 50%),
    linear-gradient(180deg, var(--ink-700), var(--ink-800));
  font-size: 1rem;
  border-color: rgba(0, 194, 255, 0.3);
  flex-direction: column;
}

/* Counter-rotate node contents so they stay upright */
.orbit-ring > .orbit-node-wrap {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.orbit-ring > .orbit-node-wrap .orbit-node {
  position: relative;
  margin: 0;
  top: auto;
  left: auto;
}

/* ============================================================
   Pricing
   ============================================================ */
.pricing-card {
  position: relative;
  padding: 2.4rem 2rem;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(20,24,50,0.6) 0%, rgba(13,16,37,0.5) 100%);
  border: 1px solid rgba(255,255,255,0.07);
  transition: transform .5s var(--ease-cinema), border-color .4s ease;
}
.pricing-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 80, 255, 0.3);
}
.pricing-card--featured {
  border-color: rgba(0, 80, 255, 0.5);
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 80, 255, 0.25), transparent 60%),
    linear-gradient(180deg, rgba(20,24,50,0.8) 0%, rgba(13,16,37,0.6) 100%);
  /* tops aligned across all 3 plans — emphasis comes from glow, not displacement */
  box-shadow: 0 30px 80px -20px rgba(0, 80, 255, 0.45);
}
.pricing-card--featured::before {
  content: 'Polecane';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--bee-cyan), var(--bee));
  color: white;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  box-shadow: 0 10px 24px -6px rgba(0, 80, 255, 0.6);
}

/* ============================================================
   CTA section
   ============================================================ */
.cta-band {
  position: relative;
  padding: 6rem 0;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-700) 50%, var(--ink) 100%);
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 800px at 30% 50%, rgba(0, 80, 255, 0.25), transparent 60%),
    radial-gradient(circle 600px at 80% 50%, rgba(124, 58, 237, 0.18), transparent 60%);
  z-index: -1;
}
.cta-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 50% 60% at 50% 50%, black, transparent);
          mask-image: radial-gradient(ellipse 50% 60% at 50% 50%, black, transparent);
  z-index: -1;
}

/* ============================================================
   Section divider — mask transition between scenes
   ============================================================ */
.section-edge-top {
  position: relative;
}
.section-edge-top::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(180deg, var(--ink) 0%, transparent 100%);
  z-index: 5;
  pointer-events: none;
}
.section-edge-bottom::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(0deg, var(--ink) 0%, transparent 100%);
  z-index: 5;
  pointer-events: none;
}

/* ============================================================
   Nav — sticky with scroll-state
   ============================================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: backdrop-filter .4s ease, background .4s ease, border-color .4s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(6, 9, 24, 0.7);
  backdrop-filter: blur(20px) saturate(1.4);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.nav-link {
  position: relative;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.7);
  transition: color .3s var(--ease-cinema);
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 1px;
  background: var(--bee-cyan);
  transition: width .4s var(--ease-cinema);
}
.nav-link:hover { color: white; }
.nav-link:hover::after { width: 100%; }

/* ============================================================
   Scroll cue
   ============================================================ */
.scroll-cue {
  width: 24px;
  height: 40px;
  border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: 14px;
  position: relative;
}
.scroll-cue::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 8px;
  width: 2px;
  height: 8px;
  background: var(--bee-cyan);
  border-radius: 2px;
  transform: translateX(-50%);
  animation: scrollDot 2s var(--ease-cinema) infinite;
}
@keyframes scrollDot {
  0%   { transform: translate(-50%, 0); opacity: 1; }
  60%  { transform: translate(-50%, 16px); opacity: 0; }
  100% { opacity: 0; }
}

/* ============================================================
   Number counter eyebrow style
   ============================================================ */
.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bee-cyan);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--bee-cyan);
}

/* ============================================================
   Headline — Bricolage display
   ============================================================ */
.headline {
  font-family: 'Unbounded', sans-serif;
  font-variation-settings: 'wdth' 100, 'opsz' 96;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 0.95;
  color: white;
}
/* Accent words in headlines — HIGHLIGHTER MARK style.
   Text stays in parent color (always readable) but a colored band sits
   behind the lower 35% like a felt-pen marker stroke. Editorial / magazine
   feel, premium. No italic (Unbounded has no italic — synthesized slant
   looks broken), no gradient text-fill (was blending into bg).
   The band reads as accent without sacrificing legibility. */
.headline em,
.section-title em,
.gradient-text {
  font-style: normal;
  font-weight: 600;
  color: inherit;
  -webkit-text-fill-color: currentColor;
  background-image: linear-gradient(180deg,
    transparent 0%,
    transparent 62%,
    rgba(0, 194, 255, 0.55) 62%,
    rgba(0, 80, 255, 0.55) 92%,
    transparent 92%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-background-clip: border-box;
          background-clip: border-box;
  padding: 0 0.08em;
  margin: 0 -0.04em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.section-title {
  font-family: 'Unbounded', sans-serif;
  font-variation-settings: 'wdth' 95, 'opsz' 64;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: white;
}

/* ============================================================
   Helpers
   ============================================================ */
.glow-text {
  text-shadow: 0 0 40px rgba(0, 80, 255, 0.5);
}

/* (noise overlay removed — was hammering paint on resize) */
.noise { display: none; }

/* ============================================================
   Section transitions — cinematic curtain reveals between scenes
   ============================================================ */
section { position: relative; }

/* Removed scene-top/scene-bottom gradient bleed pseudo-elements.
   They overlapped with the hero-bg bottom fade + curtain reveals
   and read as visible horizontal seams on the page. */

/* ============================================================
   LIGHT/PASTEL SECTION VARIANT — alternates with dark sections
   for editorial rhythm (dark cinematic → light decision-making).
   ============================================================ */
.section-light {
  background: linear-gradient(180deg, #f8f5f0 0%, #ebf2ff 60%, #f8f5f0 100%);
  color: #1c2147;
  position: relative;
  isolation: isolate;
}
/* (Removed dark gradient shadows above/below light sections — they
   created an unwanted "shadow" band when paired with the cine-transitions
   that already handle the dark↔light handoff.) */

.section-light .section-title,
.section-light h2,
.section-light h3 { color: #060918; }
.section-light .eyebrow { color: var(--bee-dark); }
.section-light .eyebrow::before { background: var(--bee-dark); }
.section-light p { color: rgba(28, 33, 71, 0.7); }
.section-light strong { color: #060918; }
/* On light bg: scene number stays cleanly subtle — solid pale-blue tone,
   no gradient text-fill (was washing out / clashing on light). */
.section-light .scene-num {
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
  color: rgba(0, 80, 255, 0.10);
  -webkit-text-fill-color: rgba(0, 80, 255, 0.10);
  -webkit-text-stroke: 1px rgba(0, 80, 255, 0.18);
}
/* Highlighter on LIGHT bg — text dark, marker stripe deeper bee-blue */
.section-light .headline em,
.section-light .section-title em,
.section-light .gradient-text {
  color: #060918;
  -webkit-text-fill-color: #060918;
  background-image: linear-gradient(180deg,
    transparent 0%,
    transparent 62%,
    rgba(0, 80, 255, 0.32) 62%,
    rgba(0, 64, 221, 0.32) 92%,
    transparent 92%);
}

/* Pricing on light bg — white cards with pastel featured glow */
.section-light .pricing-card {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(6, 9, 24, 0.08);
  color: #1c2147;
  box-shadow: 0 4px 20px -10px rgba(6, 9, 24, 0.08);
}
.section-light .pricing-card .text-bee-cyan { color: var(--bee-dark); }
.section-light .pricing-card ul { color: rgba(28, 33, 71, 0.72); }
.section-light .pricing-card ul .text-white { color: #060918; }
.section-light .pricing-card .text-white { color: #060918; }
.section-light .pricing-card .text-white\/40 { color: rgba(28, 33, 71, 0.55); }
.section-light .pricing-card .text-white\/50 { color: rgba(28, 33, 71, 0.55); }
.section-light .pricing-card .text-white\/75,
.section-light .pricing-card .text-white\/85 { color: rgba(28, 33, 71, 0.78); }
.section-light .pricing-card--featured {
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 80, 255, 0.10), transparent 60%),
    linear-gradient(180deg, #ebf2ff 0%, #ffffff 100%);
  border-color: rgba(0, 80, 255, 0.4);
  box-shadow: 0 30px 80px -20px rgba(0, 80, 255, 0.25);
}
.section-light .pricing-card--featured::before {
  background: linear-gradient(90deg, var(--bee-cyan), var(--bee));
  color: white;
}
/* Buttons inside pricing on light bg — keep gradient primary, light secondary */
.section-light .pricing-card a.bg-white\/5 {
  background: white;
  border: 1px solid rgba(6, 9, 24, 0.12);
  color: #060918;
}
.section-light .pricing-card a.bg-white\/5:hover {
  background: #f3f0ea;
  border-color: rgba(0, 80, 255, 0.35);
}

/* FAQ accordion on light bg */
.section-light details {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(6, 9, 24, 0.08);
}
.section-light details:hover { border-color: rgba(0, 80, 255, 0.3); }
.section-light details summary span:first-child { color: #060918; }
.section-light details summary span:last-child {
  background: rgba(6, 9, 24, 0.05);
  color: var(--bee-dark);
}
.section-light details > div { color: rgba(28, 33, 71, 0.78); }

/* Industry cards on LIGHT bg — vivid full-color photos + white text on
   dark gradient veil at bottom. Cards POPCOLOR, not muddy desaturated. */
.section-light .industry-card {
  background: white;
  box-shadow:
    0 8px 40px -10px rgba(6, 9, 24, 0.20),
    0 2px 0 rgba(255, 255, 255, 0.8) inset;
  border: 1px solid rgba(6, 9, 24, 0.06);
  overflow: hidden;
}
.section-light .industry-card__bg {
  /* full color, sharp, no mask — photo is the hero */
  filter: brightness(1) saturate(1.2) contrast(1.08);
  -webkit-mask-image: none;
          mask-image: none;
}
.section-light .industry-card:hover .industry-card__bg {
  filter: brightness(1.05) saturate(1.3) contrast(1.1);
}
.section-light .industry-card__veil {
  /* dark gradient at bottom 60% for text legibility — photo speaks above */
  background:
    linear-gradient(180deg,
      transparent 0%,
      transparent 32%,
      rgba(6, 9, 24, 0.40) 55%,
      rgba(6, 9, 24, 0.78) 78%,
      rgba(6, 9, 24, 0.92) 100%);
}
.section-light .industry-card__title { color: white; text-shadow: 0 2px 12px rgba(0,0,0,0.4); }
.section-light .industry-card__desc { color: rgba(255, 255, 255, 0.88); }
.section-light .industry-card__features li { color: rgba(255, 255, 255, 0.75); }
.section-light .industry-card__features li::before { color: var(--bee-cyan); font-weight: 700; }
.section-light .industry-card__tag {
  color: var(--bee-dark);
  background: rgba(255, 255, 255, 0.95);
  padding: 5px 12px;
  border-radius: 999px;
  align-self: flex-start;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.section-light .industry-card__tag::before { background: var(--bee); box-shadow: 0 0 12px var(--bee); }

/* Feature cards on LIGHT bg */
.section-light .feature-card {
  background: linear-gradient(180deg, #ffffff 0%, rgba(235, 242, 255, 0.5) 100%);
  border-color: rgba(6, 9, 24, 0.08);
  box-shadow: 0 4px 24px -10px rgba(6, 9, 24, 0.1);
}
.section-light .feature-card:hover {
  border-color: rgba(0, 80, 255, 0.4);
  box-shadow: 0 12px 40px -10px rgba(0, 80, 255, 0.18);
}
.section-light .feature-card h3 { color: #060918; }
.section-light .feature-card p { color: rgba(28, 33, 71, 0.72); }
.section-light .feature-card__icon {
  background: linear-gradient(135deg, var(--bee-dark) 0%, var(--bee-purple) 100%);
  box-shadow: 0 8px 24px -8px rgba(0, 80, 255, 0.4);
}

/* Comparison Booksy/Flexibee on light bg variants */
.section-light .glass {
  background: white;
  border-color: rgba(6, 9, 24, 0.08);
  box-shadow: 0 4px 24px -10px rgba(6, 9, 24, 0.1);
  color: #1c2147;
}
.section-light .glass h3 { color: #060918; }
.section-light .glass ul { color: rgba(28, 33, 71, 0.72); }

/* (Old transition-band CSS removed — replaced by full cinematic
   .cine-transition with sticky scroll-pin + diagonal clip-path wipe
   + brand mark flying across the screen. See block below.) */

/* ============================================================
   CINEMATIC LIGHT⇄DARK TRANSITIONS — IRIS REVEAL through the brand mark.
   Logo is the source of light: a circular reveal opens through it,
   transitioning from outgoing color to incoming. Camera flash burst
   at midpoint. Quick (170vh runway = 70vh of pin).
   ============================================================ */
.cine-transition {
  position: relative;
  /* outer height = 200vh: 100vh sticky pin runway + 100vh natural exit.
     With JS math `p = -rect.top / outerH`, p=1 at scroll = O+200vh =
     next section visible. Animations rebased to finish by p=0.50
     (= end of pin), p=0.5→1 is natural exit during which next section
     scrolls in from below. */
  height: 200vh;
  z-index: 1;
  contain: paint;
}
/* Outer bg as a vertical gradient that matches OUTGOING at top and
   INCOMING at bottom. During sticky pin the bg is hidden by inner
   content; before/after pin the gradient blends with neighbouring
   sections so there's no „white empty" moment at entry. */
.cine-transition[data-trans="d2l"] {
  background: linear-gradient(180deg,
    var(--ink) 0%,
    var(--ink) 30%,
    #f8f5f0 70%,
    #ebf2ff 100%);
}
.cine-transition[data-trans="l2d"] {
  background: linear-gradient(180deg,
    #ebf2ff 0%,
    #f8f5f0 30%,
    var(--ink) 70%,
    var(--ink) 100%);
}
.cine-transition__inner {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.cine-transition__outgoing,
.cine-transition__incoming {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* OUTGOING (visible at p=0, fades by p=0.5) */
.cine-transition[data-trans="d2l"] .cine-transition__outgoing,
.cine-transition[data-trans="l2d"] .cine-transition__incoming {
  background:
    radial-gradient(ellipse 70% 50% at 50% 50%, rgba(0, 80, 255, 0.18), transparent 70%),
    var(--ink);
}
.cine-transition[data-trans="d2l"] .cine-transition__incoming,
.cine-transition[data-trans="l2d"] .cine-transition__outgoing {
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(0, 80, 255, 0.12), transparent 70%),
    linear-gradient(180deg, #f8f5f0 0%, #ebf2ff 100%);
}

/* IRIS REVEAL rebased to p=0.30→0.50 (after hero fades out, before pin ends).
   At p=0.5 iris is fully open = incoming color fills viewport. The natural
   exit (p=0.5→1) blends this end-state into the next section seamlessly. */
.cine-transition__incoming {
  z-index: 2;
  position: absolute;
  inset: 0;
  --ip: clamp(0, calc((var(--p, 0) - 0.30) * 5), 1);
  --r: calc(var(--ip) * 130vmax);
  clip-path: circle(var(--r) at 50% 50%);
  -webkit-clip-path: circle(var(--r) at 50% 50%);
}

/* CAMERA FLASH at p=0.30 — handoff between hero-text fade-out and iris start. */
.cine-transition__flash {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(circle 80vmin at 50% 50%, white 0%, rgba(255,255,255,0.7) 20%, transparent 60%);
  --fl: calc(max(0, 1 - abs(var(--p, 0) - 0.30) * 18));
  opacity: var(--fl);
  mix-blend-mode: screen;
}

/* BRAND MARK — protagonist at center of the iris.
   Scales from small (visible) → huge (covering screen at peak) → small (exits) */
.cine-transition__mark {
  position: relative;
  z-index: 5;
  width: 280px;
  height: 280px;
  pointer-events: none;
  /* scale curve: 0.6 → 1.6 → 0.6 (sin) */
  --mp: var(--p, 0);
  --scl: calc(0.6 + sin(var(--mp) * 3.14159) * 1.0);
  --rot: calc((var(--mp) - 0.5) * 720deg);
  transform: scale(var(--scl)) rotate(var(--rot));
  opacity: calc(min(var(--mp) * 8, 1) * (1 - max(0, var(--mp) - 0.92) * 12));
  filter: drop-shadow(0 0 40px rgba(0, 194, 255, 0.8))
          drop-shadow(0 30px 80px rgba(0, 80, 255, 0.7));
  will-change: transform, opacity;
}
.cine-transition__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* RINGS rebased to p=0.30→0.50 (concurrent with iris reveal). */
.cine-transition__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
  z-index: 3;
  pointer-events: none;
  border-radius: 50%;
  border: 2px solid rgba(0, 194, 255, 0.5);
  --rp: clamp(0, calc((var(--p, 0) - 0.30) * 5), 1);
  transform: translate(-50%, -50%) scale(calc(var(--rp) * 1500));
  opacity: calc(max(0, 1 - var(--rp) * 1.4));
}
.cine-transition__ring--2 {
  border-color: rgba(0, 80, 255, 0.4);
  --rp: clamp(0, calc((var(--p, 0) - 0.34) * 5.5), 1);
  transform: translate(-50%, -50%) scale(calc(var(--rp) * 1700));
}
.cine-transition__ring--3 {
  border-color: rgba(124, 58, 237, 0.35);
  --rp: clamp(0, calc((var(--p, 0) - 0.38) * 6), 1);
  transform: translate(-50%, -50%) scale(calc(var(--rp) * 1900));
}

/* CAPTION — eyebrow text appears at peak */
.cine-transition__caption {
  position: absolute;
  bottom: 10vh;
  left: 50%;
  z-index: 6;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  transform: translateX(-50%) translateY(calc((1 - sin(var(--p, 0) * 3.14159)) * 24px));
  opacity: calc(sin(var(--p, 0) * 3.14159));
}
.cine-transition__caption::before { content: '— '; color: var(--bee-cyan); }
.cine-transition__caption::after  { content: ' —'; color: var(--bee-cyan); }
/* On d2l, caption appears against incoming light bg in second half */
.cine-transition[data-trans="d2l"] .cine-transition__caption {
  color: rgba(6, 9, 24, 0.75);
}

/* HERO CONTENT — concrete value-prop card visible during the transition.
   Big number + short tagline. Replaces logo-as-protagonist with content-as-protagonist.
   Visible from p=0.18 to p=0.82 with peak at 0.5 (sin curve). */
.cine-transition__hero {
  position: relative;
  z-index: 8;
  text-align: center;
  pointer-events: none;
  --hp: var(--p, 0);
  /* READABILITY PLATEAU rebased to 0-0.5 range (animation finishes at p=0.5).
     Fade-in 0→0.08, hold opacity 1 from 0.08→0.28 (20% plateau = ~1.2s real scroll),
     fade-out 0.28→0.32. After p=0.32 hero invisible, iris takes over until p=0.5. */
  --hvis: clamp(0,
    min(
      calc(var(--hp) / 0.08),
      calc((0.32 - var(--hp)) / 0.04),
      1
    ),
    1);
  opacity: var(--hvis);
  transform: scale(calc(0.92 + var(--hvis) * 0.08));
  max-width: min(900px, 88vw);
  padding: 0 2rem;
}
.cine-transition__hero-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bee-cyan);
  margin-bottom: 1.2rem;
  display: inline-block;
}
.cine-transition__hero-eyebrow::before,
.cine-transition__hero-eyebrow::after {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--bee-cyan);
  vertical-align: middle;
  margin: 0 0.8rem;
}
.cine-transition__hero-title {
  font-family: 'Unbounded', sans-serif;
  font-weight: 800;
  font-size: clamp(5rem, 16vw, 16rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  background: linear-gradient(120deg, var(--bee-cyan) 0%, var(--bee) 50%, var(--bee-purple) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 60px rgba(0, 80, 255, 0.4));
  display: block;
  margin: 0;
}
.cine-transition__hero-sub {
  font-family: 'Unbounded', sans-serif;
  font-weight: 400;
  font-size: clamp(1.1rem, 2.2vw, 2rem);
  line-height: 1.3;
  margin-top: 1.4rem;
  color: rgba(255, 255, 255, 0.85);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
/* On d2l, sub becomes dark when bg is light */
.cine-transition[data-trans="d2l"] .cine-transition__hero-sub {
  color: rgba(6, 9, 24, calc(0.85 * (1 - var(--p, 0)) + 0.85 * var(--p, 0)));
  /* simpler: use dark color (works on both bgs since the gradient text is the protagonist) */
  color: rgba(28, 33, 71, 0.85);
}
.cine-transition[data-trans="l2d"] .cine-transition__hero-sub {
  color: rgba(255, 255, 255, 0.85);
}

/* MARK = Flexibee logo SVG (with native brand blue colors).
   Phase 1 (p=0 to 0.5): small in top-right corner during hero text phase
   Phase 2 (p=0.5 to 1): bursts to center, scales huge, rotates with iris reveal */
.cine-transition:has(.cine-transition__hero) .cine-transition__mark {
  position: absolute;
  width: 200px;
  height: 200px;
  z-index: 6;
  /* REBASED to 0-0.5 range. Phase 1: corner during hero plateau (p≤0.25).
     Phase 2: center burst during iris (p=0.30→0.50). */
  --p1-vis: calc(max(0, 1 - abs(var(--p, 0) - 0.15) * 8));
  --ip: clamp(0, calc((var(--p, 0) - 0.30) * 5), 1);
  --p2-vis: calc(max(0, 1 - abs(var(--ip) - 0.45) * 2.2));
  --in-corner: calc(1 - clamp(0, calc((var(--p, 0) - 0.25) * 20), 1));
  top:  calc(8vh + (50vh - 8vh - 100px) * (1 - var(--in-corner)));
  right: calc(6vw + (50vw - 6vw - 100px) * (1 - var(--in-corner)));
  --scl: calc(var(--in-corner) * (0.4 + var(--p1-vis) * 0.2)
             + (1 - var(--in-corner)) * (0.5 + var(--p2-vis) * 2.5));
  --rot: calc(var(--p, 0) * 1080deg);
  transform: scale(var(--scl)) rotate(var(--rot));
  opacity: calc(var(--in-corner) * var(--p1-vis) + (1 - var(--in-corner)) * var(--p2-vis));
  filter: drop-shadow(0 0 calc(20px + var(--p2-vis) * 60px) rgba(0, 194, 255, 0.7))
          drop-shadow(0 30px 60px rgba(0, 80, 255, 0.5));
  transition: none;
  will-change: transform, opacity, top, right;
}

/* Reduce on small screens */
@media (max-width: 900px) {
  .cine-transition { height: 130vh; }
  .cine-transition__mark { width: 180px; height: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  .cine-transition { height: 50vh; }
  .cine-transition__mark, .cine-transition__flash, .cine-transition__ring { display: none; }
}

/* (Wedge mask shadows above/below light sections also removed —
   was duplicating the cine-transition handoff. Clean section edges. */
.section-light::before, .section-light::after { content: none; }

/* Multi-speed parallax helpers — applied via JS subscribe() */
.parallax-slow  { transform: translate3d(0, calc(var(--py, 0) * 0.3px), 0); will-change: transform; }
.parallax-mid   { transform: translate3d(0, calc(var(--py, 0) * 0.6px), 0); will-change: transform; }
.parallax-fast  { transform: translate3d(0, calc(var(--py, 0) * 1.2px), 0); will-change: transform; }
.parallax-rev   { transform: translate3d(0, calc(var(--py, 0) * -0.5px), 0); will-change: transform; }
.section-light details > div strong { color: #060918; }

/* Reassurance row on light */
.section-light .text-white\/50 { color: rgba(28, 33, 71, 0.6); }
.section-light .text-bee-cyan { color: var(--bee-dark); }

/* SVG icons on light — change stroke color for inline icons that referenced #00C2FF */
.section-light svg[stroke="#00C2FF"] { stroke: var(--bee-dark); }

/* ============================================================
   CINEMATIC SECTION TRANSITIONS — premium scroll choreography
   ============================================================ */

/* Section number — huge outlined numeral, shimmers across as you scroll */
.scene-num {
  position: absolute;
  top: 5rem;
  right: 4rem;
  font-family: 'Unbounded', sans-serif;
  font-weight: 800;
  font-size: clamp(6rem, 16vw, 16rem);
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.07);
  pointer-events: none;
  z-index: 0;
  user-select: none;
  line-height: 0.85;
  background: linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(0, 194, 255, 0.4) calc(var(--shine, 50%) - 5%),
    rgba(0, 80, 255, 0.7) var(--shine, 50%),
    rgba(124, 58, 237, 0.4) calc(var(--shine, 50%) + 5%),
    rgba(255,255,255,0) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  /* fall back outline visible when shine isn't covering */
  -webkit-text-fill-color: transparent;
}

/* Big curtain reveal — section materializes top-down as IO triggers reveal.
   Initial state: --curtain 0% (hidden). On `.is-revealed` → 100% (visible).
   Uses @property so the percentage transitions smoothly via CSS, no scroll JS. */
.curtain-reveal {
  position: relative;
  --curtain: 0%;
  opacity: 0;
  transform: translateY(120px) scale(0.96);
  filter: blur(10px);
  -webkit-mask-image: linear-gradient(180deg,
    black 0%,
    black var(--curtain),
    transparent var(--curtain),
    transparent 100%);
          mask-image: linear-gradient(180deg,
    black 0%,
    black var(--curtain),
    transparent var(--curtain),
    transparent 100%);
  transition:
    --curtain 1.8s var(--ease-cinema),
    opacity 1.4s var(--ease-cinema),
    transform 2.0s var(--ease-cinema),
    filter 1.6s var(--ease-cinema);
  will-change: transform, filter, opacity;
}
.curtain-reveal.is-revealed {
  --curtain: 100%;
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}
/* No-flash: when JS hasn't loaded, curtain stays at 0% — prevent unstyled
   black until JS attaches. So we mark sections .is-revealed by default and
   only remove the class once JS loads (handled by `.no-js` toggle pattern).
   Simplest fallback — if reduced motion is preferred, skip the reveal. */
@media (prefers-reduced-motion: reduce) {
  .curtain-reveal { --curtain: 100%; transition: none; }
}

/* Velocity-driven blur — applied when user scrolls fast */
.velocity-blur {
  filter: blur(var(--vel, 0px));
  transition: filter .15s linear;
}

/* Sticky pin — for the kalendarz scene, content stays in place
   while scroll progress drives transformations */
.pin-stage {
  position: relative;
  height: 220vh; /* outer container is tall — gives us scroll runway */
}
.pin-stage__inner {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Headline word splits — each word rises with stagger
   (used by JS to wrap each .word in span) */
.split-words .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.split-words .word > span {
  display: inline-block;
  transform: translateY(110%) rotate(6deg);
  opacity: 0;
  transition: transform 1.1s var(--ease-cinema), opacity .6s linear;
  transition-delay: calc(var(--word-i, 0) * 60ms);
  will-change: transform;
}
.split-words.is-visible .word > span {
  transform: translateY(0) rotate(0);
  opacity: 1;
}

/* Photo cinematic enter — image scales/rotates as it scrolls into view */
.cine-photo {
  transform-origin: center;
  transform: scale(1.15) translateY(40px);
  filter: brightness(0.5) blur(4px);
  transition: transform 1.6s var(--ease-cinema), filter 1.4s var(--ease-cinema);
}
.cine-photo.is-visible {
  transform: scale(1) translateY(0);
  filter: brightness(0.65) blur(0);
}

/* Section "shimmer line" — thin gradient streak that travels down between scenes */
.shimmer-line {
  position: absolute;
  left: 50%;
  width: 1px;
  height: 100px;
  background: linear-gradient(180deg, transparent, var(--bee-cyan), transparent);
  transform: translateX(-50%);
  opacity: 0.6;
  pointer-events: none;
  z-index: 6;
}
.shimmer-line.shimmer-line--top    { top: -50px; }
.shimmer-line.shimmer-line--bottom { bottom: -50px; }

/* Section frame — pulsing corner brackets like cinematic camera framing */
.cine-frame::before,
.cine-frame::after {
  content: '';
  position: absolute;
  width: 80px;
  height: 80px;
  border: 1px solid rgba(0, 194, 255, 0.15);
  pointer-events: none;
  z-index: 1;
}
.cine-frame::before { top: 32px; left: 32px; border-right: 0; border-bottom: 0; }
.cine-frame::after  { bottom: 32px; right: 32px; border-left: 0; border-top: 0; }

/* ============================================================
   APPLE-STYLE STICKY SCRUB — "Logo Flight" scene
   400vh tall runway → sticky inner stays in viewport → contents
   transform via --p (0…1) representing scroll progress.
   Subject (logo / calendar) does 4 keyframe stops.
   Background images crossfade. Big copy lerps in/out.
   ============================================================ */
.logo-flight {
  position: relative;
  height: 400vh;
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-800) 50%, var(--ink) 100%);
  /* NO overflow:hidden here — it would break the sticky child below */
}
.logo-flight__inner {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;            /* clip child transforms to viewport */
  isolation: isolate;
}

/* Background image stack — 3 layers crossfade by progress */
.logo-flight__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}
.logo-flight__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* mask-image breaks the photo into a circle that scales with progress */
  -webkit-mask-image: radial-gradient(circle calc(20% + var(--lf-mask, 0%) * 1.2) at 50% 50%, black, transparent);
          mask-image: radial-gradient(circle calc(20% + var(--lf-mask, 0%) * 1.2) at 50% 50%, black, transparent);
  filter: brightness(0.55) saturate(1.05);
  opacity: 0;
  transform: scale(calc(1.15 + var(--lf-scale-bg, 0) * 0.15));
  transition: opacity .9s var(--ease-cinema);
}
.logo-flight__bg-img.is-active { opacity: 1; }

.logo-flight__veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, transparent 0%, rgba(6, 9, 24, 0.6) 70%, var(--ink) 100%),
    linear-gradient(180deg, transparent 50%, var(--ink) 100%);
  z-index: 1;
}

/* Particle dust floating in scene — pure CSS dots */
.logo-flight__dust {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(0,194,255,0.4), transparent),
    radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 80% 20%, rgba(0,80,255,0.4), transparent),
    radial-gradient(1px 1px at 30% 80%, rgba(124,58,237,0.4), transparent),
    radial-gradient(1px 1px at 70% 50%, rgba(0,194,255,0.3), transparent);
  background-size: 200px 200px, 300px 300px, 250px 250px, 220px 220px, 180px 180px;
  z-index: 0;
  opacity: 0.7;
  animation: dustDrift 60s linear infinite;
}
@keyframes dustDrift {
  to { background-position: 200px 100px, -300px 150px, 250px -250px, -220px 220px, 100px -180px; }
}

/* Subject — logo / calendar that rotates and translates */
.logo-flight__subject {
  position: relative;
  z-index: 5;
  width: 280px;
  height: 280px;
  transform-style: preserve-3d;
  transform:
    translate(var(--lf-x, 0vw), var(--lf-y, 0vh))
    rotate3d(0.3, 1, 0.1, var(--lf-rot, 0deg))
    scale(var(--lf-scale, 1));
  will-change: transform;
  filter: drop-shadow(0 30px 60px rgba(0, 80, 255, 0.4));
}
.logo-flight__icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: var(--lf-icon-op, 1);
  transition: opacity .8s var(--ease-cinema);
}
/* small calendar panel that crossfades with icon mid-flight */
.logo-flight__panel {
  position: absolute;
  inset: -40px -100px;
  background: linear-gradient(180deg, rgba(28, 33, 71, 0.95) 0%, rgba(13, 16, 37, 0.98) 100%);
  border: 1px solid rgba(0, 194, 255, 0.25);
  border-radius: 24px;
  padding: 1.2rem;
  opacity: var(--lf-panel-op, 0);
  transition: opacity 1s var(--ease-cinema);
  display: grid;
  place-items: center;
  box-shadow: 0 30px 80px -10px rgba(0, 80, 255, 0.5);
}
.logo-flight__panel-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  width: 100%;
  max-width: 420px;
}
.logo-flight__panel-cell {
  aspect-ratio: 1;
  border-radius: 4px;
  background: rgba(255,255,255,0.05);
}
.logo-flight__panel-cell--active {
  background: linear-gradient(135deg, var(--bee-cyan), var(--bee));
  box-shadow: 0 0 20px rgba(0, 194, 255, 0.6);
}

/* Big copy — 3 stages that fade in/out by progress */
.logo-flight__copy {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  text-align: center;
  max-width: 900px;
  left: 50%;
  transform: translateX(-50%) translateY(24px);
  padding: 0 2rem;
  opacity: 0;
  transition: opacity 0.55s var(--ease-cinema), transform 0.7s var(--ease-cinema);
  width: 100%;
}
.logo-flight__copy.is-active { opacity: 1; transform: translateX(-50%) translateY(0); }
.logo-flight__copy h2 {
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: clamp(2.5rem, 7vw, 6.5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: white;
}
.logo-flight__copy h2 em {
  font-style: normal;
  font-weight: 600;
  color: white;
  -webkit-text-fill-color: white;
  background-image: linear-gradient(180deg,
    transparent 0%, transparent 62%,
    rgba(0, 194, 255, 0.55) 62%, rgba(0, 80, 255, 0.55) 92%,
    transparent 92%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-background-clip: border-box;
          background-clip: border-box;
  padding: 0 0.08em;
  margin: 0 -0.04em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.logo-flight__copy p {
  margin-top: 1.5rem;
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.logo-flight__copy--1 { top: 14vh; }
.logo-flight__copy--2 { bottom: 14vh; transform: translateX(-50%) translateY(24px); }
.logo-flight__copy--2.is-active { transform: translateX(-50%) translateY(0); }
.logo-flight__copy--3 { top: 50%; transform: translateX(-50%) translateY(calc(-50% + 24px)); }
.logo-flight__copy--3.is-active { transform: translateX(-50%) translateY(-50%); }

/* Progress indicator — vertical bar showing scrub position */
.logo-flight__progress {
  position: absolute;
  right: 4rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 240px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  z-index: 8;
}
.logo-flight__progress::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(var(--lf-p, 0) * 100%);
  background: linear-gradient(180deg, var(--bee-cyan), var(--bee), var(--bee-purple));
  border-radius: inherit;
  transition: height .1s linear;
}

/* ============================================================
   REUSABLE CINEMA TRANSITION — drop between two sections.
   250vh runway. Single bg image. 2 text stages cross-drift.
   Cheaper than logo-flight (no morph, no orbital ring) but
   still uses sticky scroll-pin scrub for the cinematic feel.
   ============================================================ */
.cine-pin {
  position: relative;
  height: 250vh;
  background: var(--ink);
}
.cine-pin__inner {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}
.cine-pin__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.4) saturate(1.15);
  /* mask: starts as small ellipse, expands to full as p→1, then fades back at end */
  --mask-r: calc(15% + min(var(--p, 0), 0.7) * 95%);
  -webkit-mask-image: radial-gradient(ellipse var(--mask-r) var(--mask-r) at 50% 50%, black 0%, transparent 100%);
          mask-image: radial-gradient(ellipse var(--mask-r) var(--mask-r) at 50% 50%, black 0%, transparent 100%);
  /* slow zoom-out and gentle pan as we scroll through */
  transform:
    scale(calc(1.35 - var(--p, 0) * 0.25))
    translateX(calc(var(--p, 0) * -3vw))
    rotate(calc(var(--p, 0) * -1.5deg));
  z-index: 0;
}
.cine-pin__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, transparent 0%, rgba(6, 9, 24, 0.5) 70%, var(--ink) 100%),
    linear-gradient(180deg, var(--ink) 0%, transparent 12%, transparent 88%, var(--ink) 100%);
  z-index: 1;
}
.cine-pin__copy {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 1100px;
  padding: 0 2rem;
  pointer-events: none;
}
.cine-pin__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bee-cyan);
  /* eyebrow drifts in early then out */
  opacity: calc(1 - max(0, var(--p, 0) - 0.2) * 1.5);
  transform: translateY(calc((var(--p, 0) - 0.1) * -50px));
}
.cine-pin__eyebrow::before {
  content: '';
  width: 32px; height: 1px;
  background: var(--bee-cyan);
}
.cine-pin__t1, .cine-pin__t2 {
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: clamp(2.5rem, 8vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: white;
  display: block;
}
/* HARD GAP timing: T1 fully visible 0.10–0.40, fades out by 0.45.
   T2 fully visible 0.55–0.85, starts fading in at 0.50. 0.45–0.50 = empty
   stage (5% gap) — no „mush" of two stacked headlines simultaneously visible. */
.cine-pin__t1 {
  --vis: calc(min(max(0, var(--p, 0) - 0.05) * 6.66, 1) * max(0, 1 - max(0, var(--p, 0) - 0.40) * 20));
  opacity: var(--vis);
  transform: translateY(calc((var(--p, 0) - 0.25) * 50px));
  filter: blur(calc((1 - var(--vis)) * 4px));
}
.cine-pin__t2 {
  font-style: normal;
  font-weight: 600;
  color: white;
  -webkit-text-fill-color: white;
  background-image: linear-gradient(180deg,
    transparent 0%, transparent 62%,
    rgba(0, 194, 255, 0.55) 62%, rgba(0, 80, 255, 0.55) 92%,
    transparent 92%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-background-clip: border-box;
          background-clip: border-box;
  padding: 0 0.08em;
  margin: 0.4rem -0.04em 0;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  --vis: calc(min(max(0, var(--p, 0) - 0.50) * 20, 1) * max(0, 1 - max(0, var(--p, 0) - 0.90) * 10));
  opacity: var(--vis);
  transform: translateY(calc((var(--p, 0) - 0.75) * 50px));
  filter: blur(calc((1 - var(--vis)) * 4px));
}

/* Scroll progress — small horizontal indicator at bottom */
.cine-pin__progress {
  position: absolute;
  bottom: 4rem;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  z-index: 4;
}
.cine-pin__progress::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: calc(var(--p, 0) * 100%);
  background: linear-gradient(90deg, var(--bee-cyan), var(--bee));
}

/* ============================================================
   CINE-PIN UNIQUE TRANSITIONS — 4 modifier variants.
   Each scene uses a different brand motif + direction of motion.
   All driven by parent --p (0…1) set by JS scroll subscriber.
   ============================================================ */
.cine-pin__decor {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* ---------- 01→02: CLIENTS LEFT → RIGHT ----------
   3 avatar circles travel from off-screen left to a calendar target on right */
.cine-pin--clients .cp-avatar {
  position: absolute;
  top: 50%;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bee-cyan), var(--bee));
  display: grid;
  place-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.03em;
  color: white;
  text-align: center;
  line-height: 1;
  box-shadow: 0 0 40px rgba(0, 80, 255, 0.5), 0 10px 30px rgba(0, 0, 0, 0.4);
  /* per-avatar offset (set via :nth-child) — clamp 0…1 */
  --offset: max(0, min(1, calc((var(--p, 0) - var(--start, 0)) * 2.2)));
  left: calc(-12vw + var(--offset) * 100vw);
  transform: translateY(-50%) scale(calc(0.85 + var(--offset) * 0.15));
  opacity: calc(min(var(--offset) * 4, 1) * max(0, 1 - max(0, var(--offset) - 0.85) * 6));
}
.cine-pin--clients .cp-avatar:nth-of-type(1) { --start: 0.05; }
.cine-pin--clients .cp-avatar:nth-of-type(2) { --start: 0.15; }
.cine-pin--clients .cp-avatar:nth-of-type(3) { --start: 0.25; }
.cine-pin--clients .cp-target {
  position: absolute;
  top: 50%;
  right: 8vw;
  width: 130px;
  height: 130px;
  transform: translateY(-50%);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(28, 33, 71, 0.95) 0%, rgba(13, 16, 37, 0.98) 100%);
  border: 1px solid rgba(0, 194, 255, 0.4);
  display: grid;
  place-items: center;
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 4rem;
  color: white;
  --tvis: max(0, min(1, calc((var(--p, 0) - 0.55) * 4)));
  opacity: var(--tvis);
  box-shadow: 0 0 80px rgba(0, 194, 255, calc(var(--tvis) * 0.5));
}
.cine-pin--clients .cp-target::before {
  content: 'ŚR · 18 LIS';
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: var(--bee-cyan);
  white-space: nowrap;
}

/* ---------- 02→03: CLICKS TOP → BOTTOM ----------
   3 click-rings cascade downward, then a final ✓ confirmation */
.cine-pin--clicks .cp-click {
  position: absolute;
  left: 50%;
  width: 110px;
  height: 110px;
  margin-left: -55px;
  border: 2px solid rgba(0, 194, 255, 0.4);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--bee-cyan);
  --offset: max(0, min(1, calc((var(--p, 0) - var(--start, 0)) * 2.5)));
  top: calc(-15vh + var(--offset) * 80vh);
  opacity: calc(min(var(--offset) * 4, 1) * max(0, 1 - max(0, var(--offset) - 0.8) * 5));
  box-shadow: 0 0 30px rgba(0, 194, 255, calc(var(--offset) * 0.3));
}
.cine-pin--clicks .cp-click::after {
  content: '';
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(0, 194, 255, 0.2);
  border-radius: 50%;
  animation: clickRipple 2.4s ease-out infinite;
}
@keyframes clickRipple {
  to { transform: scale(1.3); opacity: 0; }
}
.cine-pin--clicks .cp-click:nth-of-type(1) { --start: 0.03; left: 30%; }
.cine-pin--clicks .cp-click:nth-of-type(2) { --start: 0.13; left: 50%; }
.cine-pin--clicks .cp-click:nth-of-type(3) { --start: 0.23; left: 70%; }
.cine-pin--clicks .cp-finish {
  position: absolute;
  left: 50%;
  bottom: 12vh;
  width: 100px;
  height: 100px;
  margin-left: -50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bee-cyan), var(--bee));
  display: grid;
  place-items: center;
  --tvis: max(0, min(1, calc((var(--p, 0) - 0.55) * 4)));
  opacity: var(--tvis);
  transform: scale(calc(0.6 + var(--tvis) * 0.4));
  box-shadow: 0 0 60px rgba(0, 80, 255, calc(var(--tvis) * 0.6));
}
.cine-pin--clicks .cp-finish::before {
  content: '✓';
  font-size: 3rem;
  font-weight: 700;
  color: white;
}

/* ---------- 03→04: COINS RIGHT → LEFT (gateway → your bank) ----------
   Coins fly from a "PayU/P24" gateway box on the right to a "konto firmowe" on left */
.cine-pin--money .cp-source {
  position: absolute;
  right: 8vw;
  top: 50%;
  transform: translateY(-50%);
  padding: 1rem 1.4rem;
  border-radius: 14px;
  background: rgba(28, 33, 71, 0.85);
  border: 1px solid rgba(0, 194, 255, 0.25);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  color: white;
  letter-spacing: 0.05em;
  --svis: max(0, min(1, calc(1 - max(0, var(--p, 0) - 0.7) * 3)));
  opacity: var(--svis);
}
.cine-pin--money .cp-source::before {
  content: 'BRAMKA';
  display: block;
  font-size: 0.55rem;
  color: var(--bee-cyan);
  letter-spacing: 0.18em;
  margin-bottom: 0.3rem;
}
.cine-pin--money .cp-target {
  position: absolute;
  left: 8vw;
  top: 50%;
  transform: translateY(-50%);
  padding: 1.2rem 1.6rem;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(0, 80, 255, 0.2), rgba(0, 80, 255, 0.05));
  border: 1px solid rgba(0, 80, 255, 0.5);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.95rem;
  color: white;
  letter-spacing: 0.05em;
  font-weight: 600;
  --tvis: max(0, min(1, calc((var(--p, 0) - 0.20) * 4)));
  opacity: var(--tvis);
  box-shadow: 0 0 60px rgba(0, 80, 255, calc(var(--tvis) * 0.4));
}
.cine-pin--money .cp-target::before {
  content: 'TWOJE KONTO';
  display: block;
  font-size: 0.55rem;
  color: var(--bee-cyan);
  letter-spacing: 0.18em;
  margin-bottom: 0.3rem;
  font-weight: 400;
}
.cine-pin--money .cp-coin {
  position: absolute;
  top: 50%;
  width: 64px;
  height: 64px;
  margin-top: -32px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffd76b, #c98a1a 70%);
  display: grid;
  place-items: center;
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: #3d2400;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), inset 0 -3px 6px rgba(120, 70, 0, 0.5);
  --offset: max(0, min(1, calc((var(--p, 0) - var(--start, 0)) * 2.5)));
  /* travel right (84vw) → left (16vw) */
  left: calc(84vw - var(--offset) * 68vw);
  opacity: calc(min(var(--offset) * 4, 1) * max(0, 1 - max(0, var(--offset) - 0.85) * 6));
  /* parabolic arc up: peak at offset=0.5 (rises 40px), 0 at endpoints — no CSS sin() */
  --arc: calc(var(--offset) * (1 - var(--offset)) * -160px);
  transform: translateY(calc(-32px + var(--arc))) rotate(calc(var(--offset) * 720deg));
}
.cine-pin--money .cp-coin:nth-of-type(1) { --start: 0.06; }
.cine-pin--money .cp-coin:nth-of-type(2) { --start: 0.16; }
.cine-pin--money .cp-coin:nth-of-type(3) { --start: 0.26; }

/* ---------- 04→05: CONVERGE FROM 4 CORNERS ----------
   4 chips fly from corners to center, where final "100% Twoje" emerges */
.cine-pin--converge .cp-chip {
  position: absolute;
  width: 108px;
  height: 64px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(28, 33, 71, 0.95), rgba(13, 16, 37, 0.98));
  border: 1px solid rgba(0, 194, 255, 0.3);
  display: grid;
  place-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 0.85rem;
  color: white;
  --offset: max(0, min(1, calc((var(--p, 0) - var(--start, 0)) * 2.5)));
  --x-from: 0vw;
  --y-from: 0vh;
  /* center destination: 50% / 50% — chip animates from corner toward center */
  left: calc(50% - 54px + (1 - var(--offset)) * var(--x-from));
  top: calc(50% - 32px + (1 - var(--offset)) * var(--y-from));
  opacity: calc(min(var(--offset) * 5, 1) * max(0, 1 - max(0, var(--offset) - 0.7) * 3.3));
  transform: scale(calc(0.7 + var(--offset) * 0.3));
}
.cine-pin--converge .cp-chip:nth-of-type(1) { --start: 0.05; --x-from: -42vw; --y-from: -28vh; }
.cine-pin--converge .cp-chip:nth-of-type(2) { --start: 0.10; --x-from:  42vw; --y-from: -28vh; }
.cine-pin--converge .cp-chip:nth-of-type(3) { --start: 0.15; --x-from: -42vw; --y-from:  28vh; }
.cine-pin--converge .cp-chip:nth-of-type(4) { --start: 0.20; --x-from:  42vw; --y-from:  28vh; }
.cine-pin--converge .cp-final {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: clamp(3rem, 6vw, 5rem);
  background: linear-gradient(120deg, var(--bee-cyan), var(--bee), var(--bee-purple));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
  letter-spacing: -0.02em;
  --fvis: max(0, min(1, calc((var(--p, 0) - 0.50) * 4)));
  opacity: var(--fvis);
}
.cine-pin--converge .cp-final::after {
  content: '';
  position: absolute;
  inset: -40%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 80, 255, 0.3), transparent 60%);
  z-index: -1;
  opacity: var(--fvis);
}

/* Reduced motion — respect user preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}