/* =====================================================================
   نیلا CRM — Landing page stylesheet
   ---------------------------------------------------------------------
   Standalone (not the CRM shell). Uses the Nila brand identity:
   white surfaces + primary red #DC6465, Vazirmatn typography, soft
   shadows, rounded cards, subtle gradients. Scoped under `.nila-lp`
   so nothing leaks into other pages if ever co-loaded.
   ===================================================================== */

/* ----------------------------- TOKENS -------------------------------- */
.nila-lp {
  /* Brand (mirrors nila_classic.css) */
  --lp-primary: #DC6465;
  --lp-primary-hover: #C75456;
  --lp-primary-active: #B94A4C;
  --lp-primary-light: #FBEDEE;
  --lp-primary-soft: #F8DCDD;
  --lp-primary-050: #FEF7F7;

  --lp-success: #16A34A;
  --lp-success-bg: #E9F6EE;
  --lp-warning: #E0A23E;
  --lp-warning-bg: #FCF3E4;

  /* Neutrals */
  --lp-white: #FFFFFF;
  --lp-surface: #FFFFFF;
  --lp-surface-2: #F7F8FA;
  --lp-surface-3: #F1F3F6;
  --lp-ink: #1B1E24;
  --lp-text: #22252B;
  --lp-muted: #6F7480;
  --lp-faint: #9BA0AB;
  --lp-border: #E7E9EE;
  --lp-border-2: #EEF0F4;

  /* Effects */
  --lp-grad: linear-gradient(135deg, #E4726F 0%, #DC6465 45%, #C24E56 100%);
  --lp-grad-soft: linear-gradient(160deg, #FFFFFF 0%, #FDF2F2 100%);
  --lp-ring: rgba(220, 100, 101, 0.16);
  --lp-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --lp-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 12px rgba(16, 24, 40, 0.05);
  --lp-shadow-md: 0 2px 6px rgba(16, 24, 40, 0.05), 0 12px 28px rgba(16, 24, 40, 0.08);
  --lp-shadow-lg: 0 12px 30px -12px rgba(16, 24, 40, 0.18), 0 28px 60px -24px rgba(16, 24, 40, 0.24);
  --lp-shadow-red: 0 14px 34px -14px rgba(220, 100, 101, 0.55);

  /* Geometry */
  --lp-r-sm: 12px;
  --lp-r: 16px;
  --lp-r-lg: 22px;
  --lp-r-xl: 28px;
  --lp-container: 1200px;
  --lp-header-h: 74px;

  font-family: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
  color: var(--lp-text);
  background: var(--lp-white);
}

/* ------------------------------ RESET -------------------------------- */
.nila-lp *,
.nila-lp *::before,
.nila-lp *::after { box-sizing: border-box; }

.nila-lp {
  margin: 0;
  padding: 0;
  line-height: 1.75;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--lp-header-h) + 12px); }
.nila-lp h1, .nila-lp h2, .nila-lp h3, .nila-lp h4 { margin: 0; line-height: 1.4; font-weight: 800; color: var(--lp-ink); }
.nila-lp p { margin: 0; }
.nila-lp ul { margin: 0; padding: 0; list-style: none; }
.nila-lp a { color: inherit; text-decoration: none; }
.nila-lp img { max-width: 100%; display: block; }
.nila-lp button { font-family: inherit; cursor: pointer; }

.lp-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lp-skip-link {
  position: absolute; right: -9999px; top: 8px; z-index: 200;
  background: var(--lp-primary); color: #fff; padding: 10px 16px; border-radius: 10px;
}
.lp-skip-link:focus { right: 12px; }

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

/* ------------------------------ BUTTONS ------------------------------ */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 999px; border: 1.5px solid transparent;
  font-weight: 700; font-size: .95rem; white-space: nowrap;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.lp-btn i { font-size: .95em; }
.lp-btn--lg { padding: 14px 26px; font-size: 1.02rem; }
.lp-btn--block { width: 100%; }

.lp-btn--primary { background: var(--lp-primary); color: #fff; border-color: var(--lp-primary); box-shadow: var(--lp-shadow-red); }
.lp-btn--primary:hover { background: var(--lp-primary-hover); border-color: var(--lp-primary-hover); transform: translateY(-2px); }
.lp-btn--primary:active { background: var(--lp-primary-active); transform: translateY(0); }

.lp-btn--outline { background: #fff; color: var(--lp-primary-active); border-color: var(--lp-primary-soft); }
.lp-btn--outline:hover { background: var(--lp-primary-light); border-color: var(--lp-primary); transform: translateY(-2px); }

.lp-btn--ghost { background: transparent; color: var(--lp-text); border-color: transparent; }
.lp-btn--ghost:hover { background: var(--lp-surface-2); color: var(--lp-primary-active); }

.lp-btn--light { background: #fff; color: var(--lp-primary-active); border-color: #fff; box-shadow: var(--lp-shadow-md); }
.lp-btn--light:hover { transform: translateY(-2px); }
.lp-btn--outline-light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.6); }
.lp-btn--outline-light:hover { background: rgba(255,255,255,.2); border-color: #fff; transform: translateY(-2px); }

/* ------------------------------ HEADER ------------------------------- */
.lp-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--lp-header-h);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease, height .25s ease;
}
.lp-header.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  border-bottom-color: var(--lp-border);
  box-shadow: var(--lp-shadow-sm);
}
.lp-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.lp-brand { display: inline-flex; align-items: center; gap: 10px; }
/* Height-driven: the combined lock-up is ~2.6:1, so a fixed square would
   squash it. Width follows the intrinsic ratio. */
.lp-brand__logo { width: auto; height: 38px; max-width: 190px; object-fit: contain; }
.lp-brand__name { font-size: 1.28rem; font-weight: 800; color: var(--lp-ink); letter-spacing: -.2px; }
.lp-brand__name b { color: var(--lp-primary); font-weight: 800; }

