/* Sutumatic CRM Landing — custom styles (lp- prefix) */
:root {
  --lp-brand: #4865FD;
  --lp-brand-violet: #5F55FD;
  --lp-orange: #FCA52B;
  --lp-dark: #0B0D26;
  --lp-dark-2: #0F1233;
  --lp-dark-3: #080A1E;
  --lp-ink: #0f172a;
  --lp-muted: #64748b;
  --lp-border: #e2e8f0;
  --lp-grad: linear-gradient(120deg, #4865FD 0%, #5F55FD 55%, #FCA52B 130%);
  --lp-grad-btn: linear-gradient(to left, #4865FD, #5F55FD);
  --lp-container: 80rem;
  --lp-radius: 1rem;
  --lp-radius-lg: 1.5rem;
  --lp-radius-xl: 1.75rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body.lp-body {
  margin: 0;
  background: #fff;
  color: #1e293b;
  font-family: "Cairo", "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

[dir="ltr"] body.lp-body {
  font-family: "Inter", "Cairo", system-ui, sans-serif;
}

::selection {
  background: rgba(72, 101, 253, 0.2);
}

.lp-container {
  width: 100%;
  max-width: var(--lp-container);
  margin-inline: auto;
  padding-inline: 1rem;
}

@media (min-width: 640px) {
  .lp-container {
    padding-inline: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .lp-container {
    padding-inline: 2rem;
  }
}

.lp-font-num {
  font-family: "Inter", "Cairo", sans-serif;
  font-variant-numeric: tabular-nums;
}

.lp-text-gradient {
  background: var(--lp-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lp-bg-grid-light {
  background-image:
    linear-gradient(to right, rgb(72 101 253 / 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(72 101 253 / 0.06) 1px, transparent 1px);
  background-size: 44px 44px;
}

.lp-bg-grid-dark {
  background-image:
    linear-gradient(to right, rgb(255 255 255 / 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
}

.lp-section {
  position: relative;
  padding-block: 5rem;
  overflow: hidden;
}

.lp-section--dark {
  background: var(--lp-dark);
  color: #fff;
}

.lp-section--white {
  background: #fff;
}

.lp-section--tint {
  background: linear-gradient(to bottom, rgba(238, 242, 255, 0.7), #fff);
}

.lp-section--tint-b {
  background: linear-gradient(to bottom, #fff, rgba(238, 242, 255, 0.6));
}

.lp-glow {
  position: absolute;
  border-radius: 9999px;
  pointer-events: none;
  filter: blur(130px);
}

.lp-glow--blue {
  background: rgba(72, 101, 253, 0.25);
}

.lp-glow--violet {
  background: rgba(95, 85, 253, 0.2);
}

.lp-glow--orange {
  background: rgba(252, 165, 43, 0.15);
}

/* ----- Buttons ----- */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 0;
  border-radius: 1rem;
  padding: 1rem 1.75rem;
  font-size: 1rem;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.lp-btn:hover {
  transform: scale(1.03);
}

.lp-btn--primary {
  background: var(--lp-grad-btn);
  color: #fff;
  box-shadow: 0 12px 28px rgba(72, 101, 253, 0.35);
}

.lp-btn--ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.lp-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.15);
}

.lp-btn--wa {
  color: #6ee7b7;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.3);
}

.lp-btn--wa:hover {
  background: rgba(52, 211, 153, 0.1);
}

.lp-btn--wa-solid {
  background: #10b981;
  color: #fff;
  box-shadow: 0 12px 28px rgba(16, 185, 129, 0.3);
}

.lp-btn--white {
  background: #fff;
  color: var(--lp-brand);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.15);
}

.lp-btn--sm {
  padding: 0.65rem 1.25rem;
  font-size: 0.875rem;
  border-radius: 9999px;
}

.lp-btn--block {
  width: 100%;
}

/* ----- Badge / section head ----- */
.lp-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  padding: 0.4rem 1rem;
  font-size: 0.875rem;
  font-weight: 700;
}

.lp-badge--light {
  background: #eef2ff;
  color: #4f46e5;
  box-shadow: inset 0 0 0 1px #e0e7ff;
}

.lp-badge--dark {
  background: rgba(255, 255, 255, 0.1);
  color: #fcd34d;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.lp-badge--success {
  background: #ecfdf5;
  color: #059669;
  box-shadow: inset 0 0 0 1px #d1fae5;
}

.lp-badge--amber {
  background: rgba(252, 165, 43, 0.15);
  color: #fcd34d;
  box-shadow: inset 0 0 0 1px rgba(252, 165, 43, 0.25);
}

.lp-section-head {
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
}

.lp-section-head h2 {
  margin: 1.25rem 0 0;
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 900;
  line-height: 1.25;
  color: #0f172a;
}

.lp-section--dark .lp-section-head h2 {
  color: #fff;
}

.lp-section-head p {
  margin: 1rem 0 0;
  font-size: 1.125rem;
  line-height: 1.7;
  color: #64748b;
}

.lp-section--dark .lp-section-head p {
  color: #cbd5e1;
}

/* ----- Cards ----- */
.lp-card {
  background: #fff;
  border-radius: var(--lp-radius-lg);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
}

.lp-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  background: #fff;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: #334155;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), inset 0 0 0 1px #e0e7ff;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.lp-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(72, 101, 253, 0.12), inset 0 0 0 1px #c7d2fe;
}

.lp-chip svg {
  width: 1rem;
  height: 1rem;
  color: var(--lp-brand);
  flex-shrink: 0;
}

/* ----- Navbar ----- */
.lp-nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  height: 72px;
  transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}

.lp-nav.is-scrolled {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
}

.lp-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 1rem;
}

.lp-nav__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
}

.lp-nav__brand img {
  height: 2.75rem;
  width: auto;
}

.lp-nav__brand-text {
  display: none;
  flex-direction: column;
  line-height: 1.2;
}

@media (min-width: 640px) {
  .lp-nav__brand-text {
    display: flex;
  }
}

.lp-nav__brand-title {
  font-size: 1.125rem;
  font-weight: 900;
  color: #fff;
}

.lp-nav.is-scrolled .lp-nav__brand-title {
  color: #0f172a;
}

.lp-nav__brand-sub {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #cbd5e1;
}

.lp-nav.is-scrolled .lp-nav__brand-sub {
  color: #94a3b8;
}

.lp-nav__links {
  display: none;
  align-items: center;
  gap: 0.15rem;
}

@media (min-width: 1024px) {
  .lp-nav__links {
    display: flex;
  }
}

.lp-nav__links a {
  border-radius: 9999px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  color: #e2e8f0;
  transition: background 0.15s ease, color 0.15s ease;
}

.lp-nav__links a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.lp-nav.is-scrolled .lp-nav__links a {
  color: #475569;
}

.lp-nav.is-scrolled .lp-nav__links a:hover {
  background: #eef2ff;
  color: var(--lp-brand);
}

.lp-nav__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.lp-lang {
  position: relative;
}

.lp-lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 9999px;
  padding: 0.5rem 0.9rem;
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
}

.lp-nav.is-scrolled .lp-lang__btn {
  color: #334155;
  border-color: #e2e8f0;
  background: #fff;
}

.lp-lang__menu {
  display: none;
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 0.4rem);
  min-width: 9rem;
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
  border: 1px solid #e2e8f0;
  padding: 0.35rem;
  z-index: 60;
}

.lp-lang.is-open .lp-lang__menu {
  display: block;
}

.lp-lang__menu a {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #334155;
  text-decoration: none;
}

.lp-lang__menu a:hover,
.lp-lang__menu a.is-active {
  background: #eef2ff;
  color: var(--lp-brand);
}

.lp-nav__start {
  display: none;
  align-items: center;
  border-radius: 9999px;
  padding: 0.55rem 1.25rem;
  font-size: 0.8125rem;
  font-weight: 900;
  text-decoration: none;
  color: #fff;
  background: var(--lp-grad-btn);
  box-shadow: 0 8px 20px rgba(72, 101, 253, 0.3);
  transition: transform 0.15s ease;
}

.lp-nav__start:hover {
  transform: scale(1.03);
  color: #fff;
}

@media (min-width: 640px) {
  .lp-nav__start {
    display: inline-flex;
  }
}

.lp-nav__signin {
  display: none;
  align-items: center;
  gap: 0.35rem;
  border-radius: 9999px;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 800;
  text-decoration: none;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.lp-nav__signin:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.lp-nav.is-scrolled .lp-nav__signin {
  color: #334155;
  border-color: #e2e8f0;
}

.lp-nav.is-scrolled .lp-nav__signin:hover {
  background: #f8fafc;
  color: #0f172a;
}

@media (min-width: 640px) {
  .lp-nav__signin {
    display: inline-flex;
  }
}

.lp-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.lp-nav.is-scrolled .lp-nav__toggle {
  color: #0f172a;
}

@media (min-width: 1024px) {
  .lp-nav__toggle {
    display: none;
  }
}

.lp-nav__mobile {
  display: none;
  border-top: 1px solid #f1f5f9;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(16px);
  padding: 1rem;
}

.lp-nav__mobile.is-open {
  display: block;
}

.lp-nav__mobile a {
  display: block;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: #334155;
  text-decoration: none;
}

.lp-nav__mobile a:hover {
  background: #eef2ff;
}

.lp-nav__mobile .lp-btn {
  margin-top: 0.5rem;
  width: 100%;
}

/* ----- Hero ----- */
.lp-hero {
  position: relative;
  overflow: hidden;
  background: var(--lp-dark);
  color: #fff;
}

.lp-hero__inner {
  position: relative;
  display: grid;
  gap: 3.5rem;
  align-items: center;
  padding-top: 9rem;
  padding-bottom: 5rem;
}

@media (min-width: 1024px) {
  .lp-hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
    padding-top: 11rem;
    padding-bottom: 7rem;
  }
}

.lp-hero__copy {
  text-align: center;
}

@media (min-width: 1024px) {
  .lp-hero__copy {
    text-align: start;
  }
}

.lp-hero h1 {
  margin: 1.5rem 0 0;
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 900;
  line-height: 1.25;
  color: #fff;
}

.lp-hero__sub {
  margin: 1.5rem auto 0;
  max-width: 36rem;
  font-size: 1.125rem;
  line-height: 1.7;
  color: #cbd5e1;
}

@media (min-width: 1024px) {
  .lp-hero__sub {
    margin-inline: 0;
  }
}

.lp-hero__ctas {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

@media (min-width: 640px) {
  .lp-hero__ctas {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .lp-hero__ctas .lp-btn {
    width: auto;
  }
}

@media (min-width: 1024px) {
  .lp-hero__ctas {
    justify-content: flex-start;
  }
}

.lp-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 3rem;
}

@media (min-width: 640px) {
  .lp-hero__stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

.lp-hero__stat {
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.05);
  padding: 1rem 0.75rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.lp-hero__stat-value {
  font-size: 1.5rem;
  font-weight: 900;
  color: #fff;
}

.lp-hero__stat-label {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #94a3b8;
  line-height: 1.35;
}

.lp-hero__visual {
  position: relative;
  max-width: 35rem;
  margin-inline: auto;
}

.lp-browser {
  overflow: hidden;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 25px 50px rgba(15, 23, 42, 0.45);
}

.lp-browser__bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: #f1f5f9;
  padding: 0.65rem 1rem;
}

.lp-browser__dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 9999px;
}

.lp-browser__dot--r { background: #fb7185; }
.lp-browser__dot--a { background: #fbbf24; }
.lp-browser__dot--g { background: #34d399; }

.lp-browser__url {
  flex: 1;
  margin-inline-start: 0.75rem;
  border-radius: 0.4rem;
  background: #fff;
  padding: 0.25rem 0.75rem;
  font-size: 0.625rem;
  font-weight: 600;
  color: #94a3b8;
  box-shadow: inset 0 0 0 1px #e2e8f0;
}

.lp-browser img {
  display: block;
  width: 100%;
  height: auto;
}

.lp-float {
  position: absolute;
  display: none;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.95);
  padding: 1rem;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.2);
  width: 13rem;
  backdrop-filter: blur(8px);
}

@media (min-width: 768px) {
  .lp-float {
    display: block;
  }
}

.lp-float--lead {
  inset-inline-start: -1rem;
  top: 2.5rem;
}

@media (min-width: 1024px) {
  .lp-float--lead {
    inset-inline-start: -3.5rem;
  }
}

.lp-float--task {
  inset-inline-end: -0.75rem;
  top: 33%;
}

@media (min-width: 1024px) {
  .lp-float--task {
    inset-inline-end: -3rem;
  }
}

.lp-float--pill {
  display: none;
  align-items: center;
  gap: 0.5rem;
  width: auto;
  background: rgba(15, 18, 51, 0.9);
  color: #fff;
  padding: 0.75rem 1rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

@media (min-width: 768px) {
  .lp-float--pill {
    display: flex;
  }
}

.lp-float--win {
  bottom: -1.5rem;
  inset-inline-start: 2rem;
}

.lp-float--ticket {
  bottom: -0.5rem;
  inset-inline-end: 2.5rem;
}

.lp-float__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.75rem;
  flex-shrink: 0;
}

.lp-float__title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 900;
  color: #1e293b;
}

.lp-float__meta {
  margin: 0.5rem 0 0;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #64748b;
}

.lp-float__tag {
  margin: 0.35rem 0 0;
  border-radius: 0.5rem;
  background: #eef2ff;
  padding: 0.25rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--lp-brand);
}

.lp-hero__curve {
  position: relative;
  height: 4rem;
  overflow: hidden;
}

.lp-hero__curve::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 8rem;
  border-radius: 100% 100% 0 0;
  background: #fff;
}

