/* SaaS Landing — dark premium (Stripe/Linear vibe) */



*,

*::before,

*::after {

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

}



body.lp {

  margin: 0;

  min-height: 100vh;

  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  font-size: 16px;

  line-height: 1.6;

  color: #e4e4e7;

  background: linear-gradient(180deg, #08080f 0%, #050508 38%, #050508 100%);

  -webkit-font-smoothing: antialiased;

}



body.nav-open {

  overflow: hidden;

}



/* Tylko opacity — transform na .lp-nav psuje position:fixed dzieci (menu mobilne „w nagłówku”) */

@keyframes lp-nav-in {

  from {

    opacity: 0;

  }

  to {

    opacity: 1;

  }

}



@keyframes lp-rise {

  from {

    opacity: 0;

    transform: translateY(14px);

  }

  to {

    opacity: 1;

    transform: none;

  }

}



/* Wyraźniejszy „wjazd” pojedynczych kart / kafli przy scrollu */

@keyframes lp-card-emerge {

  from {

    opacity: 0;

    transform: translate3d(0, 28px, 0);

  }

  to {

    opacity: 1;

    transform: translate3d(0, 0, 0);

  }

}



@keyframes lp-section-head-in {

  from {

    opacity: 0;

    transform: translate3d(0, 18px, 0);

  }

  to {

    opacity: 1;

    transform: none;

  }

}



a {

  color: inherit;

  text-decoration: none;

}



img {

  max-width: 100%;

  height: auto;

  display: block;

}



/* Ambient — smooth wash (no film grain / turbulence) */

.lp-noise {

  pointer-events: none;

  position: fixed;

  inset: 0;

  z-index: 0;

  opacity: 1;

  background:

    radial-gradient(ellipse 120% 70% at 50% -15%, rgba(var(--brand-rgb), 0.14), transparent 52%),

    radial-gradient(ellipse 55% 45% at 92% 35%, rgba(99, 102, 241, 0.07), transparent 50%),

    radial-gradient(ellipse 40% 50% at 8% 55%, rgba(255, 255, 255, 0.03), transparent 45%);

}



.lp-grid {

  pointer-events: none;

  position: fixed;

  inset: 0;

  z-index: 0;

  background-image:

    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),

    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);

  background-size: 88px 88px;

  mask-image: radial-gradient(ellipse 85% 65% at 50% 0%, black 12%, transparent 78%);

  opacity: 0.32;

}



.lp-glow {

  pointer-events: none;

  position: absolute;

  border-radius: 50%;

  filter: blur(80px);

  opacity: 0.35;

}



.lp-wrap {

  position: relative;

  z-index: 1;

  overflow-x: clip;

}



.container {

  width: min(1160px, 100% - 2.5rem);

  margin-inline: auto;

}



/* Typography */

.eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  font-size: 0.75rem;

  font-weight: 600;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: #a1a1aa;

  margin: 0 0 1rem;

}



.eyebrow::before {

  content: "";

  width: 24px;

  height: 1px;

  background: linear-gradient(90deg, transparent, rgba(var(--brand-rgb), 0.8));

}



h1,

h2,

h3 {

  font-weight: 600;

  letter-spacing: -0.02em;

  line-height: 1.15;

  color: #fafafa;

}



h1 {

  font-size: clamp(2.25rem, 4.5vw, 3.25rem);

  margin: 0 0 1.25rem;

}



h2 {

  font-size: clamp(1.75rem, 3vw, 2.25rem);

  margin: 0 0 0.75rem;

}



h3 {

  font-size: 1.05rem;

  margin: 0 0 0.5rem;

}



.section-lead {

  margin: 0 0 2rem;

  max-width: 42rem;

  color: #a1a1aa;

  font-size: 1.05rem;

}



.muted {

  color: #71717a;

  font-size: 0.9rem;

}



/* Buttons */

.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.5rem;

  padding: 0.65rem 1.15rem;

  font-size: 0.9rem;

  font-weight: 600;

  border-radius: 10px;

  border: 1px solid transparent;

  cursor: pointer;

  transition:

    transform 0.18s ease,

    box-shadow 0.18s ease,

    background 0.18s ease,

    border-color 0.18s ease;

}



.btn:focus-visible {

  outline: 2px solid rgba(var(--brand-rgb), 0.6);

  outline-offset: 2px;

}



.btn-primary {

  background: linear-gradient(135deg, var(--brand) 0%, rgba(0, 0, 0, 0.25) 100%);

  color: #fff;

  box-shadow:

    0 0 0 1px rgba(255, 255, 255, 0.08) inset,

    0 1px 2px rgba(0, 0, 0, 0.35),

    0 8px 28px -8px rgba(var(--brand-rgb), 0.55);

}



.btn-primary:hover {

  transform: translateY(-1px);

  box-shadow:

    0 0 0 1px rgba(255, 255, 255, 0.1) inset,

    0 12px 36px -10px rgba(var(--brand-rgb), 0.65);

}



.btn-ghost {

  background: rgba(255, 255, 255, 0.04);

  border-color: rgba(255, 255, 255, 0.1);

  color: #f4f4f5;

  backdrop-filter: blur(8px);

}



.btn-ghost:hover {

  background: rgba(255, 255, 255, 0.08);

  border-color: rgba(255, 255, 255, 0.16);

  transform: translateY(-1px);

}



/* Cennik — trzy wyraźnie różne CTA (Starter / Pro / Business) */

.btn-plan-starter {

  background: rgba(255, 255, 255, 0.02);

  border: 1px solid rgba(255, 255, 255, 0.14);

  color: #d4d4d8;

  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) inset;

}



.btn-plan-starter:hover {

  background: rgba(255, 255, 255, 0.06);

  border-color: rgba(255, 255, 255, 0.24);

  color: #fafafa;

  transform: translateY(-1px);

}