.lp-nav { display: flex; align-items: center; gap: 4px; }
.lp-nav__close { display: none; }
.lp-nav__link {
  padding: 9px 14px; border-radius: 10px; color: var(--lp-text); font-weight: 600; font-size: .96rem;
  transition: background .16s ease, color .16s ease;
}
.lp-nav__link:hover { background: var(--lp-surface-2); color: var(--lp-primary-active); }
.lp-nav__cta { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: 10px; }

.lp-burger { display: none; width: 44px; height: 44px; border: 1px solid var(--lp-border); border-radius: 12px; background: #fff; flex-direction: column; gap: 5px; align-items: center; justify-content: center; }
.lp-burger span { width: 20px; height: 2px; background: var(--lp-ink); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.lp-nav-backdrop { position: fixed; inset: 0; background: rgba(16,24,40,.4); z-index: 98; backdrop-filter: blur(2px); }

/* ------------------------- SECTION PRIMITIVES ------------------------ */
.lp-section { padding: 92px 0; position: relative; }
.lp-section__head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.lp-section__title { font-size: clamp(1.6rem, 3.4vw, 2.4rem); letter-spacing: -.3px; }
.lp-section__sub { margin-top: 14px; color: var(--lp-muted); font-size: 1.05rem; }

.lp-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--lp-primary-light); color: var(--lp-primary-active);
  font-weight: 700; font-size: .85rem; border: 1px solid var(--lp-primary-soft);
}
.lp-eyebrow--center { margin-bottom: 16px; }
.lp-badge-soft {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px; border-radius: 999px; margin-bottom: 6px;
  background: var(--lp-primary-light); color: var(--lp-primary-active);
  font-weight: 700; font-size: .82rem; border: 1px solid var(--lp-primary-soft);
}
.lp-text-grad {
  background: var(--lp-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--lp-primary);
}

.lp-check { display: grid; gap: 10px; }
.lp-check li { position: relative; padding-inline-start: 28px; color: var(--lp-text); }
.lp-check li::before {
  content: "\f00c";
  font-family: "Font Awesome 7 Pro", "Font Awesome 6 Pro", "Font Awesome 5 Pro", "FontAwesome";
  font-weight: 900;
  position: absolute; inset-inline-start: 0; top: 2px;
  color: var(--lp-success); font-size: .82rem;
}
.lp-check li b { color: var(--lp-primary-active); font-weight: 800; }

/* ------------------------------- HERO -------------------------------- */
.lp-hero { position: relative; padding: 64px 0 84px; overflow: hidden; background: var(--lp-grad-soft); }
.lp-hero__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.lp-blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; }
.lp-blob--1 { width: 480px; height: 480px; background: radial-gradient(circle, #F6B7B4, transparent 70%); top: -140px; inset-inline-start: -120px; }
.lp-blob--2 { width: 420px; height: 420px; background: radial-gradient(circle, #FBD2CF, transparent 70%); bottom: -160px; inset-inline-end: -100px; opacity: .55; }
.lp-grid-lines {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--lp-border-2) 1px, transparent 1px), linear-gradient(90deg, var(--lp-border-2) 1px, transparent 1px);
  background-size: 44px 44px; opacity: .35;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
}
.lp-hero__grid {
  position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center;
}
.lp-hero__title { font-size: clamp(1.9rem, 4.6vw, 3.15rem); line-height: 1.35; letter-spacing: -.5px; margin-top: 18px; }
.lp-hero__lead { margin-top: 20px; font-size: 1.12rem; color: var(--lp-muted); max-width: 560px; }
.lp-hero__actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; }
.lp-hero__stats { margin-top: 40px; display: flex; gap: 36px; flex-wrap: wrap; }
.lp-hero__stats li { display: flex; flex-direction: column; }
.lp-hero__stats b { font-size: 1.9rem; font-weight: 800; color: var(--lp-ink); line-height: 1.1; }
.lp-hero__stats span { color: var(--lp-muted); font-size: .9rem; }

/* Hero visual */
.lp-hero__visual { position: relative; min-height: 420px; }
.lp-glow {
  position: absolute; inset: 6% 8%; border-radius: 50%;
  background: radial-gradient(circle, rgba(220,100,101,.28), transparent 65%);
  filter: blur(30px); z-index: 0;
}
.lp-mock {
  position: relative; z-index: 1; background: #fff; border: 1px solid var(--lp-border);
  border-radius: var(--lp-r-lg); box-shadow: var(--lp-shadow-lg); overflow: hidden;
  transform: perspective(1600px) rotateY(3deg) rotateX(1.5deg);
}
.lp-mock__bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: var(--lp-surface-2); border-bottom: 1px solid var(--lp-border); }
.lp-mock__dot { width: 10px; height: 10px; border-radius: 50%; background: #D7DAE0; }
.lp-mock__dot:nth-child(1) { background: #F0A9A6; }
.lp-mock__addr { margin-inline-start: auto; font-size: .72rem; color: var(--lp-faint); display: inline-flex; align-items: center; gap: 6px; }
.lp-mock__body { display: grid; grid-template-columns: 56px 1fr; min-height: 300px; }
.lp-mock__side { background: var(--lp-surface-2); border-inline-end: 1px solid var(--lp-border); padding: 14px 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lp-mock__logo { width: 24px; height: 24px; border-radius: 7px; background: var(--lp-grad); }
.lp-mock__navitem { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--lp-faint); font-size: .85rem; }
.lp-mock__navitem.is-active { background: var(--lp-primary-light); color: var(--lp-primary); }
.lp-mock__main { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.lp-mock__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lp-mock__kpi { background: var(--lp-surface-2); border: 1px solid var(--lp-border-2); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.lp-mock__kpi b { font-size: 1.05rem; color: var(--lp-ink); }
.lp-mock__kpi small { font-size: .68rem; color: var(--lp-faint); }
.lp-mock__kpi-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--lp-primary-light); color: var(--lp-primary); font-size: .72rem; margin-bottom: 4px; }
.lp-mock__kpi-ic--g { background: var(--lp-success-bg); color: var(--lp-success); }
.lp-mock__kpi-ic--y { background: var(--lp-warning-bg); color: var(--lp-warning); }
.lp-mock__chart { display: flex; align-items: flex-end; gap: 8px; height: 96px; padding: 10px; background: var(--lp-surface-2); border: 1px solid var(--lp-border-2); border-radius: 12px; }
.lp-mock__chart span { flex: 1; border-radius: 6px 6px 3px 3px; background: linear-gradient(to top, var(--lp-primary), #ec9694); opacity: .9; }
.lp-mock__chart--tall { height: 150px; }
.lp-mock__rows { display: grid; gap: 8px; }
.lp-mock__row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--lp-surface-2); border: 1px solid var(--lp-border-2); border-radius: 10px; }
.lp-mock__row span:first-child { width: 26px; height: 26px; border-radius: 50%; background: var(--lp-primary-soft); }
.lp-mock__row span:nth-child(2) { height: 8px; border-radius: 6px; background: #E1E4EA; flex: 1; }
.lp-mock__row i { color: var(--lp-success); }
.lp-mock__row i.fa-clock { color: var(--lp-warning); }

/* Floating cards */
.lp-float {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--lp-border); border-radius: 14px;
  padding: 10px 14px; box-shadow: var(--lp-shadow-md);
}
.lp-float b { display: block; font-size: .82rem; color: var(--lp-ink); }
.lp-float small { font-size: .68rem; color: var(--lp-muted); }
.lp-float__ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--lp-primary-light); color: var(--lp-primary); }
.lp-float__ic--g { background: var(--lp-success-bg); color: var(--lp-success); }
.lp-float__ic--y { background: var(--lp-warning-bg); color: var(--lp-warning); }
.lp-float--club { top: 4%; inset-inline-start: -6%; animation: lp-floaty 6s ease-in-out infinite; }
.lp-float--auto { bottom: 20%; inset-inline-start: -9%; animation: lp-floaty 7s ease-in-out infinite .6s; }
.lp-float--camp { bottom: -2%; inset-inline-end: 2%; animation: lp-floaty 6.5s ease-in-out infinite 1.1s; }