/* ----- Grids ----- */
.lp-grid-2 {
  display: grid;
  gap: 1rem;
}

@media (min-width: 640px) {
  .lp-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.lp-grid-3 {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .lp-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.lp-grid-4 {
  display: grid;
  gap: 1rem;
}

@media (min-width: 640px) {
  .lp-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .lp-grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.lp-split {
  display: grid;
  gap: 3.5rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .lp-split {
    grid-template-columns: 1fr 1fr;
  }

  .lp-split--55-45 {
    grid-template-columns: 1.05fr 0.95fr;
  }

  .lp-split--45-55 {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

/* Problem cards */
.lp-problem-card {
  height: 100%;
  border-radius: 1rem;
  border: 1px solid #ffe4e6;
  background: linear-gradient(to bottom, rgba(255, 241, 242, 0.6), #fff);
  padding: 1.25rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lp-problem-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(244, 63, 94, 0.1);
}

.lp-problem-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem;
  background: #ffe4e6;
  color: #f43f5e;
}

.lp-problem-card p {
  margin: 1rem 0 0;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.6;
  color: #334155;
}

/* Performance */
.lp-perf-card {
  height: 100%;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.05);
  padding: 1rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: background 0.2s ease;
}

.lp-perf-card:hover {
  background: rgba(255, 255, 255, 0.08);
}

.lp-perf-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem;
  background: var(--lp-grad-btn);
  color: #fff;
}

.lp-perf-card h3 {
  margin: 0.75rem 0 0;
  font-size: 0.9375rem;
  font-weight: 900;
  color: #fff;
}

.lp-perf-card p {
  margin: 0.4rem 0 0;
  font-size: 0.8125rem;
  color: #94a3b8;
  line-height: 1.55;
}

.lp-panel {
  position: relative;
}

.lp-panel__glow {
  position: absolute;
  inset: -1rem;
  border-radius: 1.875rem;
  background: linear-gradient(135deg, rgba(72, 101, 253, 0.25), rgba(252, 165, 43, 0.2));
  filter: blur(24px);
  pointer-events: none;
}

.lp-panel__card {
  position: relative;
  overflow: hidden;
  border-radius: 1.625rem;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 25px 50px rgba(15, 23, 42, 0.2);
}

.lp-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--lp-grad-btn);
  padding: 1rem 1.5rem;
  color: #fff;
}

.lp-panel__head h3 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 900;
}