.btn-plan-pro {

  background: linear-gradient(135deg, var(--brand) 0%, rgba(0, 0, 0, 0.28) 100%);

  color: #fff;

  border-color: rgba(255, 255, 255, 0.12);

  box-shadow:

    0 0 0 1px rgba(255, 255, 255, 0.1) inset,

    0 1px 2px rgba(0, 0, 0, 0.35),

    0 8px 28px -8px rgba(var(--brand-rgb), 0.55);

}



.btn-plan-pro:hover {

  transform: translateY(-1px);

  box-shadow:

    0 0 0 1px rgba(255, 255, 255, 0.12) inset,

    0 12px 36px -10px rgba(var(--brand-rgb), 0.68);

}



.btn-plan-business {

  background: linear-gradient(145deg, rgba(99, 102, 241, 0.14), rgba(139, 92, 246, 0.08));

  border: 1px solid rgba(167, 139, 250, 0.42);

  color: #f4f4f5;

  box-shadow:

    0 0 0 1px rgba(255, 255, 255, 0.05) inset,

    0 6px 28px -10px rgba(139, 92, 246, 0.45);

}



.btn-plan-business:hover {

  border-color: rgba(196, 181, 253, 0.55);

  background: linear-gradient(145deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.12));

  box-shadow:

    0 0 0 1px rgba(255, 255, 255, 0.07) inset,

    0 10px 36px -10px rgba(139, 92, 246, 0.55);

  transform: translateY(-1px);

}



.btn-plan-starter.is-disabled,

.btn-plan-pro.is-disabled,

.btn-plan-business.is-disabled {

  opacity: 0.55;

  pointer-events: none;

  transform: none;

  box-shadow: none;

}



.btn-lg {

  padding: 0.85rem 1.35rem;

  font-size: 0.95rem;

  border-radius: 12px;

}



/* Nav */

.lp-nav {

  position: sticky;

  top: 0;

  z-index: 100;

  padding: 0.75rem 0;

  animation: lp-nav-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;

  transition:

    background 0.25s ease,

    box-shadow 0.25s ease,

    border-color 0.25s ease;

  border-bottom: 1px solid transparent;

}



/* Otwarte menu mobilne: pełna warstwa nad hero (backdrop/transform na sticky też tworzą containing block dla fixed) */

body.nav-open .lp-nav {

  z-index: 5000;

  animation: none;

  backdrop-filter: none;

  -webkit-backdrop-filter: none;

  background: rgba(5, 5, 8, 0.98);

  border-bottom-color: rgba(255, 255, 255, 0.06);

}



.lp-nav.is-scrolled {

  background: rgba(8, 8, 12, 0.72);

  backdrop-filter: blur(16px);

  -webkit-backdrop-filter: blur(16px);

  border-bottom-color: rgba(255, 255, 255, 0.06);

  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);

}



.lp-nav-inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1rem;

}



.lp-brand {

  display: flex;

  align-items: center;

  gap: 0.65rem;

  flex-shrink: 0;

}

.lp-brand-logo {

  display: block;

  width: clamp(188px, 20vw, 260px);

  height: auto;

  max-height: 66px;

  object-fit: contain;

}



.lp-brand-icon {

  width: 38px;

  height: 38px;

  border-radius: 10px;

  display: grid;

  place-items: center;

  background: linear-gradient(145deg, rgba(var(--brand-rgb), 0.25), rgba(255, 255, 255, 0.04));

  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow: 0 0 24px -8px rgba(var(--brand-rgb), 0.5);

  color: #fff;

  font-size: 1rem;

}



.lp-brand-text {

  display: flex;

  flex-direction: column;

  line-height: 1.2;

  font-weight: 600;

  font-size: 0.95rem;

  color: #fafafa;

}



.lp-brand-text small {

  font-weight: 500;

  font-size: 0.7rem;

  color: #71717a;

  letter-spacing: 0.04em;

}



.lp-nav-links {

  display: flex;

  align-items: center;

  gap: 0.25rem 1.5rem;

}



.lp-nav-links a:not(.btn) {

  font-size: 0.875rem;

  font-weight: 500;

  color: #a1a1aa;

  transition: color 0.15s ease;

}



.lp-nav-links a:not(.btn):hover {

  color: #fafafa;

}



.lp-nav-actions {

  display: flex;

  align-items: center;

  gap: 0.5rem;

}



.lp-nav-toggle {

  display: none;

  width: 42px;

  height: 42px;

  border-radius: 10px;

  border: 1px solid rgba(255, 255, 255, 0.12);

  background: rgba(255, 255, 255, 0.04);

  color: #fff;

  cursor: pointer;

}



.lp-nav-mobile-cta {

  display: none;

}



@media (max-width: 900px) {

  .lp-nav-toggle {

    display: grid;

    place-items: center;

  }



  .lp-nav-links {

    position: fixed;

    left: 0;

    right: 0;

    top: 64px;

    bottom: 0;

    padding: 1rem 1.25rem 1.5rem;

    flex-direction: column;

    align-items: stretch;

    gap: 0;

    /* Pełne, nieprzezroczyste tło — treść hero nie „przechodzi” przez menu */

    background: #07070c;

    border: none;

    border-bottom: 1px solid rgba(255, 255, 255, 0.06);

    z-index: 5001;

    min-height: calc(100dvh - 64px);

    box-sizing: border-box;

    overflow-y: auto;

    overflow-x: hidden;

    -webkit-overflow-scrolling: touch;

    overscroll-behavior: contain;

    transform: translateY(-100%);

    opacity: 0;

    visibility: hidden;

    transition:

      transform 0.28s cubic-bezier(0.22, 1, 0.32, 1),

      opacity 0.22s ease,

      visibility 0.22s;

    pointer-events: none;

  }



  .lp-nav-links.is-open {

    transform: translateY(0);

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

  }



  .lp-nav-links > a:not(.btn) {

    padding: 0.85rem 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.06);

    color: #e4e4e7;

    flex-shrink: 0;

  }



  .lp-nav-actions {

    display: none;

  }



  .lp-nav-mobile-cta {

    display: flex;

    flex-direction: column;

    gap: 0.65rem;

    margin-top: auto;

    padding-top: 1.25rem;

    border-top: 1px solid rgba(255, 255, 255, 0.06);

    flex-shrink: 0;

  }



  .lp-nav-mobile-cta .btn {

    width: 100%;

  }



  /* Przyciski w hero — jedna kolumna, bez nachodzenia na wąskim ekranie */

  .lp-hero-cta {

    flex-direction: column;

    align-items: stretch;

  }



  .lp-hero-cta .btn {

    width: 100%;

    justify-content: center;

  }

}