@keyframes lp-floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ------------------------------ TRUST -------------------------------- */
.lp-trust { padding: 0; margin-top: -44px; position: relative; z-index: 3; }
.lp-trust__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lp-trust__item {
  background: #fff; border: 1px solid var(--lp-border); border-radius: var(--lp-r);
  padding: 24px; box-shadow: var(--lp-shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.lp-trust__item:hover { transform: translateY(-4px); box-shadow: var(--lp-shadow-md); border-color: var(--lp-primary-soft); }
.lp-trust__item i { font-size: 1.4rem; color: var(--lp-primary); background: var(--lp-primary-light); width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 14px; }
.lp-trust__item h3 { font-size: 1.08rem; margin-bottom: 6px; }
.lp-trust__item p { color: var(--lp-muted); font-size: .94rem; }

/* ----------------------------- FEATURES ------------------------------ */
.lp-features { background: var(--lp-white); }
.lp-tabs__nav {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 34px;
}
.lp-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px; border: 1px solid var(--lp-border);
  background: #fff; color: var(--lp-text); font-weight: 600; font-size: .92rem;
  transition: all .18s ease;
}
.lp-tab i { color: var(--lp-faint); transition: color .18s ease; }
.lp-tab:hover { border-color: var(--lp-primary-soft); background: var(--lp-primary-050); }
.lp-tab.is-active { background: var(--lp-primary); border-color: var(--lp-primary); color: #fff; box-shadow: var(--lp-shadow-red); }
.lp-tab.is-active i { color: #fff; }

.lp-tabpanel { display: none; }
.lp-tabpanel.is-active { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; animation: lp-fade-up .4s ease both; }
.lp-tabpanel__text h3 { font-size: 1.5rem; margin-bottom: 12px; }
.lp-tabpanel__text > p { color: var(--lp-muted); margin-bottom: 20px; font-size: 1.02rem; }
.lp-tabpanel__art {
  background: var(--lp-grad-soft); border: 1px solid var(--lp-border);
  border-radius: var(--lp-r-lg); padding: 28px; min-height: 260px;
  display: grid; place-items: center; box-shadow: var(--lp-shadow-sm);
}

/* mini profile art */
.lp-mini-profile { width: 100%; background: #fff; border: 1px solid var(--lp-border); border-radius: var(--lp-r); padding: 18px; box-shadow: var(--lp-shadow-sm); }
.lp-mini-profile__head { display: flex; align-items: center; gap: 12px; }
.lp-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--lp-grad); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; }
.lp-mini-profile__head b { display: block; color: var(--lp-ink); }
.lp-mini-profile__head small { color: var(--lp-muted); font-size: .8rem; }
.lp-chip { margin-inline-start: auto; padding: 4px 11px; border-radius: 999px; background: var(--lp-success-bg); color: var(--lp-success); font-size: .74rem; font-weight: 700; }
.lp-mini-profile__stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 16px 0; }
.lp-mini-profile__stats div { background: var(--lp-surface-2); border-radius: 12px; padding: 10px; text-align: center; }
.lp-mini-profile__stats small { display: block; color: var(--lp-faint); font-size: .72rem; }
.lp-mini-profile__stats b { color: var(--lp-ink); font-size: 1.02rem; }
.lp-mini-profile__timeline { display: grid; gap: 8px; }
.lp-mini-profile__timeline span { display: flex; align-items: center; gap: 10px; font-size: .86rem; color: var(--lp-text); padding: 8px 10px; border-radius: 10px; background: var(--lp-surface-2); }
.lp-mini-profile__timeline i { color: var(--lp-primary); width: 18px; text-align: center; }

/* mini stats grid */
.lp-mini-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.lp-mini-stat { background: #fff; border: 1px solid var(--lp-border); border-radius: 14px; padding: 16px; box-shadow: var(--lp-shadow-xs); }
.lp-mini-stat__ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--lp-primary-light); color: var(--lp-primary); margin-bottom: 10px; }
.lp-mini-stat__ic--g { background: var(--lp-success-bg); color: var(--lp-success); }
.lp-mini-stat__ic--y { background: var(--lp-warning-bg); color: var(--lp-warning); }
.lp-mini-stat b { display: block; font-size: 1.2rem; color: var(--lp-ink); }
.lp-mini-stat small { color: var(--lp-muted); font-size: .82rem; }