.lp-panel__live {
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.2);
  padding: 0.25rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 700;
}

.lp-board-row {
  display: grid;
  grid-template-columns: 44px 1.5fr 1fr 0.8fr 0.9fr;
  align-items: center;
  gap: 0.5rem;
  border-radius: 1rem;
  padding: 0.65rem;
  margin-bottom: 0.65rem;
  background: rgba(248, 250, 252, 0.8);
  box-shadow: inset 0 0 0 1px #f1f5f9;
}

.lp-board-row--top {
  background: #fffbeb;
  box-shadow: inset 0 0 0 1px #fde68a;
}

.lp-board-row:last-child {
  margin-bottom: 0;
}

.lp-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 900;
}

.lp-rank--1 { background: linear-gradient(135deg, #fcd34d, #f59e0b); color: var(--lp-dark); }
.lp-rank--2 { background: linear-gradient(135deg, #e2e8f0, #94a3b8); color: var(--lp-dark); }
.lp-rank--3 { background: linear-gradient(135deg, #fdba74, #f97316); color: var(--lp-dark); }
.lp-rank--4 { background: rgba(15, 23, 42, 0.08); color: #64748b; }

.lp-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, #e0e7ff, #ede9fe);
  color: #4f46e5;
  font-size: 0.75rem;
  font-weight: 900;
  flex-shrink: 0;
}

.lp-bar {
  margin-top: 0.25rem;
  height: 0.375rem;
  max-width: 4.5rem;
  border-radius: 9999px;
  background: #e2e8f0;
  overflow: hidden;
}

.lp-bar > span {
  display: block;
  height: 100%;
  border-radius: 9999px;
  background: var(--lp-grad-btn);
}

.lp-pill {
  display: inline-flex;
  border-radius: 9999px;
  padding: 0.15rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 900;
}

.lp-pill--green { background: #ecfdf5; color: #059669; }
.lp-pill--amber { background: #fffbeb; color: #d97706; }
.lp-pill--rose { background: #fff1f2; color: #e11d48; }

/* Journey */
.lp-journey-grid {
  display: grid;
  gap: 2rem;
  margin-top: 4rem;
  position: relative;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .lp-journey-grid::before {
    content: "";
    position: absolute;
    top: 2rem;
    bottom: 2rem;
    inset-inline-start: 1.7rem;
    width: 1px;
    background: linear-gradient(to bottom, #4865FD, #5F55FD, #FCA52B);
  }
}

@media (min-width: 1024px) {
  .lp-journey-grid {
    grid-template-columns: repeat(7, 1fr);
    gap: 1rem;
  }

  .lp-journey-grid::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 1.7rem;
    height: 1px;
    width: auto;
    bottom: auto;
    background: linear-gradient(to left, #4865FD, #5F55FD, #FCA52B);
  }
}

.lp-journey-step {
  position: relative;
  display: flex;
  gap: 1.25rem;
}

@media (min-width: 1024px) {
  .lp-journey-step {
    flex-direction: column;
    gap: 0;
  }
}

.lp-journey-icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
  border-radius: 1rem;
  background: var(--lp-grad-btn);
  color: #fff;
  box-shadow: 0 12px 24px rgba(72, 101, 253, 0.35), 0 0 0 4px var(--lp-dark);
  transition: transform 0.2s ease;
}

.lp-journey-step:hover .lp-journey-icon {
  transform: scale(1.1);
}

.lp-journey-num {
  position: absolute;
  top: -0.5rem;
  inset-inline-end: -0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  background: var(--lp-orange);
  color: var(--lp-dark);
  font-size: 0.6875rem;
  font-weight: 900;
}

.lp-journey-step h3 {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 900;
  color: #fff;
}

@media (min-width: 1024px) {
  .lp-journey-step h3 {
    margin-top: 1.25rem;
  }
}

.lp-journey-step p {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: #94a3b8;
  line-height: 1.55;
}

/* Assignment panel table */
.lp-assign-point {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  border-radius: 0.75rem;
  background: #f8fafc;
  padding: 0.875rem;
  box-shadow: inset 0 0 0 1px #f1f5f9;
}

.lp-assign-point p {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: #334155;
  line-height: 1.5;
}

.lp-assign-point svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--lp-brand);
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.lp-table-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 0.5rem;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 0.75rem;
  font-size: 0.6875rem;
  font-weight: 900;
  color: #94a3b8;
}

.lp-table-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid #f8fafc;
  padding-block: 0.875rem;
}

.lp-table-row:last-child {
  border-bottom: 0;
}

/* Pipeline stages */
.lp-stages-wrap {
  margin-top: 3.5rem;
  overflow-x: auto;
  padding-bottom: 1rem;
}

.lp-stages {
  display: flex;
  gap: 0.75rem;
  min-width: 54rem;
}

.lp-stage {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 1rem;
  padding: 1.5rem 0.75rem;
  text-align: center;
  color: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  font-weight: 900;
  font-size: 0.875rem;
}

.lp-stage:nth-child(1) { background: linear-gradient(135deg, #94a3b8, #64748b); }
.lp-stage:nth-child(2) { background: linear-gradient(135deg, #38bdf8, #0ea5e9); }
.lp-stage:nth-child(3) { background: linear-gradient(135deg, #818cf8, #6366f1); }
.lp-stage:nth-child(4) { background: linear-gradient(135deg, #a78bfa, #8b5cf6); }
.lp-stage:nth-child(5) { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.lp-stage:nth-child(6) { background: linear-gradient(135deg, #34d399, #10b981); }

.lp-stage__num {
  font-size: 0.6875rem;
  opacity: 0.8;
}

.lp-feat-box {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  height: 100%;
  border-radius: 1rem;
  background: #fff;
  padding: 1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), inset 0 0 0 1px #e0e7ff;
}

.lp-feat-box p {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: #334155;
  line-height: 1.5;
}

.lp-feat-box svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--lp-brand-violet);
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.lp-examples {
  height: auto;
  border-radius: 1.5rem;
  background: var(--lp-dark-2);
  padding: 1.75rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.lp-examples h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 900;
  color: #fff;
}

.lp-examples__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.25rem;
}

.lp-examples__tags span {
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #e2e8f0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.lp-examples__shot {
  margin-top: 1.75rem;
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  line-height: 0;
}

.lp-examples__shot img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  aspect-ratio: 8 / 5;
  transition: transform 0.5s ease;
}

.lp-examples__shot:hover img {
  transform: scale(1.03);
}

/* Segments */
.lp-seg-card {
  height: 100%;
  border-radius: 1.5rem;
  border: 1px solid #f1f5f9;
  background: linear-gradient(to bottom, rgba(248, 250, 252, 0.7), #fff);
  padding: 1.75rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lp-seg-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(72, 101, 253, 0.1);
}

.lp-seg-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
}

.lp-seg-card--0 .lp-seg-card__icon { background: #e0e7ff; color: #4f46e5; }
.lp-seg-card--1 .lp-seg-card__icon { background: #ede9fe; color: #7c3aed; }
.lp-seg-card--2 .lp-seg-card__icon { background: #fef3c7; color: #d97706; }

.lp-seg-card h3 {
  margin: 1.25rem 0 0;
  font-size: 1.25rem;
  font-weight: 900;
  color: #0f172a;
}

.lp-seg-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.lp-seg-card__tags span {
  border-radius: 9999px;
  padding: 0.4rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px currentColor;
}

.lp-seg-card--0 .lp-seg-card__tags span { background: #eef2ff; color: #4f46e5; }
.lp-seg-card--1 .lp-seg-card__tags span { background: #f5f3ff; color: #7c3aed; }
.lp-seg-card--2 .lp-seg-card__tags span { background: #fffbeb; color: #d97706; }

/* Support */
.lp-ticket {
  position: relative;
  max-width: 28rem;
  margin-inline: auto;
}

.lp-ticket__card {
  position: relative;
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.95);
  padding: 1.5rem;
  box-shadow: 0 25px 50px rgba(15, 23, 42, 0.3);
}

.lp-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 0.75rem;
  padding: 0.65rem 1rem;
  margin-top: 0.65rem;
  font-size: 0.8125rem;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px currentColor;
}

.lp-status-row--0 { background: #f0f9ff; color: #0284c7; }
.lp-status-row--1 { background: #fffbeb; color: #d97706; }
.lp-status-row--2 { background: #f5f3ff; color: #7c3aed; }
.lp-status-row--3 { background: #ecfdf5; color: #059669; }

.lp-support-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.05);
  padding: 1rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  margin-top: 0.75rem;
}

.lp-support-item p {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #e2e8f0;
  line-height: 1.55;
}

.lp-support-item svg {
  width: 1.25rem;
  height: 1.25rem;
  color: #fbbf24;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

/* Management */
.lp-metric {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 100%;
  border-radius: 1rem;
  background: #fff;
  padding: 1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), inset 0 0 0 1px #e0e7ff;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.lp-metric:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(72, 101, 253, 0.1);
}

.lp-metric__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem;
  background: #eef2ff;
  color: var(--lp-brand);
  flex-shrink: 0;
}

.lp-metric p {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 900;
  color: #334155;
  line-height: 1.35;
}

.lp-shot-frame {
  overflow: hidden;
  border-radius: 1.5rem;
  box-shadow: 0 25px 50px rgba(15, 23, 42, 0.12), inset 0 0 0 1px #f1f5f9;
  height: 100%;
}

.lp-shot-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.lp-shot-frame:hover img {
  transform: scale(1.02);
}

/* Excel band */
.lp-excel {
  position: relative;
  overflow: hidden;
  border-radius: 2rem;
  background: var(--lp-grad-btn);
  padding: 3.5rem 1.5rem;
}

@media (min-width: 640px) {
  .lp-excel {
    padding-inline: 3rem;
  }
}

@media (min-width: 1024px) {
  .lp-excel {
    padding-inline: 4rem;
  }
}

.lp-excel h2 {
  margin: 1.25rem 0 0;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.3;
}

.lp-excel p {
  margin: 1rem 0 0;
  max-width: 36rem;
  font-size: 1.125rem;
  color: #c7d2fe;
  line-height: 1.7;
}

.lp-excel__upload {
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.1);
  padding: 1.5rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
}

.lp-excel__drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2px dashed rgba(255, 255, 255, 0.4);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.05);
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: #fff;
}

.lp-excel__progress {
  margin-top: 1.25rem;
  width: 100%;
  height: 0.5rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
}

.lp-excel__progress > span {
  display: block;
  width: 80%;
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(to left, #fcd34d, #fbbf24);
}

/* Gallery */
.lp-gallery-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 3rem;
}

.lp-gallery-tab {
  border: 0;
  border-radius: 9999px;
  padding: 0.65rem 1.25rem;
  font-size: 0.8125rem;
  font-weight: 900;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.lp-gallery-tab.is-active {
  background: var(--lp-grad-btn);
  color: #fff;
  box-shadow: 0 10px 24px rgba(72, 101, 253, 0.35);
}

.lp-gallery-frame {
  position: relative;
  max-width: 64rem;
  margin: 2.5rem auto 0;
}

.lp-gallery-caption {
  max-width: 36rem;
  margin: 1.5rem auto 0;
  text-align: center;
}

.lp-gallery-caption h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 900;
  color: #fff;
}

.lp-gallery-caption p {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
  color: #94a3b8;
}

.lp-gallery-imgs {
  position: relative;
}

.lp-gallery-imgs img {
  display: block;
  width: 100%;
  transition: opacity 0.45s ease;
}

.lp-gallery-imgs img.is-hidden {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

/* Features table */
.lp-ftable {
  margin-top: 3rem;
  overflow: hidden;
  border-radius: 1.5rem;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08), inset 0 0 0 1px #f1f5f9;
}

.lp-ftable__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  background: var(--lp-grad-btn);
  padding: 1rem 1.5rem;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 900;
}

.lp-ftable__head span:last-child {
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.15);
  padding: 0.25rem 1rem;
  font-size: 0.75rem;
}

.lp-ftable__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 0.875rem 1.5rem;
  border-top: 1px solid #f8fafc;
  background: #fff;
}

.lp-ftable__row:nth-child(even) {
  background: rgba(248, 250, 252, 0.6);
}

.lp-ftable__row:hover {
  background: rgba(238, 242, 255, 0.5);
}

.lp-ftable__row span:first-child {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #334155;
}

.lp-ftable__included {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 9999px;
  background: #ecfdf5;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 900;
  color: #059669;
}

/* Pricing */
.lp-pricing-toggle {
  display: inline-flex;
  border-radius: 9999px;
  background: #fff;
  padding: 0.4rem;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08), inset 0 0 0 1px #f1f5f9;
}

.lp-pricing-toggle button {
  border: 0;
  border-radius: 9999px;
  padding: 0.65rem 1.75rem;
  font-size: 0.875rem;
  font-weight: 900;
  color: #64748b;
  background: transparent;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.lp-pricing-toggle button.is-active {
  background: var(--lp-grad-btn);
  color: #fff;
  box-shadow: 0 6px 16px rgba(72, 101, 253, 0.3);
}

.lp-price-card {
  position: relative;
  height: 100%;
}

.lp-price-card__glow {
  position: absolute;
  inset: -0.75rem;
  border-radius: 1.875rem;
  background: linear-gradient(135deg, rgba(72, 101, 253, 0.25), rgba(252, 165, 43, 0.2));
  filter: blur(20px);
  pointer-events: none;
}

.lp-price-card__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 1.75rem;
  background: var(--lp-dark-2);
  padding: 2rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.lp-price-card__inner h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 900;
  color: #fff;
}

.lp-price-amount {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

.lp-price-amount__num {
  font-size: clamp(3.5rem, 8vw, 4.5rem);
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(to left, #fff, #c7d2fe);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lp-price-amount__meta {
  padding-bottom: 0.4rem;
}

.lp-price-amount__meta p {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 900;
  color: #cbd5e1;
}

.lp-price-amount__meta p + p {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #94a3b8;
}

.lp-price-save {
  display: none;
  width: fit-content;
  margin-top: 1rem;
  border-radius: 9999px;
  background: rgba(52, 211, 153, 0.15);
  padding: 0.4rem 1rem;
  font-size: 0.8125rem;
  font-weight: 900;
  color: #6ee7b7;
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.25);
}

.lp-price-save.is-visible {
  display: inline-flex;
}

.lp-price-vat {
  margin: 0.75rem 0 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
}

.lp-price-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2rem;
}

.lp-includes {
  height: 100%;
  border-radius: 1.75rem;
  background: #fff;
  padding: 2rem;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08), inset 0 0 0 1px #f1f5f9;
}

.lp-includes h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 900;
  color: #0f172a;
}

.lp-includes__list {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

@media (min-width: 640px) {
  .lp-includes__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.lp-includes__item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.lp-includes__item svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--lp-brand);
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.lp-includes__item p {
  margin: 0;
  font-size: 0.84375rem;
  font-weight: 700;
  color: #475569;
  line-height: 1.55;
}

/* FAQ accordion */
.lp-faq {
  max-width: 48rem;
  margin-inline: auto;
}

.lp-faq__item {
  overflow: hidden;
  border-radius: 1rem;
  background: #fff;
  margin-top: 0.875rem;
  box-shadow: inset 0 0 0 1px #f1f5f9;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.lp-faq__item.is-open {
  background: rgba(238, 242, 255, 0.6);
  box-shadow: 0 8px 20px rgba(72, 101, 253, 0.08), inset 0 0 0 1px #c7d2fe;
}

.lp-faq__btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 0;
  background: transparent;
  padding: 1.25rem 1.5rem;
  text-align: start;
  cursor: pointer;
}

.lp-faq__btn span {
  font-size: 0.9375rem;
  font-weight: 900;
  color: #1e293b;
}

.lp-faq__chevron {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--lp-brand);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.lp-faq__item.is-open .lp-faq__chevron {
  transform: rotate(180deg);
}

.lp-faq__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.lp-faq__item.is-open .lp-faq__body {
  grid-template-rows: 1fr;
}

.lp-faq__body > div {
  overflow: hidden;
}

.lp-faq__body p {
  margin: 0;
  padding: 0 1.5rem 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #475569;
}

/* Final CTA */
.lp-final {
  text-align: center;
}

.lp-final__logo {
  display: inline-block;
  height: 5rem;
  width: auto;
  border-radius: 1rem;
  background: #fff;
  padding: 0.5rem;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.25);
}

.lp-final h2 {
  margin: 2rem 0 0;
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.3;
}

.lp-final p {
  margin: 1.25rem auto 0;
  max-width: 36rem;
  font-size: 1.125rem;
  color: #cbd5e1;
}

.lp-final__ctas {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

@media (min-width: 640px) {
  .lp-final__ctas {
    flex-direction: row;
  }
}

/* Footer */
.lp-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--lp-dark-3);
  padding-block: 3.5rem;
  color: #94a3b8;
}

.lp-footer__grid {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 768px) {
  .lp-footer__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.lp-footer__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.lp-footer__brand img {
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 0.75rem;
  background: #fff;
  padding: 0.25rem;
}

.lp-footer__brand span {
  font-size: 1.125rem;
  font-weight: 900;
  color: #fff;
}

.lp-footer h4 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #cbd5e1;
}

.lp-footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 1rem;
}

.lp-footer__links a {
  width: fit-content;
  font-size: 0.875rem;
  font-weight: 700;
  color: #94a3b8;
  text-decoration: none;
  transition: color 0.15s ease;
}

.lp-footer__links a:hover {
  color: #fff;
}

.lp-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.8125rem;
  font-weight: 600;
  color: #64748b;
}

@media (min-width: 640px) {
  .lp-footer__bottom {
    flex-direction: row;
  }
}

/* Icons helper */
.lp-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.lp-icon--lg {
  width: 1.5rem;
  height: 1.5rem;
}

.lp-icon--xl {
  width: 3rem;
  height: 3rem;
}

.check-icon {
  color: var(--lp-brand);
}

/* Animations */
@keyframes lp-float-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

@keyframes lp-float-slower {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}

@keyframes lp-fade-up {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes lp-pulse-ring {
  0% { box-shadow: 0 0 0 0 rgb(252 165 43 / 0.45); }
  70% { box-shadow: 0 0 0 14px rgb(252 165 43 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(252 165 43 / 0); }
}

.lp-animate-float-slow {
  animation: lp-float-slow 7s ease-in-out infinite;
}

.lp-animate-float-slower {
  animation: lp-float-slower 9s ease-in-out infinite;
}

.lp-animate-pulse-ring {
  animation: lp-pulse-ring 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.lp-reveal {
  opacity: 0;
}

.lp-reveal.is-visible {
  animation: lp-fade-up 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Utility */
.lp-mt-8 { margin-top: 2rem; }
.lp-mt-10 { margin-top: 2.5rem; }
.lp-mt-12 { margin-top: 3rem; }
.lp-mt-14 { margin-top: 3.5rem; }
.lp-flex { display: flex; }
.lp-items-center { align-items: center; }
.lp-gap-2 { gap: 0.5rem; }
.lp-gap-3 { gap: 0.75rem; }
.lp-hidden-lg {
  display: none;
}

@media (min-width: 1024px) {
  .lp-hidden-lg {
    display: block;
  }
}

.lp-text-white { color: #fff; }
.lp-text-muted { color: #64748b; }

@media (max-width: 767px) {
  .lp-board-row {
    grid-template-columns: 36px 1fr 1fr;
    grid-template-rows: auto auto;
  }

  .lp-board-row > :nth-child(4),
  .lp-board-row > :nth-child(5) {
    display: none;
  }

  .lp-table-cols,
  .lp-table-row {
    grid-template-columns: 1.4fr 1fr 1fr;
  }

  .lp-table-cols > :nth-child(4),
  .lp-table-row > :nth-child(4) {
    display: none;
  }
}