/* Hero */

.lp-hero {

  position: relative;

  isolation: isolate;

  padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(4rem, 10vw, 6rem);

}



.lp-hero-glow-a {

  width: min(520px, 90vw);

  height: 320px;

  top: -80px;

  right: -10%;

  background: radial-gradient(circle, rgba(var(--brand-rgb), 0.45) 0%, transparent 65%);

}



.lp-hero-glow-b {

  width: 400px;

  height: 280px;

  bottom: 10%;

  left: -5%;

  background: radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, transparent 65%);

}



.lp-hero-grid {

  display: grid;

  grid-template-columns: 1fr 1.05fr;

  gap: clamp(2rem, 5vw, 4rem);

  align-items: center;

}



@media (max-width: 960px) {

  .lp-hero-grid {

    grid-template-columns: 1fr;

  }

}



.lp-hero-copy .lead {

  font-size: 1.1rem;

  color: #a1a1aa;

  margin: 0 0 1.75rem;

  max-width: 34rem;

}



.lp-hero-cta {

  display: flex;

  flex-wrap: wrap;

  gap: 0.75rem;

  margin-bottom: 0.75rem;

}



.lp-hero-micro {

  font-size: 0.8rem;

  color: #71717a;

  margin: 0 0 1.75rem;

}



.lp-hero-points {

  margin: 1.35rem 0 0;

  padding: 0;

  list-style: none;

  display: flex;

  flex-direction: column;

  gap: 0.55rem;

}



.lp-hero-points li {

  display: flex;

  align-items: center;

  gap: 0.55rem;

  font-size: 0.9rem;

  color: #a1a1aa;

}



.lp-hero-points li i {

  flex-shrink: 0;

  font-size: 0.7rem;

  color: rgba(var(--brand-rgb), 0.95);

}



.lp-demo-actions {

  margin-top: 1.75rem;

  text-align: center;

}



.lp-demo-hint {

  margin: 1rem 0 0;

  font-size: 0.85rem;

  text-align: center;

}



.lp-badges {

  display: flex;

  flex-wrap: wrap;

  gap: 0.5rem;

}



.lp-badge {

  font-size: 0.7rem;

  font-weight: 600;

  letter-spacing: 0.04em;

  text-transform: uppercase;

  padding: 0.35rem 0.65rem;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid rgba(255, 255, 255, 0.06);

  color: #71717a;

  transition:

    border-color 0.2s ease,

    color 0.2s ease;

}



.lp-badge:hover {

  border-color: rgba(var(--brand-rgb), 0.35);

  color: #a1a1aa;

}



.lp-badge--faint {

  opacity: 0.72;

  font-size: 0.65rem;

  padding: 0.28rem 0.55rem;

}



/* Dashboard mockup */

.lp-mock {

  position: relative;

  display: flex;

  flex-direction: column;

  border-radius: 16px;

  background: linear-gradient(165deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);

  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow:

    0 0 0 1px rgba(0, 0, 0, 0.4) inset,

    0 24px 80px -24px rgba(0, 0, 0, 0.8),

    0 0 60px -20px rgba(var(--brand-rgb), 0.25);

  overflow: hidden;

  aspect-ratio: 16 / 11;

  min-height: 280px;

}



.lp-mock[data-placeholder] {

  background:

    linear-gradient(165deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%),

    #0c0c10;

}



.lp-mock img.lp-mock-img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  opacity: 0.98;

}



.lp-mock-chrome {

  display: flex;

  align-items: center;

  gap: 6px;

  padding: 0.65rem 0.85rem;

  border-bottom: 1px solid rgba(255, 255, 255, 0.06);

  background: rgba(0, 0, 0, 0.35);

}



.lp-mock-chrome span {

  width: 10px;

  height: 10px;

  border-radius: 50%;

  background: #3f3f46;

}



.lp-mock-chrome span:nth-child(1) {

  background: #ef4444;

}



.lp-mock-chrome span:nth-child(2) {

  background: #eab308;

}



.lp-mock-chrome span:nth-child(3) {

  background: #22c55e;

}



.lp-mock-url {

  margin-left: auto;

  font-size: 0.65rem;

  color: #52525b;

  font-family: ui-monospace, monospace;

}



.lp-mock-body {

  display: grid;

  grid-template-columns: 180px 1fr;

  min-height: 0;

  flex: 1 1 auto;

}



@media (max-width: 520px) {

  .lp-mock-body {

    grid-template-columns: 56px 1fr;

  }

}



.lp-mock-sidebar {

  padding: 1rem 0.75rem;

  border-right: 1px solid rgba(255, 255, 255, 0.05);

  display: flex;

  flex-direction: column;

  gap: 0.4rem;

}



.lp-mock-nav-item {

  height: 8px;

  border-radius: 4px;

  background: rgba(255, 255, 255, 0.06);

}