/* loyalty card */
.lp-loyalty-card { width: 100%; max-width: 320px; background: var(--lp-grad); color: #fff; border-radius: var(--lp-r-lg); padding: 22px; box-shadow: var(--lp-shadow-red); }
.lp-loyalty-card__top { display: flex; align-items: center; justify-content: space-between; font-size: .9rem; }
.lp-loyalty-card__top b { background: rgba(255,255,255,.2); padding: 4px 10px; border-radius: 999px; font-size: .78rem; }
.lp-loyalty-card__balance { margin: 20px 0 16px; }
.lp-loyalty-card__balance small { opacity: .85; font-size: .78rem; }
.lp-loyalty-card__balance b { display: block; font-size: 1.7rem; font-weight: 800; }
.lp-loyalty-card__balance b i { font-style: normal; font-size: 1rem; opacity: .8; }
.lp-loyalty-card__meta { display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.25); padding-top: 14px; }
.lp-loyalty-card__meta span { display: flex; flex-direction: column; font-weight: 700; }
.lp-loyalty-card__meta small { font-weight: 400; opacity: .82; font-size: .72rem; }

/* campaign art */
.lp-campaign { width: 100%; background: #fff; border: 1px solid var(--lp-border); border-radius: var(--lp-r); padding: 18px; box-shadow: var(--lp-shadow-sm); }
.lp-campaign__head { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--lp-ink); }
.lp-campaign__head i { color: var(--lp-primary); }
.lp-campaign__bar { height: 10px; border-radius: 999px; background: var(--lp-surface-3); margin: 16px 0 8px; overflow: hidden; }
.lp-campaign__bar span { display: block; height: 100%; background: var(--lp-grad); border-radius: 999px; }
.lp-campaign__meta { display: flex; justify-content: space-between; font-size: .82rem; color: var(--lp-muted); }
.lp-campaign__channels { display: flex; gap: 10px; margin-top: 16px; }
.lp-campaign__channels span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--lp-surface-2); color: var(--lp-muted); font-size: .82rem; font-weight: 600; }
.lp-campaign__channels span.is-on { background: var(--lp-primary-light); color: var(--lp-primary-active); }