.lp-mock-nav-item:nth-child(1) {

  width: 70%;

  background: rgba(var(--brand-rgb), 0.35);

}



.lp-mock-nav-item:nth-child(2) {

  width: 55%;

}



.lp-mock-nav-item:nth-child(3) {

  width: 65%;

}



.lp-mock-main {

  padding: 1rem;

  display: flex;

  flex-direction: column;

  gap: 0.75rem;

}



.lp-mock-stats {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 0.5rem;

}



.lp-mock-stat {

  padding: 0.65rem;

  border-radius: 10px;

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid rgba(255, 255, 255, 0.05);

}



.lp-mock-stat strong {

  display: block;

  font-size: 1.1rem;

  color: #fafafa;

  margin-bottom: 0.15rem;

}



.lp-mock-stat span {

  font-size: 0.65rem;

  color: #71717a;

}



.lp-mock-chart {

  flex: 1;

  min-height: 100px;

  border-radius: 10px;

  background: linear-gradient(180deg, rgba(var(--brand-rgb), 0.12) 0%, transparent 100%);

  border: 1px solid rgba(255, 255, 255, 0.05);

  position: relative;

  overflow: hidden;

}



.lp-mock-bars {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: flex-end;

  gap: 6%;

  padding: 12% 8%;

}



.lp-mock-bars i {

  flex: 1;

  align-self: flex-end;

  min-height: 28%;

  border-radius: 4px 4px 0 0;

  background: linear-gradient(180deg, rgba(var(--brand-rgb), 0.85), rgba(var(--brand-rgb), 0.2));

  opacity: 0.85;

}



.lp-mock-bars i:nth-child(1) {

  height: 42%;

}



.lp-mock-bars i:nth-child(2) {

  height: 58%;

}



.lp-mock-bars i:nth-child(3) {

  height: 72%;

}



.lp-mock-bars i:nth-child(4) {

  height: 50%;

}



.lp-mock-bars i:nth-child(5) {

  height: 64%;

}



.lp-mock-label {

  position: absolute;

  top: 0.65rem;

  left: 0.75rem;

  font-size: 0.65rem;

  color: #71717a;

  text-transform: uppercase;

  letter-spacing: 0.08em;

}



.lp-mock-float {

  position: absolute;

  bottom: 1rem;

  right: 1rem;

  padding: 0.5rem 0.75rem;

  font-size: 0.65rem;

  font-weight: 600;

  color: #22c55e;

  background: rgba(34, 197, 94, 0.12);

  border: 1px solid rgba(34, 197, 94, 0.25);

  border-radius: 8px;

}



.lp-mock-inner {

  flex: 1;

  min-height: 0;

  display: flex;

  flex-direction: column;

  min-height: 220px;

}



/* Sections */

.lp-section {

  padding: clamp(3.5rem, 8vw, 5.5rem) 0;

  position: relative;

}



.lp-section-head {

  text-align: center;

  max-width: 640px;

  margin: 0 auto 3rem;

}



.lp-section-head .section-lead {

  margin-left: auto;

  margin-right: auto;

}



/* Dla kogo */

.lp-tiles {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1rem;

}



@media (max-width: 900px) {

  .lp-tiles {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 520px) {

  .lp-tiles {

    grid-template-columns: 1fr;

  }

}



.lp-tile {

  display: flex;

  flex-direction: column;

  padding: 1.35rem 1.25rem;

  border-radius: 14px;

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(255, 255, 255, 0.06);

  transition:

    transform 0.22s ease,

    border-color 0.22s ease,

    box-shadow 0.22s ease;

}



.lp-tile-cta {

  margin-top: auto;

  padding-top: 1rem;

}



.lp-tile-cta .btn {

  width: 100%;

  font-size: 0.8rem;

  padding: 0.55rem 0.85rem;

}



.lp-tile:hover {

  transform: translateY(-3px);

  border-color: rgba(var(--brand-rgb), 0.25);

  box-shadow: 0 16px 48px -20px rgba(0, 0, 0, 0.5);

}



.lp-tile-icon {

  width: 42px;

  height: 42px;

  border-radius: 11px;

  display: grid;

  place-items: center;

  margin-bottom: 0.85rem;

  font-size: 1.1rem;

  color: #fff;

  background: rgba(var(--brand-rgb), 0.15);

  border: 1px solid rgba(255, 255, 255, 0.08);

}



.lp-tile p {

  margin: 0;

  font-size: 0.875rem;

  color: #71717a;

  line-height: 1.5;

}



/* Problem → rozwiązanie */

.lp-vs {

  display: grid;

  grid-template-columns: 1fr auto 1fr;

  gap: clamp(1rem, 4vw, 2rem);

  align-items: stretch;

  max-width: 920px;

  margin-inline: auto;

}



.lp-vs-col {

  padding: 1.5rem 1.35rem;

  border-radius: 16px;

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(255, 255, 255, 0.07);

}



.lp-vs-col--bad {

  border-color: rgba(239, 68, 68, 0.15);

}



.lp-vs-col--good {

  border-color: rgba(var(--brand-rgb), 0.22);

  background: linear-gradient(165deg, rgba(var(--brand-rgb), 0.06), rgba(255, 255, 255, 0.02));

}



.lp-vs-col h3 {

  font-size: 0.75rem;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  color: #71717a;

  margin: 0 0 1rem;

}



.lp-vs-list {

  margin: 0;

  padding: 0;

  list-style: none;

  display: flex;

  flex-direction: column;

  gap: 0.75rem;

}



.lp-vs-list li {

  display: flex;

  align-items: flex-start;

  gap: 0.6rem;

  font-size: 0.95rem;

  color: #d4d4d8;

  line-height: 1.45;

}



.lp-vs-list li i {

  margin-top: 0.15rem;

  flex-shrink: 0;

  font-size: 0.85rem;

}



.lp-vs-list--bad li i {

  color: #f87171;

}



.lp-vs-list--good li i {

  color: #4ade80;

}



.lp-vs-mid {

  display: grid;

  place-items: center;

  align-self: center;

  color: rgba(var(--brand-rgb), 0.9);

  font-size: 1.35rem;

  opacity: 0.85;

}



@media (max-width: 720px) {

  .lp-vs {

    grid-template-columns: 1fr;

  }



  .lp-vs-mid {

    padding: 0.25rem 0;

    transform: rotate(90deg);

  }

}



/* Mock widoku rezerwacji (demo) */

.lp-demo-widget-wrap {

  max-width: 420px;

  margin-inline: auto;

}



.lp-booking-mock {

  border-radius: 16px;

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.1);

  background: rgba(8, 8, 12, 0.9);

  box-shadow:

    0 0 0 1px rgba(255, 255, 255, 0.04) inset,

    0 24px 64px -24px rgba(0, 0, 0, 0.6),

    0 0 80px -40px rgba(var(--brand-rgb), 0.35);

}



.lp-booking-mock-top {

  padding: 1rem 1.15rem;

  border-bottom: 1px solid rgba(255, 255, 255, 0.06);

  font-weight: 600;

  font-size: 0.95rem;

  color: #fafafa;

}



.lp-booking-mock-top span {

  display: block;

  font-size: 0.75rem;

  font-weight: 500;

  color: #71717a;

  margin-top: 0.2rem;

}



.lp-booking-mock-body {

  padding: 1rem 1.15rem 1.25rem;

  display: flex;

  flex-direction: column;

  gap: 0.5rem;

}



.lp-booking-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 0.75rem;

  padding: 0.65rem 0.85rem;

  border-radius: 10px;

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid rgba(255, 255, 255, 0.06);

  font-size: 0.875rem;

  color: #e4e4e7;

}



.lp-booking-row strong {

  font-weight: 600;

  color: #fafafa;

}



.lp-booking-row em {

  font-style: normal;

  font-size: 0.75rem;

  color: #71717a;

}



.lp-booking-mock .btn {

  width: 100%;

  margin-top: 0.35rem;

}



/* Feature cards */

.lp-features {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1rem;

}



@media (max-width: 900px) {

  .lp-features {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 560px) {

  .lp-features {

    grid-template-columns: 1fr;

  }

}



.lp-fcard {

  padding: 1.5rem 1.35rem;

  border-radius: 14px;

  background: rgba(255, 255, 255, 0.025);

  border: 1px solid rgba(255, 255, 255, 0.06);

  transition:

    border-color 0.2s ease,

    background 0.2s ease;

}



.lp-fcard:hover {

  border-color: rgba(255, 255, 255, 0.12);

  background: rgba(255, 255, 255, 0.04);

}



.lp-fcard-icon {

  width: 44px;

  height: 44px;

  border-radius: 12px;

  display: grid;

  place-items: center;

  margin-bottom: 1rem;

  font-size: 1.15rem;

  color: rgba(var(--brand-rgb), 1);

  background: rgba(var(--brand-rgb), 0.1);

  border: 1px solid rgba(var(--brand-rgb), 0.2);

}



.lp-fcard h3 {

  font-size: clamp(0.95rem, 0.35vw + 0.88rem, 1.08rem);

  line-height: 1.3;

  margin: 0 0 0.5rem;

}



.lp-fcard p {

  margin: 0;

  font-size: 0.9rem;

  color: #a1a1aa;

  line-height: 1.55;

}



/* Product showcase */

.lp-showcase {

  display: grid;

  grid-template-columns: 1fr;

  gap: 2rem;

  align-items: start;

}



.lp-showcase-mock {

  position: relative;

}



.lp-showcase-mock .lp-mock {

  aspect-ratio: 16 / 9;

}



.lp-callouts {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 0.75rem;

}



@media (max-width: 768px) {

  .lp-callouts {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 480px) {

  .lp-callouts {

    grid-template-columns: 1fr;

  }

}



.lp-callout {

  padding: 0.85rem 1rem;

  border-radius: 12px;

  font-size: 0.8rem;

  font-weight: 500;

  color: #d4d4d8;

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid rgba(255, 255, 255, 0.06);

  display: flex;

  align-items: center;

  gap: 0.5rem;

}



.lp-callout i {

  color: rgba(var(--brand-rgb), 0.9);

  font-size: 0.9rem;

}



/* How it works */

.lp-steps {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1.25rem;

  counter-reset: step;

}



@media (max-width: 800px) {

  .lp-steps {

    grid-template-columns: 1fr;

  }

}



.lp-step {

  position: relative;

  padding: 1.75rem 1.5rem;

  border-radius: 16px;

  background: linear-gradient(165deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));

  border: 1px solid rgba(255, 255, 255, 0.07);

  overflow: hidden;

}



.lp-step::before {

  counter-increment: step;

  content: counter(step);

  position: absolute;

  top: 1rem;

  right: 1rem;

  font-size: 2.5rem;

  font-weight: 700;

  color: rgba(255, 255, 255, 0.04);

  line-height: 1;

}



.lp-step h3 {

  font-size: 1.1rem;

  margin-bottom: 0.5rem;

}



.lp-step p {

  margin: 0;

  font-size: 0.9rem;

  color: #a1a1aa;

  line-height: 1.55;

}



/* Widget / embed */

.lp-embed {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 2.5rem;

  align-items: center;

}



@media (max-width: 900px) {

  .lp-embed {

    grid-template-columns: 1fr;

  }

}



.lp-embed-visual {

  border-radius: 16px;

  padding: 1.25rem;

  background: rgba(0, 0, 0, 0.35);

  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow: 0 24px 64px -32px rgba(0, 0, 0, 0.6);

}



.lp-code {

  font-family: ui-monospace, "Cascadia Code", monospace;

  font-size: 0.72rem;

  line-height: 1.65;

  color: #a1a1aa;

  margin: 0;

  padding: 1rem;

  border-radius: 10px;

  background: #0a0a0c;

  border: 1px solid rgba(255, 255, 255, 0.06);

  overflow-x: auto;

}



.lp-code .kw {

  color: #c084fc;

}



.lp-code .str {

  color: #86efac;

}



.lp-code .tag {

  color: #7dd3fc;

}



.lp-embed-points {

  display: flex;

  flex-direction: column;

  gap: 1rem;

}



.lp-embed-points li {

  list-style: none;

  display: flex;

  gap: 0.75rem;

  align-items: flex-start;

  font-size: 0.95rem;

  color: #a1a1aa;

}



.lp-embed-points li i {

  margin-top: 0.2rem;

  color: rgba(var(--brand-rgb), 0.95);

}



/* Pricing */

.lp-pricing {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 1.25rem;

  max-width: 1120px;

  margin-inline: auto;

  align-items: stretch;

}



@media (max-width: 960px) {

  .lp-pricing {

    grid-template-columns: 1fr;

    max-width: 440px;

  }

}



.lp-plan {

  display: flex;

  flex-direction: column;

  height: 100%;

  min-height: 0;

  padding: 2rem 1.75rem;

  border-radius: 18px;

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(255, 255, 255, 0.08);

  position: relative;

  transition:

    border-color 0.2s ease,

    transform 0.2s ease;

}



.lp-plan:hover {

  border-color: rgba(var(--brand-rgb), 0.35);

  transform: translateY(-2px);

}



.lp-plan.featured {

  border-color: rgba(var(--brand-rgb), 0.45);

  background: linear-gradient(165deg, rgba(var(--brand-rgb), 0.12), rgba(255, 255, 255, 0.02));

  box-shadow: 0 0 60px -20px rgba(var(--brand-rgb), 0.35);

}



.lp-plan-badge {

  position: absolute;

  top: 1rem;

  right: 1rem;

  font-size: 0.65rem;

  font-weight: 700;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  padding: 0.3rem 0.55rem;

  border-radius: 6px;

  background: rgba(var(--brand-rgb), 0.25);

  color: #fff;

}



.lp-plan-name {

  font-size: 0.8rem;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  color: #71717a;

  margin: 0 0 0.5rem;

}



.lp-plan-price {

  font-size: 2.25rem;

  font-weight: 700;

  color: #fafafa;

  margin: 0 0 0.25rem;

}



.lp-plan-price small {

  font-size: 0.95rem;

  font-weight: 500;

  color: #71717a;

}



.lp-plan ul {

  flex: 1 1 auto;

  margin: 1.25rem 0 0;

  padding: 0;

  list-style: none;

}



.lp-plan > a.btn,

.lp-plan > span.btn {

  margin-top: auto;

  align-self: stretch;

  width: 100% !important;

  box-sizing: border-box;

}



.lp-plan li {

  display: flex;

  align-items: flex-start;

  gap: 0.5rem;

  font-size: 0.9rem;

  color: #d4d4d8;

  margin-bottom: 0.65rem;

}



.lp-plan li i {

  color: #22c55e;

  margin-top: 0.15rem;

  font-size: 0.85rem;

}



/* FAQ */

.lp-faq {

  max-width: 720px;

  margin-inline: auto;

}



.lp-faq-item {

  border-bottom: 1px solid rgba(255, 255, 255, 0.06);

}



.lp-faq-trigger {

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1rem;

  padding: 1.15rem 0;

  background: none;

  border: none;

  color: #fafafa;

  font-size: 0.95rem;

  font-weight: 600;

  text-align: left;

  cursor: pointer;

  font-family: inherit;

}



.lp-faq-trigger i {

  transition: transform 0.25s ease;

  color: #71717a;

  font-size: 0.85rem;

}



.lp-faq-item.is-open .lp-faq-trigger i {

  transform: rotate(180deg);

}



.lp-faq-panel {

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.35s ease;

}



.lp-faq-panel-inner {

  padding-bottom: 1.15rem;

  font-size: 0.9rem;

  color: #a1a1aa;

  line-height: 1.6;

}



.lp-faq-item.is-open .lp-faq-panel {

  max-height: 480px;

}



/* Final CTA */

.lp-final {

  text-align: center;

  padding: clamp(3rem, 8vw, 4.5rem) 1.5rem;

  border-radius: 24px;

  margin: 2rem auto 0;

  max-width: 900px;

  background: linear-gradient(135deg, rgba(var(--brand-rgb), 0.15) 0%, rgba(255, 255, 255, 0.03) 50%, rgba(99, 102, 241, 0.08) 100%);

  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow: 0 0 80px -30px rgba(var(--brand-rgb), 0.4);

}



.lp-final h2 {

  margin-bottom: 0.75rem;

}



.lp-final .section-lead {

  margin-inline: auto;

}



.lp-final-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 0.75rem;

  justify-content: center;

  margin-top: 1.5rem;

}