/* automation flow */
.lp-flow { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.lp-flow__node { width: 100%; max-width: 300px; text-align: center; background: #fff; border: 1px solid var(--lp-border); border-radius: 12px; padding: 12px; font-weight: 600; font-size: .9rem; box-shadow: var(--lp-shadow-xs); }
.lp-flow__node i { color: var(--lp-primary); margin-inline-end: 6px; }
.lp-flow__arrow { color: var(--lp-primary-soft); }

/* pipeline art */
.lp-pipeline { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; width: 100%; }
.lp-pipeline__col { background: var(--lp-surface-2); border: 1px solid var(--lp-border-2); border-radius: 12px; padding: 10px 8px; display: flex; flex-direction: column; gap: 6px; }
.lp-pipeline__col small { font-size: .68rem; color: var(--lp-muted); font-weight: 700; text-align: center; margin-bottom: 4px; }
.lp-pipeline__col > span { height: 26px; border-radius: 7px; background: #fff; border: 1px solid var(--lp-border); }
.lp-pipeline__col.is-win > span { background: var(--lp-success-bg); border-color: #bfe6cd; }

/* report art */
.lp-report { display: flex; align-items: center; gap: 24px; }
.lp-report__donut { width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--lp-primary) calc(var(--v)*1%), var(--lp-surface-3) 0); }
.lp-report__donut::after { content: ""; position: absolute; width: 82px; height: 82px; border-radius: 50%; background: #fff; }
.lp-report__donut b { position: relative; z-index: 1; font-size: 1.2rem; color: var(--lp-ink); }
.lp-report__bars { display: flex; align-items: flex-end; gap: 8px; height: 120px; }
.lp-report__bars span { width: 18px; border-radius: 6px 6px 0 0; background: linear-gradient(to top, var(--lp-primary), #ed9a98); }

/* integrations art */
.lp-integrations { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; width: 100%; }
.lp-integrations span { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; background: #fff; border: 1px solid var(--lp-border); border-radius: 14px; font-size: .82rem; font-weight: 600; color: var(--lp-text); box-shadow: var(--lp-shadow-xs); }
.lp-integrations i { font-size: 1.3rem; color: var(--lp-primary); }

/* ---------------------------- SPOTLIGHT ------------------------------ */
.lp-spotlight { background: var(--lp-surface-2); }
.lp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.lp-split + .lp-split { margin-top: 72px; }
.lp-split--reverse .lp-split__text { order: 2; }
.lp-split h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 8px 0 14px; letter-spacing: -.3px; }
.lp-split p { color: var(--lp-muted); font-size: 1.04rem; }
.lp-pill-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.lp-pill-grid span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--lp-border); font-size: .88rem; font-weight: 600; box-shadow: var(--lp-shadow-xs); }
.lp-pill-grid i { color: var(--lp-primary); }

/* tier stack */
.lp-split__art { display: grid; place-items: center; }
.lp-tier-stack { display: grid; gap: 14px; width: 100%; max-width: 320px; }
.lp-tier { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-radius: var(--lp-r); font-weight: 800; color: #fff; box-shadow: var(--lp-shadow-md); font-size: 1.1rem; }
.lp-tier i { font-size: 1.3rem; }
.lp-tier--bronze { background: linear-gradient(135deg, #C98A5B, #A56A3C); margin-inline-end: 40px; }
.lp-tier--silver { background: linear-gradient(135deg, #AEB4BD, #868D98); margin-inline-end: 20px; }
.lp-tier--gold { background: linear-gradient(135deg, #E7B75A, #CE9A2E); }

/* AI assistant */
.lp-assistant { width: 100%; max-width: 380px; background: #fff; border: 1px solid var(--lp-border); border-radius: var(--lp-r-lg); padding: 18px; box-shadow: var(--lp-shadow-md); display: grid; gap: 12px; }
.lp-assistant__msg { padding: 12px 14px; border-radius: 14px; font-size: .92rem; line-height: 1.7; }
.lp-assistant__msg--user { background: var(--lp-primary); color: #fff; border-end-end-radius: 4px; justify-self: start; }
.lp-assistant__msg--bot { background: var(--lp-surface-2); color: var(--lp-text); display: flex; gap: 10px; border-end-start-radius: 4px; }
.lp-assistant__msg--bot b { color: var(--lp-primary-active); }
.lp-assistant__ic { width: 32px; height: 32px; border-radius: 9px; background: var(--lp-primary-light); color: var(--lp-primary); display: grid; place-items: center; flex: 0 0 auto; }
.lp-assistant__actions { display: flex; justify-content: flex-start; }
.lp-assistant__ok { display: inline-flex; align-items: center; gap: 7px; background: var(--lp-success-bg); color: var(--lp-success); padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: .86rem; }

/* ----------------------------- PREVIEW ------------------------------- */
.lp-preview { background: var(--lp-white); }
.lp-preview__frame { max-width: 960px; margin: 0 auto; background: #fff; border: 1px solid var(--lp-border); border-radius: var(--lp-r-lg); box-shadow: var(--lp-shadow-lg); overflow: hidden; }
.lp-preview__stage { padding: 22px; background: var(--lp-surface-2); }
.lp-preview__kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 16px; }
.lp-preview__kpis > div { background: #fff; border: 1px solid var(--lp-border); border-radius: 14px; padding: 14px; box-shadow: var(--lp-shadow-xs); }
.lp-preview__kpis span { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--lp-primary-light); color: var(--lp-primary); margin-bottom: 10px; }
.lp-preview__kpis span.g { background: var(--lp-success-bg); color: var(--lp-success); }
.lp-preview__kpis span.y { background: var(--lp-warning-bg); color: var(--lp-warning); }
.lp-preview__kpis span.r { background: var(--lp-primary-light); color: var(--lp-primary); }
.lp-preview__kpis b { display: block; font-size: 1.3rem; color: var(--lp-ink); }
.lp-preview__kpis small { color: var(--lp-muted); font-size: .82rem; }
.lp-preview__cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.lp-preview__panel { background: #fff; border: 1px solid var(--lp-border); border-radius: 14px; padding: 16px; }
.lp-preview__panel-head { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--lp-ink); margin-bottom: 14px; font-size: .94rem; }
.lp-preview__panel-head i { color: var(--lp-primary); }
.lp-preview__feed { display: grid; gap: 10px; }
.lp-preview__feed li { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--lp-text); padding: 9px 11px; border-radius: 10px; background: var(--lp-surface-2); }
.lp-preview__feed i { color: var(--lp-primary); width: 18px; text-align: center; }

/* ------------------------------- WHY --------------------------------- */
.lp-why { background: var(--lp-surface-2); }
.lp-why__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.lp-why__item { background: #fff; border: 1px solid var(--lp-border); border-radius: var(--lp-r); padding: 26px; transition: transform .2s ease, box-shadow .2s ease; }
.lp-why__item:hover { transform: translateY(-4px); box-shadow: var(--lp-shadow-md); }
.lp-why__item i { font-size: 1.5rem; color: var(--lp-primary); margin-bottom: 14px; display: inline-block; }
.lp-why__item h3 { font-size: 1.1rem; margin-bottom: 8px; }
.lp-why__item p { color: var(--lp-muted); font-size: .94rem; }

/* ----------------------------- PRICING ------------------------------- */
.lp-pricing { background: var(--lp-white); }
.lp-plans { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; align-items: start; }
.lp-plan {
  position: relative; background: #fff; border: 1px solid var(--lp-border);
  border-radius: var(--lp-r-lg); padding: 30px 26px; box-shadow: var(--lp-shadow-sm);
  display: flex; flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.lp-plan:hover { transform: translateY(-6px); box-shadow: var(--lp-shadow-lg); border-color: var(--lp-primary-soft); }
.lp-plan--popular {
  border-color: var(--lp-primary); box-shadow: var(--lp-shadow-red);
  transform: scale(1.03);
}
.lp-plan--popular:hover { transform: scale(1.03) translateY(-6px); }
.lp-plan--advanced { background: linear-gradient(180deg, #fff 0%, #FDF3F3 100%); border-color: var(--lp-primary-soft); }

.lp-plan__badge {
  position: absolute; top: -14px; inset-inline-start: 50%; transform: translateX(50%);
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--lp-grad); color: #fff; padding: 6px 16px; border-radius: 999px;
  font-weight: 700; font-size: .8rem; box-shadow: var(--lp-shadow-red); white-space: nowrap;
}
.lp-plan__badge--adv { background: linear-gradient(135deg, #7A2E3A, #B94A4C); }

.lp-plan__head { text-align: center; margin-bottom: 18px; }
.lp-plan__ic { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; margin: 0 auto 14px; background: var(--lp-primary-light); color: var(--lp-primary); font-size: 1.5rem; }
.lp-plan--popular .lp-plan__ic { background: var(--lp-grad); color: #fff; }
.lp-plan--advanced .lp-plan__ic { background: linear-gradient(135deg, #7A2E3A, #B94A4C); color: #fff; }
.lp-plan__name { font-size: 1.35rem; }
.lp-plan__desc { margin-top: 8px; color: var(--lp-muted); font-size: .9rem; min-height: 42px; }

.lp-plan__price { text-align: center; margin: 6px 0 20px; display: flex; flex-direction: column; align-items: center; }
.lp-plan__price b { font-size: 2.6rem; font-weight: 800; color: var(--lp-ink); line-height: 1; }
.lp-plan__price span { color: var(--lp-muted); font-size: .95rem; margin-top: 6px; }

.lp-plan__list { margin: 22px 0 18px; }
.lp-plan__list li { font-size: .94rem; }
.lp-plan__more {
  margin-top: auto; align-self: center; background: transparent; border: none;
  color: var(--lp-primary-active); font-weight: 700; font-size: .92rem;
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px;
  transition: background .16s ease, gap .16s ease;
}
.lp-plan__more:hover { background: var(--lp-primary-light); gap: 10px; }

/* Holoo notice */
.lp-holoo-note {
  display: flex; gap: 18px; align-items: flex-start; margin-top: 34px;
  background: linear-gradient(120deg, #FFFDF8, var(--lp-primary-050));
  border: 1px solid var(--lp-primary-soft); border-radius: var(--lp-r-lg);
  padding: 24px 26px; box-shadow: var(--lp-shadow-sm);
}
.lp-holoo-note__ic { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--lp-primary-light); color: var(--lp-primary); font-size: 1.3rem; }
.lp-holoo-note__body b { color: var(--lp-ink); font-size: 1.05rem; }
.lp-holoo-note__body p { color: var(--lp-text); margin-top: 6px; }
.lp-holoo-note__meta { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; margin-top: 12px; }
.lp-holoo-note__price { display: inline-flex; align-items: center; gap: 8px; color: var(--lp-primary-active); font-weight: 700; }
.lp-holoo-note__price b { color: var(--lp-primary-active); font-size: 1rem; }
.lp-holoo-note__sep { color: var(--lp-muted); font-size: .9rem; }

/* ----------------------------- COMPARE ------------------------------- */
.lp-compare { background: var(--lp-surface-2); }
.lp-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-bottom: 24px; color: var(--lp-muted); font-size: .88rem; }
.lp-legend span { display: inline-flex; align-items: center; gap: 7px; }
.lp-st--full { color: var(--lp-success); }
.lp-st--partial { color: var(--lp-warning); }
.lp-st--none { color: var(--lp-faint); }
.lp-st--addon { color: var(--lp-primary); }

.lp-compare__tabs { display: none; }

.lp-compare__table-wrap { overflow-x: auto; border-radius: var(--lp-r-lg); border: 1px solid var(--lp-border); box-shadow: var(--lp-shadow-sm); background: #fff; }
.lp-compare__table { width: 100%; border-collapse: collapse; min-width: 640px; }
.lp-compare__table caption { caption-side: top; }
.lp-compare__table thead th {
  position: sticky; top: 0; z-index: 2; background: #fff;
  padding: 18px 16px; text-align: center; font-size: 1rem; color: var(--lp-ink);
  border-bottom: 2px solid var(--lp-border);
}
.lp-compare__table thead th.lp-compare__feat-col { text-align: start; }
.lp-compare__table thead th.is-pop { color: var(--lp-primary); position: sticky; }
.lp-compare__table thead th.is-pop::after { content: "محبوب"; display: block; font-size: .68rem; font-weight: 700; color: #fff; background: var(--lp-primary); border-radius: 999px; padding: 1px 8px; margin: 5px auto 0; width: max-content; }
.lp-cat-row td { background: var(--lp-primary-050); padding: 12px 16px; font-weight: 800; color: var(--lp-primary-active); border-top: 1px solid var(--lp-border); }
.lp-cat-row td i { margin-inline-end: 8px; }
.lp-compare__table tbody tr.lp-feat-row td { padding: 13px 16px; border-top: 1px solid var(--lp-border-2); font-size: .92rem; }
.lp-compare__table tbody tr.lp-feat-row td:first-child { text-align: start; color: var(--lp-text); }
.lp-compare__table tbody tr.lp-feat-row td:not(:first-child) { text-align: center; }
.lp-compare__table tbody tr.lp-feat-row:hover td { background: var(--lp-surface-2); }
.lp-compare__table col.is-pop, .lp-compare__table td.is-pop { background: rgba(220,100,101,.035); }

.lp-cell { display: inline-flex; align-items: center; gap: 6px; justify-content: center; font-weight: 600; font-size: .84rem; }
.lp-cell i { font-size: 1rem; }
.lp-cell--full { color: var(--lp-success); }
.lp-cell--partial { color: #B5791C; }
.lp-cell--none { color: var(--lp-faint); }
.lp-cell--addon { color: var(--lp-primary-active); }
.lp-cell__tip { cursor: help; border-bottom: 1px dotted currentColor; }
.lp-feat-label { display: inline-flex; align-items: center; gap: 7px; }
.lp-feat-label .lp-info { color: var(--lp-faint); font-size: .78rem; cursor: help; }

/* ------------------------------ HOLOO -------------------------------- */
.lp-holoo { background: var(--lp-white); }
.lp-holoo__card { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; background: var(--lp-grad-soft); border: 1px solid var(--lp-primary-soft); border-radius: var(--lp-r-xl); padding: 40px; box-shadow: var(--lp-shadow-sm); }
.lp-holoo__text h2 { font-size: clamp(1.4rem, 2.8vw, 2rem); margin: 8px 0 12px; }
.lp-holoo__text > p { color: var(--lp-muted); }
.lp-holoo__sync { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.lp-holoo__sync span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--lp-border); font-size: .88rem; font-weight: 600; }
.lp-holoo__sync i { color: var(--lp-primary); }
.lp-holoo__disclaimer { display: flex; gap: 10px; background: var(--lp-primary-light); border: 1px solid var(--lp-primary-soft); border-radius: var(--lp-r); padding: 14px 16px; color: var(--lp-text); font-size: .92rem; margin: 8px 0 22px; }
.lp-holoo__disclaimer i { color: var(--lp-primary); margin-top: 4px; }
.lp-holoo__disclaimer b { color: var(--lp-primary-active); }
.lp-holoo__art { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lp-holoo__node { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 150px; padding: 22px; border-radius: var(--lp-r-lg); background: #fff; border: 1px solid var(--lp-border); box-shadow: var(--lp-shadow-md); font-weight: 800; }
.lp-holoo__node i { font-size: 1.8rem; }
.lp-holoo__node--crm i { color: var(--lp-primary); }
.lp-holoo__node--holoo i { color: #2E7D5B; }
.lp-holoo__link { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--lp-primary); color: #fff; box-shadow: var(--lp-shadow-red); animation: lp-pulse 2.4s ease-in-out infinite; }
@keyframes lp-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(220,100,101,.4);} 50% { box-shadow: 0 0 0 10px rgba(220,100,101,0);} }

/* ------------------------------- FAQ --------------------------------- */
.lp-faq { background: var(--lp-surface-2); }
.lp-faq__inner { max-width: 820px; }
.lp-accordion { display: grid; gap: 12px; }
.lp-acc { background: #fff; border: 1px solid var(--lp-border); border-radius: var(--lp-r); overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease; }
.lp-acc.is-open { border-color: var(--lp-primary-soft); box-shadow: var(--lp-shadow-sm); }
.lp-acc__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; background: transparent; border: none; text-align: start; font-weight: 700; font-size: 1rem; color: var(--lp-ink); }
.lp-acc__q i { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--lp-primary-light); color: var(--lp-primary); transition: transform .28s ease, background .2s ease; }
.lp-acc.is-open .lp-acc__q i { transform: rotate(135deg); background: var(--lp-primary); color: #fff; }
.lp-acc__a { max-height: 0; overflow: hidden; transition: max-height .32s ease; }
.lp-acc__a p { padding: 0 20px 20px; color: var(--lp-muted); line-height: 1.9; }

/* ------------------------------- CTA --------------------------------- */
.lp-cta { background: var(--lp-white); }
.lp-cta__box { position: relative; overflow: hidden; text-align: center; background: var(--lp-grad); border-radius: var(--lp-r-xl); padding: 66px 32px; color: #fff; box-shadow: var(--lp-shadow-red); }
.lp-cta__glow { position: absolute; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.25), transparent 65%); top: -180px; inset-inline-start: -80px; }
.lp-cta__box h2 { position: relative; color: #fff; font-size: clamp(1.5rem, 3.2vw, 2.3rem); }
.lp-cta__box p { position: relative; margin: 16px auto 30px; max-width: 640px; opacity: .95; font-size: 1.08rem; }
.lp-cta__actions { position: relative; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ------------------------------ FOOTER ------------------------------- */
.lp-footer { background: var(--lp-ink); color: #C6CAD3; }
.lp-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: 34px; padding: 60px 24px 40px; }
.lp-footer .lp-brand__name { color: #fff; }
.lp-footer__brand > p { margin: 16px 0 18px; color: #9AA0AC; font-size: .92rem; max-width: 320px; }
.lp-footer__social { display: flex; gap: 10px; }
.lp-footer__social a { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: rgba(255,255,255,.07); color: #C6CAD3; transition: background .18s ease, color .18s ease, transform .18s ease; }
.lp-footer__social a:hover { background: var(--lp-primary); color: #fff; transform: translateY(-2px); }
.lp-footer__col h4 { color: #fff; font-size: 1rem; margin-bottom: 16px; }
.lp-footer__col a, .lp-footer__addr { display: flex; align-items: center; gap: 8px; color: #9AA0AC; font-size: .9rem; padding: 5px 0; transition: color .16s ease; }
.lp-footer__col a:hover { color: #fff; }
.lp-footer__col a i, .lp-footer__addr i { color: var(--lp-primary); width: 16px; text-align: center; }
.lp-footer__bar { border-top: 1px solid rgba(255,255,255,.08); }
.lp-footer__bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 18px; font-size: .84rem; color: #8A8F9B; }
.lp-footer__legal { display: flex; gap: 20px; }
.lp-footer__legal a { color: #8A8F9B; }
.lp-footer__legal a:hover { color: #fff; }

/* ------------------------------ MODAL -------------------------------- */
.lp-modal { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 20px; }
.lp-modal[hidden] { display: none; }
.lp-modal__backdrop { position: absolute; inset: 0; background: rgba(16,24,40,.5); backdrop-filter: blur(3px); animation: lp-fade .25s ease; }
.lp-modal__dialog {
  position: relative; width: 100%; max-width: 620px; max-height: 88vh; overflow: hidden;
  background: #fff; border-radius: var(--lp-r-xl); box-shadow: var(--lp-shadow-lg);
  display: flex; flex-direction: column; animation: lp-modal-in .3s cubic-bezier(.2,.7,.3,1) both;
}
.lp-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 24px 14px; border-bottom: 1px solid var(--lp-border); }
.lp-modal__title { font-size: 1.3rem; }
.lp-modal__title .lp-modal__tag { font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--lp-primary-light); color: var(--lp-primary-active); margin-inline-start: 8px; }
.lp-modal__close { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--lp-border); background: #fff; color: var(--lp-muted); display: grid; place-items: center; font-size: 1rem; transition: all .16s ease; }
.lp-modal__close:hover { background: var(--lp-primary-light); color: var(--lp-primary); border-color: var(--lp-primary-soft); }
.lp-modal__price { padding: 12px 24px 0; color: var(--lp-muted); }
.lp-modal__price b { color: var(--lp-ink); font-size: 1.5rem; }
.lp-modal__body { padding: 16px 24px 8px; overflow-y: auto; }
.lp-modal__group { margin-bottom: 18px; }
.lp-modal__group h4 { display: flex; align-items: center; gap: 8px; font-size: 1rem; color: var(--lp-primary-active); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px dashed var(--lp-border); }
.lp-modal__group h4 i { color: var(--lp-primary); }
.lp-modal__group ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.lp-modal__group li { position: relative; padding-inline-start: 24px; font-size: .9rem; color: var(--lp-text); }
.lp-modal__group li::before { content: "\f00c"; font-family: "Font Awesome 7 Pro","Font Awesome 6 Pro","Font Awesome 5 Pro","FontAwesome"; font-weight: 900; position: absolute; inset-inline-start: 0; top: 3px; color: var(--lp-success); font-size: .72rem; }
.lp-modal__note { display: flex; gap: 10px; background: var(--lp-primary-light); border: 1px solid var(--lp-primary-soft); border-radius: var(--lp-r); padding: 12px 14px; font-size: .86rem; color: var(--lp-text); margin-top: 6px; }
.lp-modal__note i { color: var(--lp-primary); margin-top: 3px; }
.lp-modal__foot { padding: 16px 24px 22px; border-top: 1px solid var(--lp-border); }

@keyframes lp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lp-modal-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }

/* --------------------------- REVEAL ANIM ----------------------------- */
/* Hidden-initial state is gated behind `.lp-js` (added by nila_landing.js),
   so with JS disabled/failed everything stays fully visible. */
.lp-js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.lp-js [data-reveal].is-in { opacity: 1; transform: none; }
@keyframes lp-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1024px) {
  .lp-hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .lp-hero__visual { max-width: 560px; margin: 0 auto; }
  .lp-footer__grid { grid-template-columns: 1fr 1fr; }
  .lp-holoo__card { grid-template-columns: 1fr; }
  .lp-holoo__art { flex-direction: row; justify-content: center; margin-top: 8px; }
  .lp-holoo__link { transform: rotate(90deg); }
}

@media (max-width: 860px) {
  .lp-section { padding: 68px 0; }
  .lp-nav {
    position: fixed; inset: 0 0 0 auto; width: min(84vw, 340px);
    flex-direction: column; align-items: stretch; gap: 6px;
    background: #fff; padding: 78px 20px 24px; z-index: 99;
    transform: translateX(100%); transition: transform .32s cubic-bezier(.2,.8,.2,1);
    box-shadow: -12px 0 40px rgba(16,24,40,.15); overflow-y: auto;
  }
  .lp-nav.is-open { transform: translateX(0); }
  .lp-nav__close { display: grid; place-items: center; position: absolute; top: 18px; inset-inline-start: 18px; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--lp-border); background: #fff; color: var(--lp-muted); font-size: 1.1rem; }
  .lp-nav__link { padding: 13px 14px; border-radius: 12px; font-size: 1rem; }
  .lp-nav__cta { flex-direction: column; align-items: stretch; margin: 12px 0 0; gap: 10px; }
  .lp-nav__cta .lp-btn { width: 100%; }
  .lp-burger { display: flex; }
  .lp-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .lp-burger.is-open span:nth-child(2) { opacity: 0; }
  .lp-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .lp-trust__grid { grid-template-columns: 1fr 1fr; }
  .lp-tabpanel.is-active { grid-template-columns: 1fr; gap: 26px; }
  .lp-tabpanel__art { order: -1; }
  .lp-split, .lp-split--reverse .lp-split__text { grid-template-columns: 1fr; }
  .lp-split__text, .lp-split--reverse .lp-split__text { order: 0; }
  .lp-split__art { order: -1; }
  .lp-why__grid { grid-template-columns: 1fr 1fr; }
  .lp-preview__cols { grid-template-columns: 1fr; }
  .lp-preview__kpis { grid-template-columns: 1fr 1fr; }

  .lp-plans { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .lp-plan--popular { transform: none; order: -1; }
  .lp-plan--popular:hover { transform: translateY(-6px); }

  /* Comparison → single active column on mobile */
  .lp-compare__tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 18px; }
  .lp-compare__tab { flex: 1; max-width: 140px; padding: 10px; border-radius: 12px; border: 1px solid var(--lp-border); background: #fff; font-weight: 700; color: var(--lp-text); }
  .lp-compare__tab.is-active { background: var(--lp-primary); border-color: var(--lp-primary); color: #fff; }
  .lp-compare__table { min-width: 0; }
  .lp-compare__table col, .lp-compare__table thead th:not(.lp-compare__feat-col),
  .lp-compare__table tbody td:not(:first-child) { display: none; }
  .lp-compare__table thead th[data-col].is-active-col,
  .lp-compare__table tbody td[data-col].is-active-col { display: table-cell; }
  .lp-compare__table thead th.lp-compare__feat-col { display: table-cell; }
  .lp-compare__table tbody tr.lp-feat-row td:first-child { display: table-cell; }
  .lp-cat-row td { display: table-cell !important; }

  .lp-modal__group ul { grid-template-columns: 1fr; }
  .lp-footer__bar-inner { flex-direction: column; text-align: center; }
}

@media (max-width: 520px) {
  .lp-container { padding-inline: 16px; }
  .lp-hero { padding-top: 40px; }
  .lp-hero__stats { gap: 22px; }
  .lp-hero__stats b { font-size: 1.5rem; }
  .lp-trust__grid { grid-template-columns: 1fr; }
  .lp-why__grid { grid-template-columns: 1fr; }
  .lp-tabs__nav { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .lp-tab { flex: 0 0 auto; }
  .lp-preview__kpis { grid-template-columns: 1fr; }
  .lp-holoo__card { padding: 24px; }
  .lp-holoo__art { flex-direction: column; }
  .lp-holoo__link { transform: none; }
  .lp-float--club { inset-inline-start: 0; }
  .lp-float--auto { inset-inline-start: -2%; }
  .lp-btn--lg { width: 100%; }
  .lp-hero__actions .lp-btn { width: 100%; }
}

/* ------------------------- REDUCED MOTION ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nila-lp *, .nila-lp *::before, .nila-lp *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .lp-js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .lp-float { animation: none !important; }
}