.register-form label {

  display: block;

  font-size: 0.8rem;

  font-weight: 600;

  color: #a1a1aa;

  margin-bottom: 0.35rem;

}



.register-form input {

  width: 100%;

  padding: 0.65rem 0.85rem;

  margin-bottom: 1rem;

  border-radius: 10px;

  border: 1px solid rgba(255, 255, 255, 0.1);

  background: rgba(0, 0, 0, 0.35);

  color: #fafafa;

  font-size: 0.95rem;

  font-family: inherit;

  transition: border-color 0.15s ease;

}



.register-form input:focus {

  outline: none;

  border-color: rgba(var(--brand-rgb), 0.5);

  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.15);

}



.register-form .btn-primary {

  width: 100%;

  margin-top: 0.25rem;

}



.alert {

  padding: 0.85rem 1rem;

  border-radius: 10px;

  margin-bottom: 1.25rem;

  font-size: 0.9rem;

}



.alert-ok {

  background: rgba(34, 197, 94, 0.12);

  border: 1px solid rgba(34, 197, 94, 0.3);

  color: #86efac;

}



.alert-error {

  background: rgba(239, 68, 68, 0.1);

  border: 1px solid rgba(239, 68, 68, 0.25);

  color: #fca5a5;

}



/* Footer */

.lp-footer {

  padding: 2.5rem 0 3rem;

  border-top: 1px solid rgba(255, 255, 255, 0.06);

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 1rem;

  font-size: 0.85rem;

  color: #71717a;

  text-align: center;

}



.lp-footer-legal {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: center;

  gap: 0.35rem 0.5rem;

}



.lp-footer-legal a {

  color: #a1a1aa;

  text-decoration: none;

  font-size: 0.8125rem;

  font-weight: 500;

}



.lp-footer-legal a:hover {

  color: #fafafa;

}



.lp-footer-legal-sep {

  color: #52525b;

  user-select: none;

}



.lp-footer-bottom {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: center;

  gap: 0.75rem 1.25rem;

  width: 100%;

  max-width: 640px;

}



.lp-footer-bottom p {

  margin: 0;

}



@media (min-width: 640px) {

  .lp-footer-bottom {

    justify-content: space-between;

  }

}



.lp-footer a {

  color: #a1a1aa;

  transition: color 0.15s ease;

}



.lp-footer a:hover {

  color: #fafafa;

}



/*

 * Reveal on scroll — fade + lekki „wjazd” (bez filter: blur — bywało

 * zacinanie / pełne rozmycie w części przeglądarek).

 */

[data-reveal] {

  opacity: 0;

  transform: translate3d(0, 36px, 0) scale(0.98);

  transform-origin: 50% 85%;

  transition:

    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),

    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);

}



[data-reveal].is-inview {

  opacity: 1;

  transform: none;

}



/*

 * Sekcje z siatką / listą: bez przesunięcia całego bloku — tylko fade kontenera,

 * żeby widać było kaskadę pojedynczych elementów (np. karty Funkcje).

 */

section.lp-section[data-reveal]:where(

    :has(.lp-tiles),

    :has(.lp-features),

    :has(.lp-steps),

    :has(.lp-pricing),

    :has(.lp-callouts),

    :has(.lp-embed),

    :has(.lp-faq),

    :has(.lp-final-actions),

    :has(.lp-vs),

    :has(.lp-demo-widget-wrap)

  ) {

  transform: none;

  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}



section.lp-section[data-reveal]:where(

    :has(.lp-tiles),

    :has(.lp-features),

    :has(.lp-steps),

    :has(.lp-pricing),

    :has(.lp-callouts),

    :has(.lp-embed),

    :has(.lp-faq),

    :has(.lp-final-actions),

    :has(.lp-vs),

    :has(.lp-demo-widget-wrap)

  ).is-inview

  .lp-section-head {

  animation: lp-section-head-in 0.58s cubic-bezier(0.16, 1, 0.3, 1) both;

}



.lp-hero [data-reveal] {

  transform: translate3d(0, 22px, 0) scale(0.99);

  transform-origin: 50% 80%;

  transition-duration: 0.75s;

}



/* Hero: najpierw kopia, potem mock (kaskada kolumn) */

.lp-hero-grid .lp-mock-wrap[data-reveal] {

  transition-delay: 0.16s;

}



/* Karty / kroki — kolejne wejścia po wejściu sekcji (wyraźniejszy ruch, większe opóźnienia) */

.lp-section[data-reveal].is-inview .lp-tile,

.lp-section[data-reveal].is-inview .lp-fcard,

.lp-section[data-reveal].is-inview .lp-step,

.lp-section[data-reveal].is-inview .lp-plan,

.lp-section[data-reveal].is-inview .lp-callout {

  animation: lp-card-emerge 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;

}



.lp-section[data-reveal].is-inview .lp-tile:nth-child(1) { animation-delay: 0.08s; }

.lp-section[data-reveal].is-inview .lp-tile:nth-child(2) { animation-delay: 0.15s; }

.lp-section[data-reveal].is-inview .lp-tile:nth-child(3) { animation-delay: 0.22s; }

.lp-section[data-reveal].is-inview .lp-tile:nth-child(4) { animation-delay: 0.29s; }

.lp-section[data-reveal].is-inview .lp-tile:nth-child(5) { animation-delay: 0.36s; }

.lp-section[data-reveal].is-inview .lp-tile:nth-child(6) { animation-delay: 0.43s; }

.lp-section[data-reveal].is-inview .lp-tile:nth-child(7) { animation-delay: 0.5s; }

.lp-section[data-reveal].is-inview .lp-tile:nth-child(8) { animation-delay: 0.57s; }



.lp-section[data-reveal].is-inview .lp-fcard:nth-child(1) { animation-delay: 0.1s; }

.lp-section[data-reveal].is-inview .lp-fcard:nth-child(2) { animation-delay: 0.18s; }

.lp-section[data-reveal].is-inview .lp-fcard:nth-child(3) { animation-delay: 0.26s; }

.lp-section[data-reveal].is-inview .lp-fcard:nth-child(4) { animation-delay: 0.34s; }

.lp-section[data-reveal].is-inview .lp-fcard:nth-child(5) { animation-delay: 0.42s; }

.lp-section[data-reveal].is-inview .lp-fcard:nth-child(6) { animation-delay: 0.5s; }



.lp-section[data-reveal].is-inview .lp-step:nth-child(1) { animation-delay: 0.1s; }

.lp-section[data-reveal].is-inview .lp-step:nth-child(2) { animation-delay: 0.22s; }

.lp-section[data-reveal].is-inview .lp-step:nth-child(3) { animation-delay: 0.34s; }



.lp-section[data-reveal].is-inview .lp-plan:nth-child(1) { animation-delay: 0.12s; }

.lp-section[data-reveal].is-inview .lp-plan:nth-child(2) { animation-delay: 0.22s; }

.lp-section[data-reveal].is-inview .lp-plan:nth-child(3) { animation-delay: 0.32s; }



.lp-section[data-reveal].is-inview .lp-callout:nth-child(1) { animation-delay: 0.08s; }

.lp-section[data-reveal].is-inview .lp-callout:nth-child(2) { animation-delay: 0.14s; }

.lp-section[data-reveal].is-inview .lp-callout:nth-child(3) { animation-delay: 0.2s; }

.lp-section[data-reveal].is-inview .lp-callout:nth-child(4) { animation-delay: 0.26s; }

.lp-section[data-reveal].is-inview .lp-callout:nth-child(5) { animation-delay: 0.32s; }

.lp-section[data-reveal].is-inview .lp-callout:nth-child(6) { animation-delay: 0.38s; }

.lp-section[data-reveal].is-inview .lp-callout:nth-child(7) { animation-delay: 0.44s; }

.lp-section[data-reveal].is-inview .lp-callout:nth-child(8) { animation-delay: 0.5s; }



.lp-section[data-reveal].is-inview .lp-vs-col {

  animation: lp-card-emerge 0.72s cubic-bezier(0.16, 1, 0.3, 1) both;

}



.lp-section[data-reveal].is-inview .lp-vs-col--bad {

  animation-delay: 0.1s;

}



.lp-section[data-reveal].is-inview .lp-vs-col--good {

  animation-delay: 0.22s;

}



.lp-section[data-reveal].is-inview .lp-vs-mid {

  animation: lp-card-emerge 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;

  animation-delay: 0.16s;

}



.lp-section[data-reveal].is-inview .lp-booking-mock {

  animation: lp-card-emerge 0.78s cubic-bezier(0.16, 1, 0.3, 1) both;

  animation-delay: 0.12s;

}



.lp-section#widget[data-reveal].is-inview .lp-embed > div {

  animation: lp-card-emerge 0.78s cubic-bezier(0.16, 1, 0.3, 1) both;

}



.lp-section#widget[data-reveal].is-inview .lp-embed > div:nth-child(1) { animation-delay: 0.12s; }

.lp-section#widget[data-reveal].is-inview .lp-embed > div:nth-child(2) { animation-delay: 0.22s; }



.lp-section#faq[data-reveal].is-inview .lp-faq-item {

  animation: lp-card-emerge 0.72s cubic-bezier(0.16, 1, 0.3, 1) both;

}



.lp-section#faq[data-reveal].is-inview .lp-faq-item:nth-child(1) { animation-delay: 0.08s; }

.lp-section#faq[data-reveal].is-inview .lp-faq-item:nth-child(2) { animation-delay: 0.14s; }

.lp-section#faq[data-reveal].is-inview .lp-faq-item:nth-child(3) { animation-delay: 0.2s; }

.lp-section#faq[data-reveal].is-inview .lp-faq-item:nth-child(4) { animation-delay: 0.26s; }

.lp-section#faq[data-reveal].is-inview .lp-faq-item:nth-child(5) { animation-delay: 0.32s; }

.lp-section#faq[data-reveal].is-inview .lp-faq-item:nth-child(6) { animation-delay: 0.38s; }



.lp-section[data-reveal].is-inview .lp-final-actions .btn {

  animation: lp-card-emerge 0.68s cubic-bezier(0.16, 1, 0.3, 1) both;

}



.lp-section[data-reveal].is-inview .lp-final-actions .btn:nth-child(1) { animation-delay: 0.14s; }

.lp-section[data-reveal].is-inview .lp-final-actions .btn:nth-child(2) { animation-delay: 0.24s; }



@media (prefers-reduced-motion: reduce) {

  .lp-nav {

    animation: none;

  }



  [data-reveal] {

    opacity: 1;

    transform: none;

    transition: none;

  }



  section.lp-section[data-reveal]:where(

      :has(.lp-tiles),

      :has(.lp-features),

      :has(.lp-steps),

      :has(.lp-pricing),

      :has(.lp-callouts),

      :has(.lp-embed),

      :has(.lp-faq),

      :has(.lp-final-actions),

      :has(.lp-vs),

      :has(.lp-demo-widget-wrap)

    ).is-inview

    .lp-section-head {

    animation: none;

    opacity: 1;

    transform: none;

  }



  .lp-section[data-reveal].is-inview .lp-tile,

  .lp-section[data-reveal].is-inview .lp-fcard,

  .lp-section[data-reveal].is-inview .lp-step,

  .lp-section[data-reveal].is-inview .lp-plan,

  .lp-section[data-reveal].is-inview .lp-callout,

  .lp-section[data-reveal].is-inview .lp-vs-col,

  .lp-section[data-reveal].is-inview .lp-vs-mid,

  .lp-section[data-reveal].is-inview .lp-booking-mock,

  .lp-section#widget[data-reveal].is-inview .lp-embed > div,

  .lp-section#faq[data-reveal].is-inview .lp-faq-item,

  .lp-section[data-reveal].is-inview .lp-final-actions .btn {

    animation: none;

    opacity: 1;

    transform: none;

  }

}



/* Divider */

.lp-divider {

  height: 1px;

  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);

  margin: 0;

  border: none;

}