/*!
 * Munchkin — Pet Care HTML Template
 * Landing Page Styles v1.0  |  Metropolitanhost
 * All rules scoped to .lp-* — zero global overrides
 */

/* ── CSS Variables ──────────────────────────────────────────────────────── */
:root {
  --lp-primary:      #ff8e15;
  --lp-primary-dark: #d97100;
  --lp-dark:         #393d72;
  --lp-dark-2:       #2e3160;
  --lp-light:        #fff8ee;
  --lp-warm:         #fff3d9;
  --lp-text:         #555;
  --lp-border:       #e8ddd0;
  --lp-radius:       12px;
  --lp-radius-lg:    20px;
  --lp-shadow:       0 4px 24px rgba(57,61,114,.12);
  --lp-shadow-lg:    0 8px 48px rgba(57,61,114,.18);
  --lp-grad:         linear-gradient(135deg, #ff8e15 0%, #d97100 100%);
  --lp-grad-dark:    linear-gradient(135deg, #393d72 0%, #2e3160 100%);
  --lp-font:         'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --lp-font-heading: 'Baloo Thambi 2', 'Lato', sans-serif;
  --lp-nav-h:        72px;
}

/* ── Reset / Base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

.lp-body {
  font-family: var(--lp-font);
  font-size:   16px;
  line-height: 1.7;
  color:       var(--lp-text);
  background:  #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.lp-body img { max-width: 100%; height: auto; display: block; }
.lp-body a   { color: var(--lp-primary); text-decoration: none; }
.lp-body a:hover { color: var(--lp-primary-dark); }

/* ── Skip link (accessibility) ──────────────────────────────────────────── */
.lp-skip-link {
  position:   absolute;
  top:        -60px;
  left:       16px;
  z-index:    9999;
  padding:    8px 20px;
  background: var(--lp-dark);
  color:      #fff !important;
  border-radius: var(--lp-radius);
  font-size:  14px;
  font-weight: 700;
  transition: top .2s;
}
.lp-skip-link:focus { top: 16px; outline: 3px solid var(--lp-primary); }


/* ── Tawk.to floating support ───────────────────────────────────────────── */
.lp-tawk {
  position:   fixed;
  bottom:     80px;
  right:      20px;
  z-index:    990;
  width:      48px;
  height:     48px;
  background: var(--lp-grad);
  color:      #fff !important;
  border-radius: 50%;
  display:    flex;
  align-items: center;
  justify-content: center;
  font-size:  20px;
  box-shadow: 0 4px 16px rgba(255,142,21,.45);
  transition: transform .2s, box-shadow .2s;
}
.lp-tawk:hover { transform: scale(1.12); box-shadow: 0 6px 24px rgba(255,142,21,.6); }

/* ── Sticky Nav ─────────────────────────────────────────────────────────── */
.lp-nav {
  position:   fixed;
  top:        0;
  left:       0;
  right:      0;
  z-index:    1000;
  height:     var(--lp-nav-h);
  background: transparent;
  transition: background .3s, box-shadow .3s;
}
.lp-nav.scrolled {
  background: rgba(255,255,255,.97);
  box-shadow: 0 2px 20px rgba(57,61,114,.10);
  backdrop-filter: blur(8px);
}
.lp-nav-inner {
  max-width:  1200px;
  margin:     0 auto;
  padding:    0 24px;
  height:     100%;
  display:    flex;
  align-items: center;
  justify-content: space-between;
  gap:        16px;
}
.lp-nav-brand { display: flex; align-items: center; flex-shrink: 0; }
.lp-logo      { height: 42px; width: auto; }
.lp-nav.scrolled .lp-logo-light { display: none; }
.lp-nav-links {
  display:    flex;
  align-items: center;
  gap:        6px;
}
.lp-nav-links a {
  padding:    8px 14px;
  color:      rgba(255,255,255,.9);
  font-size:  15px;
  font-weight: 600;
  border-radius: 8px;
  transition: color .2s, background .2s;
}
.lp-nav.scrolled .lp-nav-links a { color: var(--lp-dark); }
.lp-nav-links a:hover,
.lp-nav-links a.active { background: rgba(255,142,21,.12); color: var(--lp-primary) !important; }
.lp-btn-buy {
  background: var(--lp-grad) !important;
  color:      #fff !important;
  padding:    9px 22px !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  box-shadow: 0 3px 12px rgba(255,142,21,.35);
  transition: opacity .2s, transform .2s !important;
}
.lp-btn-buy:hover { opacity: .9; transform: translateY(-1px); }

/* ── Mobile hamburger ───────────────────────────────────────────────────── */
.lp-nav-toggle {
  display:    none;
  background: none;
  border:     none;
  cursor:     pointer;
  padding:    8px;
  color:      #fff;
  font-size:  22px;
  line-height: 1;
}
.lp-nav.scrolled .lp-nav-toggle { color: var(--lp-dark); }


/* ── Shared Section Styles ──────────────────────────────────────────────── */
.lp-section         { padding: 90px 0; }
.lp-section-dark    { background: var(--lp-dark); color: #fff; }
.lp-section-light   { background: var(--lp-light); }
.lp-section-warm    { background: var(--lp-warm); }
.lp-container       { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.lp-section-tag {
  display:    inline-block;
  padding:    5px 18px;
  background: rgba(255,142,21,.12);
  color:      var(--lp-primary);
  font-size:  13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 50px;
  margin-bottom: 14px;
}
.lp-section-dark .lp-section-tag {
  background: rgba(255,255,255,.12);
  color:      rgba(255,255,255,.9);
}
.lp-section-title {
  font-family: var(--lp-font-heading);
  font-size:   clamp(26px, 4vw, 40px);
  font-weight: 700;
  color:       var(--lp-dark);
  line-height: 1.2;
  margin-bottom: 14px;
}
.lp-section-dark .lp-section-title { color: #fff; }
.lp-section-subtitle {
  font-size:  17px;
  color:      #888;
  max-width:  600px;
  margin:     0 auto;
}
.lp-section-dark .lp-section-subtitle { color: rgba(255,255,255,.7); }
.lp-text-center { text-align: center; }

/* ── Shared Button Styles ───────────────────────────────────────────────── */
.lp-btn {
  display:        inline-flex;
  align-items:    center;
  gap:            8px;
  padding:        13px 28px;
  font-family:    var(--lp-font);
  font-size:      15px;
  font-weight:    700;
  border-radius:  50px;
  border:         2px solid transparent;
  cursor:         pointer;
  transition:     transform .2s, box-shadow .2s, opacity .2s;
  white-space:    nowrap;
  text-decoration: none !important;
}
.lp-btn:hover { transform: translateY(-2px); }
.lp-btn-primary {
  background: var(--lp-grad);
  color:      #fff !important;
  box-shadow: 0 4px 18px rgba(255,142,21,.40);
}
.lp-btn-primary:hover { box-shadow: 0 6px 28px rgba(255,142,21,.55); }
.lp-btn-outline {
  background: transparent;
  border-color: rgba(255,255,255,.75);
  color:       #fff !important;
}
.lp-btn-outline:hover { background: rgba(255,255,255,.12); }
.lp-btn-dark {
  background: var(--lp-grad-dark);
  color:      #fff !important;
  box-shadow: 0 4px 16px rgba(57,61,114,.3);
}


/* ── Hero ───────────────────────────────────────────────────────────────── */
.lp-hero {
  position:   relative;
  min-height: 100vh;
  display:    flex;
  align-items: center;
  overflow:   hidden;
  background: linear-gradient(135deg, #2a2e5e 0%, #393d72 55%, #2e3160 100%);
}
.lp-hero-inner {
  position: relative;
  z-index:  2;
  padding:  110px 24px 70px;
  max-width: 1240px;
  margin:   0 auto;
  width:    100%;
  display:  grid;
  grid-template-columns: 1fr 1fr;
  gap:      56px;
  align-items: center;
}
.lp-hero-content { /* left column — text */ }

/* ── Browser mockup (right column) ─────────────────────────────────────── */
.lp-hero-visual {
  position: relative;
  display:  flex;
  justify-content: center;
}
.lp-hero-browser {
  background:    #1a1d3a;
  border-radius: 14px;
  overflow:      hidden;
  box-shadow:    0 28px 90px rgba(0,0,0,.60), 0 0 0 1px rgba(255,255,255,.08);
  width:         100%;
  max-width:     560px;
  animation:     lp-float 5s ease-in-out infinite;
}
.lp-hero-browser-bar {
  background: #252847;
  padding:    10px 14px;
  display:    flex;
  align-items: center;
  gap:        6px;
}
.lp-browser-dot          { width: 11px; height: 11px; border-radius: 50%; }
.lp-browser-dot:nth-child(1) { background: #ff5f56; }
.lp-browser-dot:nth-child(2) { background: #febc2e; }
.lp-browser-dot:nth-child(3) { background: #28c840; }
.lp-hero-browser-img {
  display: block;
  width:   100%;
  height:  auto;
}
@keyframes lp-float {
  0%, 100% { transform: translateY(0);    }
  50%      { transform: translateY(-10px); }
}
.lp-hero-badge {
  display:    inline-block;
  padding:    6px 20px;
  background: rgba(255,142,21,.18);
  border:     1px solid rgba(255,142,21,.45);
  color:      #ffb866;
  font-size:  12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 50px;
  margin-bottom: 22px;
}
.lp-hero-title {
  font-family: var(--lp-font-heading);
  font-size:   clamp(32px, 6vw, 64px);
  font-weight: 800;
  color:       #fff;
  line-height: 1.12;
  margin-bottom: 22px;
  letter-spacing: -.5px;
}
.lp-hero-desc {
  font-size:  18px;
  color:      rgba(255,255,255,.82);
  max-width:  520px;
  margin:     0 0 36px;
  line-height: 1.65;
}
.lp-hero-ctas { display: flex; gap: 14px; justify-content: flex-start; flex-wrap: wrap; margin-bottom: 44px; }
.lp-hero-stats {
  display:    flex;
  gap:        0;
  justify-content: flex-start;
  flex-wrap:  wrap;
  background: rgba(255,255,255,.08);
  border:     1px solid rgba(255,255,255,.15);
  border-radius: var(--lp-radius-lg);
  padding:    20px 8px;
  max-width:  520px;
  margin:     0;
  backdrop-filter: blur(8px);
}
.lp-stat {
  flex:       1 1 120px;
  text-align: center;
  padding:    10px 16px;
  border-right: 1px solid rgba(255,255,255,.12);
}
.lp-stat:last-child  { border-right: none; }
.lp-stat-number {
  display:    block;
  font-family: var(--lp-font-heading);
  font-size:  clamp(26px, 4vw, 38px);
  font-weight: 800;
  color:      var(--lp-primary);
  line-height: 1;
}
.lp-stat-label {
  display:    block;
  font-size:  12px;
  font-weight: 600;
  color:      rgba(255,255,255,.7);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: 6px;
}

/* ── Trust Strip ────────────────────────────────────────────────────────── */
.lp-trust {
  background: var(--lp-dark);
  padding:    16px 24px;
}
.lp-trust-inner {
  max-width:  1200px;
  margin:     0 auto;
  display:    flex;
  align-items: center;
  justify-content: center;
  flex-wrap:  wrap;
  gap:        6px 24px;
}
.lp-trust-item {
  display:    flex;
  align-items: center;
  gap:        7px;
  font-size:  13px;
  font-weight: 600;
  color:      rgba(255,255,255,.85);
  white-space: nowrap;
}
.lp-trust-item i { color: var(--lp-primary); font-size: 14px; }


/* ── Demo Cards ─────────────────────────────────────────────────────────── */
.lp-demos { padding: 100px 0; background: #fff; }
.lp-demos-grid {
  display:        flex;
  flex-direction: column;
  gap:            44px;
  margin-top:     56px;
}
.lp-demo-card {
  display:       grid;
  grid-template-columns: 60% 40%;
  height:        460px;
  border-radius: 20px;
  overflow:      hidden;
  box-shadow:    0 6px 40px rgba(57,61,114,.11);
  background:    #fff;
  transition:    transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s;
}
.lp-demo-card:nth-child(even) { grid-template-columns: 40% 60%; }
.lp-demo-card:nth-child(even) .lp-demo-thumb { order: 2; }
.lp-demo-card:nth-child(even) .lp-demo-info  { order: 1; }
.lp-demo-card:hover {
  transform:  translateY(-6px);
  box-shadow: 0 20px 72px rgba(57,61,114,.20);
}
/* thumbnail side */
.lp-demo-thumb {
  position:   relative;
  overflow:   hidden;
  height:     460px;
  background: var(--lp-light);
  cursor:     zoom-in;
}
.lp-demo-thumb .lp-screenshot-wrapper {
  height:   460px;
  overflow: hidden;
  position: relative;
}
.lp-demo-thumb .lp-screenshot-wrapper img {
  width:     100%;
  height:    auto;
  display:   block;
  transform: translateY(0);
}
.lp-demo-badge {
  position:      absolute;
  top:           16px;
  left:          16px;
  z-index:       2;
  background:    var(--lp-grad);
  color:         #fff;
  font-size:     11px;
  font-weight:   700;
  padding:       5px 14px;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
/* info side */
.lp-demo-info {
  padding:         52px 48px 44px;
  display:         flex;
  flex-direction:  column;
  justify-content: flex-start;
  background:      #fff;
  border-left:     4px solid var(--lp-primary);
  text-align:      left;
}
.lp-demo-card:nth-child(even) .lp-demo-info {
  border-left:  none;
  border-right: 4px solid var(--lp-primary);
}
.lp-demo-info h3 {
  font-family: var(--lp-font-heading);
  font-size:   26px;
  font-weight: 700;
  color:       var(--lp-dark);
  margin:      0 0 14px;
}
.lp-demo-info p {
  font-size:   15px;
  color:       #777;
  margin:      0 0 28px;
  line-height: 1.7;
}
.lp-demo-link {
  display:     inline-flex;
  align-items: center;
  gap:         8px;
  font-size:   15px;
  font-weight: 700;
  color:       var(--lp-primary) !important;
  transition:  gap .2s;
  margin-top:  auto;
  padding-top: 20px;
  align-self:  flex-start;
}
.lp-demo-link:hover { gap: 14px; }
@media (max-width: 900px) {
  .lp-demo-card,
  .lp-demo-card:nth-child(even) {
    grid-template-columns: 1fr;
    height: auto;
  }
  .lp-demo-card:nth-child(even) .lp-demo-thumb { order: 0; }
  .lp-demo-card:nth-child(even) .lp-demo-info  { order: 0; }
  .lp-demo-thumb,
  .lp-demo-thumb .lp-screenshot-wrapper { height: 300px; }
  .lp-demo-info {
    padding:      32px 28px 28px;
    border-left:  4px solid var(--lp-primary) !important;
    border-right: none !important;
    border-top:   none !important;
  }
}

/* ── Features Grid ──────────────────────────────────────────────────────── */
.lp-features { padding: 90px 0; background: var(--lp-light); }
.lp-features-grid {
  display:   grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:       24px;
  margin-top: 50px;
}
.lp-feat-card {
  background:    #fff;
  border-radius: var(--lp-radius);
  padding:       28px 24px;
  border:        1px solid var(--lp-border);
  transition:    transform .25s, box-shadow .25s, border-color .25s;
}
.lp-feat-card:hover {
  transform:    translateY(-5px);
  box-shadow:   var(--lp-shadow);
  border-color: rgba(255,142,21,.35);
}
.lp-feat-icon {
  width:         50px;
  height:        50px;
  background:    rgba(255,142,21,.10);
  border-radius: 14px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     22px;
  color:         var(--lp-primary);
  margin-bottom: 16px;
  transition:    background .25s;
}
.lp-feat-card:hover .lp-feat-icon { background: rgba(255,142,21,.20); }
.lp-feat-card h3 {
  font-family:   var(--lp-font-heading);
  font-size:     17px;
  font-weight:   700;
  color:         var(--lp-dark);
  margin:        0 0 8px;
}
.lp-feat-card p  { font-size: 14px; color: #888; margin: 0; line-height: 1.6; }


/* ── What's New ─────────────────────────────────────────────────────────── */
.lp-whats-new { padding: 90px 0; background: var(--lp-dark); }
.lp-wn-grid {
  display:   grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:       20px;
  margin-top: 50px;
}
.lp-wn-card {
  background: rgba(255,255,255,.06);
  border:     1px solid rgba(255,255,255,.10);
  border-radius: var(--lp-radius);
  padding:    24px 22px;
  display:    flex;
  gap:        16px;
  transition: background .25s, border-color .25s;
}
.lp-wn-card:hover {
  background:   rgba(255,142,21,.10);
  border-color: rgba(255,142,21,.35);
}
.lp-wn-icon {
  flex-shrink: 0;
  width:      44px;
  height:     44px;
  background: rgba(255,142,21,.15);
  border-radius: 12px;
  display:    flex;
  align-items: center;
  justify-content: center;
  font-size:  20px;
  color:      var(--lp-primary);
}
.lp-wn-card h3 {
  font-family: var(--lp-font-heading);
  font-size:  16px;
  font-weight: 700;
  color:      #fff;
  margin:     0 0 6px;
}
.lp-wn-card p  { font-size: 13px; color: rgba(255,255,255,.62); margin: 0; line-height: 1.6; }

/* ── Pages Section ──────────────────────────────────────────────────────── */
.lp-pages { padding: 90px 0; background: #fff; }
.lp-pages-groups {
  display:   grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap:       28px;
  margin-top: 50px;
}
.lp-pages-group h4 {
  font-family:   var(--lp-font-heading);
  font-size:     14px;
  font-weight:   700;
  text-transform: uppercase;
  letter-spacing: .10em;
  color:         var(--lp-primary);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(255,142,21,.20);
}
.lp-pages-group ul  { list-style: none; margin: 0; padding: 0; }
.lp-pages-group li  { margin-bottom: 8px; }
.lp-pages-group a {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-size:   14px;
  color:       var(--lp-text);
  transition:  color .2s, gap .2s;
}
.lp-pages-group a::before {
  content:      '\f054';
  font-family:  "Font Awesome 5 Pro";
  font-weight:  900;
  font-style:   normal;
  font-variant: normal;
  text-transform: none;
  line-height:  1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display:      inline-block;
  font-size:    10px;
  color:        var(--lp-primary);
  flex-shrink:  0;
}
.lp-pages-group a:hover { color: var(--lp-primary); gap: 12px; }

/* ── Page Preview Gallery (CSS Gradient Tiles) ──────────────────────────── */
.lp-gallery { padding: 90px 0; background: var(--lp-warm); }
.lp-gallery-grid {
  display:   grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap:       14px;
  margin-top: 50px;
}
.lp-gallery-tile {
  height:       110px;
  border-radius: var(--lp-radius);
  display:      flex;
  align-items:  center;
  justify-content: center;
  position:     relative;
  overflow:     hidden;
  cursor:       default;
  transition:   transform .25s, box-shadow .25s;
}
.lp-gallery-tile:hover { transform: scale(1.04); box-shadow: var(--lp-shadow); }
.lp-gallery-tile span {
  position:   relative;
  z-index:    2;
  font-size:  12px;
  font-weight: 700;
  color:      rgba(255,255,255,.92);
  text-align: center;
  padding:    0 10px;
  line-height: 1.3;
  text-shadow: 0 1px 4px rgba(0,0,0,.35);
}

/* Tile color variants */
.lp-tile-1  { background: linear-gradient(135deg,#ff8e15,#d97100); }
.lp-tile-2  { background: linear-gradient(135deg,#393d72,#5558a8); }
.lp-tile-3  { background: linear-gradient(135deg,#ff6b8a,#e8532a); }
.lp-tile-4  { background: linear-gradient(135deg,#2d9e6b,#1a7a4a); }
.lp-tile-5  { background: linear-gradient(135deg,#7c3aed,#5b21b6); }
.lp-tile-6  { background: linear-gradient(135deg,#0070ba,#003d6e); }
.lp-tile-7  { background: linear-gradient(135deg,#f59e0b,#d97706); }
.lp-tile-8  { background: linear-gradient(135deg,#e63946,#a01020); }


/* ── Browser Compatibility Bar ──────────────────────────────────────────── */
.lp-compat { padding: 50px 0; background: var(--lp-dark); }
.lp-compat-inner {
  max-width:  900px;
  margin:     0 auto;
  padding:    0 24px;
  text-align: center;
}
.lp-compat-inner h3 {
  font-family: var(--lp-font-heading);
  font-size:  22px;
  font-weight: 700;
  color:      #fff;
  margin-bottom: 28px;
}
.lp-compat-browsers {
  display:   flex;
  justify-content: center;
  flex-wrap: wrap;
  gap:       20px 36px;
}
.lp-browser {
  display:   flex;
  flex-direction: column;
  align-items: center;
  gap:       8px;
}
.lp-browser i   { font-size: 32px; }
.lp-browser span { font-size: 12px; font-weight: 600; }
.lp-browser.ok   i { color: #4ade80; }
.lp-browser.ok   span { color: rgba(255,255,255,.8); }
.lp-browser.no   i { color: #f87171; }
.lp-browser.no   span { color: rgba(255,255,255,.5); }

/* ── Versions Section ───────────────────────────────────────────────────── */
.lp-versions { padding: 90px 0; background: var(--lp-light); }
.lp-versions-grid {
  display:   grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:       24px;
  margin-top: 50px;
}
.lp-version-card {
  background:    #fff;
  border-radius: var(--lp-radius);
  padding:       30px 26px;
  border:        2px solid var(--lp-border);
  text-align:    center;
  transition:    transform .25s, box-shadow .25s, border-color .25s;
  position:      relative;
}
.lp-version-card:hover { transform: translateY(-4px); box-shadow: var(--lp-shadow); }
.lp-version-card.active {
  border-color: var(--lp-primary);
  box-shadow:   0 4px 32px rgba(255,142,21,.20);
}
.lp-version-active-badge {
  position:   absolute;
  top:        -13px;
  left:       50%;
  transform:  translateX(-50%);
  background: var(--lp-grad);
  color:      #fff;
  font-size:  11px;
  font-weight: 700;
  padding:    4px 16px;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}
.lp-version-icon {
  font-size:  38px;
  color:      var(--lp-primary);
  margin-bottom: 14px;
}
.lp-version-card.inactive .lp-version-icon { color: #bbb; }
.lp-version-card h3 {
  font-family: var(--lp-font-heading);
  font-size:  20px;
  font-weight: 700;
  color:      var(--lp-dark);
  margin:     0 0 10px;
}
.lp-version-card p  { font-size: 14px; color: #888; margin: 0 0 20px; line-height: 1.6; }
.lp-version-card.inactive h3,
.lp-version-card.inactive p { color: #bbb; }

/* ── Who Is It For (Use Cases) ──────────────────────────────────────────── */
.lp-usecases { padding: 90px 0; background: #fff; }
.lp-usecases-grid {
  display:   flex;
  flex-wrap: wrap;
  gap:       12px;
  justify-content: center;
  margin-top: 46px;
}
.lp-usecase-pill {
  display:    flex;
  align-items: center;
  gap:        9px;
  padding:    11px 22px;
  background: var(--lp-light);
  border:     1px solid var(--lp-border);
  border-radius: 50px;
  font-size:  15px;
  font-weight: 600;
  color:      var(--lp-dark);
  transition: background .2s, border-color .2s, color .2s, transform .2s;
  cursor:     default;
}
.lp-usecase-pill:hover {
  background:   rgba(255,142,21,.10);
  border-color: rgba(255,142,21,.40);
  color:        var(--lp-primary);
  transform:    translateY(-2px);
}
.lp-usecase-pill i { color: var(--lp-primary); font-size: 16px; }


/* ── Why + CTA Section ──────────────────────────────────────────────────── */
.lp-why { padding: 90px 0; background: var(--lp-warm); }
.lp-why-layout {
  display:   grid;
  grid-template-columns: 1fr 1fr;
  gap:       60px;
  align-items: center;
  margin-top: 50px;
}
.lp-why-list { list-style: none; margin: 0; padding: 0; }
.lp-why-list li {
  display:    flex;
  gap:        14px;
  align-items: flex-start;
  padding:    14px 0;
  border-bottom: 1px solid rgba(255,142,21,.15);
  font-size:  15px;
  color:      var(--lp-text);
}
.lp-why-list li:last-child { border-bottom: none; }
.lp-why-list li::before {
  content:      '\f00c';
  font-family:  "Font Awesome 5 Pro";
  font-weight:  900;
  font-style:   normal;
  font-variant: normal;
  text-transform: none;
  line-height:  1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display:      inline-block;
  color:        var(--lp-primary);
  font-size:    15px;
  margin-top:   2px;
  flex-shrink:  0;
}
.lp-cta-box {
  background: var(--lp-grad-dark);
  border-radius: var(--lp-radius-lg);
  padding:    44px 38px;
  text-align: center;
  box-shadow: var(--lp-shadow-lg);
}
.lp-cta-box .lp-cta-paw {
  font-size:  48px;
  margin-bottom: 16px;
  opacity:    .85;
}
.lp-cta-box h3 {
  font-family: var(--lp-font-heading);
  font-size:  clamp(22px, 3vw, 30px);
  font-weight: 800;
  color:      #fff;
  margin-bottom: 14px;
  line-height: 1.2;
}
.lp-cta-box p {
  font-size:  15px;
  color:      rgba(255,255,255,.75);
  margin-bottom: 28px;
  line-height: 1.65;
}
.lp-cta-btns { display: flex; flex-direction: column; gap: 12px; }

/* ── FAQ Section ────────────────────────────────────────────────────────── */
.lp-faq { padding: 90px 0; background: #fff; }
.lp-faq-list {
  max-width:  820px;
  margin:     50px auto 0;
}
.lp-faq-list .accordion-button {
  font-family:   var(--lp-font-heading);
  font-size:     17px;
  font-weight:   700;
  color:         var(--lp-dark);
  background:    #fff;
  padding:       20px 24px;
  border-radius: var(--lp-radius) !important;
  box-shadow:    none !important;
}
.lp-faq-list .accordion-button:not(.collapsed) {
  color:         var(--lp-primary);
  background:    rgba(255,142,21,.05);
}
.lp-faq-list .accordion-button::after {
  filter: none;
}
.lp-faq-list .accordion-button:not(.collapsed)::after {
  filter: hue-rotate(0deg) saturate(3) brightness(.85);
}
.lp-faq-list .accordion-item {
  border:        1px solid var(--lp-border) !important;
  border-radius: var(--lp-radius) !important;
  margin-bottom: 12px;
  overflow:      hidden;
}
.lp-faq-list .accordion-body {
  font-size:  15px;
  color:      #777;
  padding:    4px 24px 22px;
  line-height: 1.7;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.lp-footer { background: var(--lp-dark-2); padding: 70px 0 0; }
.lp-footer-grid {
  display:   grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap:       40px;
  padding-bottom: 50px;
}
.lp-footer-logo { height: 40px; width: auto; margin-bottom: 16px; }
.lp-footer-about {
  font-size:  14px;
  color:      rgba(255,255,255,.6);
  line-height: 1.7;
  margin:     0 0 20px;
}
.lp-footer-socials { display: flex; gap: 10px; }
.lp-footer-socials a {
  width:      36px;
  height:     36px;
  background: rgba(255,255,255,.08);
  border-radius: 8px;
  display:    flex;
  align-items: center;
  justify-content: center;
  color:      rgba(255,255,255,.7) !important;
  font-size:  14px;
  transition: background .2s, color .2s;
}
.lp-footer-socials a:hover { background: var(--lp-primary); color: #fff !important; }
.lp-footer-col h5 {
  font-family: var(--lp-font-heading);
  font-size:  15px;
  font-weight: 700;
  color:      #fff;
  margin-bottom: 18px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.lp-footer-col ul  { list-style: none; margin: 0; padding: 0; }
.lp-footer-col li  { margin-bottom: 10px; }
.lp-footer-col a {
  font-size:  14px;
  color:      rgba(255,255,255,.6);
  transition: color .2s;
}
.lp-footer-col a:hover { color: var(--lp-primary); }
.lp-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding:    20px 24px;
  text-align: center;
  font-size:  13px;
  color:      rgba(255,255,255,.45);
}
.lp-footer-bottom a { color: var(--lp-primary); }


/* ── Back-to-top Button ──────────────────────────────────────────────────── */
.lp-btt {
  position:   fixed;
  bottom:     24px;
  right:      20px;
  z-index:    995;
  width:      44px;
  height:     44px;
  background: var(--lp-grad);
  color:      #fff;
  border:     none;
  border-radius: 12px;
  font-size:  18px;
  font-weight: 700;
  cursor:     pointer;
  box-shadow: 0 4px 16px rgba(255,142,21,.40);
  opacity:    0;
  transform:  translateY(16px);
  pointer-events: none;
  transition: opacity .3s, transform .3s;
  display:    flex;
  align-items: center;
  justify-content: center;
}
.lp-btt.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.lp-btt:hover   { transform: translateY(-3px); box-shadow: 0 6px 24px rgba(255,142,21,.55); }

/* ── Scroll Reveal Animations ────────────────────────────────────────────── */
.lp-reveal,
.lp-reveal-left,
.lp-reveal-right { transition: opacity .65s cubic-bezier(.4,0,.2,1), transform .65s cubic-bezier(.4,0,.2,1); }

.lp-reveal       { opacity: 0; transform: translateY(30px); }
.lp-reveal-left  { opacity: 0; transform: translateX(-30px); }
.lp-reveal-right { opacity: 0; transform: translateX(30px); }

.lp-reveal.revealed,
.lp-reveal-left.revealed,
.lp-reveal-right.revealed { opacity: 1; transform: translate(0); }

/* Stagger children via nth-child delay */
.lp-features-grid  .lp-reveal:nth-child(2)  { transition-delay: .08s; }
.lp-features-grid  .lp-reveal:nth-child(3)  { transition-delay: .16s; }
.lp-features-grid  .lp-reveal:nth-child(4)  { transition-delay: .24s; }
.lp-features-grid  .lp-reveal:nth-child(5)  { transition-delay: .32s; }
.lp-features-grid  .lp-reveal:nth-child(6)  { transition-delay: .40s; }
.lp-features-grid  .lp-reveal:nth-child(n+7){ transition-delay: .48s; }
.lp-wn-grid        .lp-reveal:nth-child(2)  { transition-delay: .08s; }
.lp-wn-grid        .lp-reveal:nth-child(3)  { transition-delay: .16s; }
.lp-wn-grid        .lp-reveal:nth-child(n+4){ transition-delay: .24s; }
.lp-demos-grid     .lp-reveal:nth-child(2)  { transition-delay: .10s; }
.lp-demos-grid     .lp-reveal:nth-child(3)  { transition-delay: .20s; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .lp-why-layout        { grid-template-columns: 1fr; gap: 40px; }
  .lp-footer-grid       { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1024px) {
  .lp-hero-inner {
    grid-template-columns: 1fr;
    gap: 48px;
    text-align: center;
  }
  .lp-hero-visual { order: -1; }
  .lp-hero-browser { max-width: 480px; }
  .lp-hero-desc  { margin: 0 auto 36px; max-width: 600px; }
  .lp-hero-ctas  { justify-content: center; }
  .lp-hero-stats { margin: 0 auto; max-width: 520px; justify-content: center; }
}

@media (max-width: 767px) {
  .lp-nav-links {
    display:    none;
    position:   fixed;
    top:        var(--lp-nav-h);
    left:       0;
    right:      0;
    background: #fff;
    flex-direction: column;
    align-items:    stretch;
    padding:    16px;
    box-shadow: 0 8px 32px rgba(57,61,114,.15);
    gap:        4px;
  }
  .lp-nav-links.open { display: flex; }
  .lp-nav-links a    { color: var(--lp-dark) !important; padding: 12px 16px; border-radius: 8px; }
  .lp-nav-toggle     { display: flex; }

  .lp-section        { padding: 60px 0; }
  .lp-hero-browser   { max-width: 100%; }
  .lp-hero-stats     { max-width: 100%; }
  .lp-stat           { flex: 1 1 50%; }
  .lp-footer-grid    { grid-template-columns: 1fr; gap: 32px; }
  .lp-demos-grid     { grid-template-columns: 1fr; }
  .lp-gallery-grid   { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .lp-cta-box        { padding: 32px 24px; }
  .lp-trust          { padding: 20px 16px; }
  .lp-trust-inner    { gap: 10px 18px; }
}

@media (max-width: 479px) {
  .lp-hero-ctas  { flex-direction: column; align-items: center; }
  .lp-stat       { flex: 1 1 100%; border-right: none; border-bottom: 1px solid rgba(255,255,255,.12); }
  .lp-stat:last-child { border-bottom: none; }
  .lp-hero-stats { flex-direction: column; }
  .lp-features-grid { grid-template-columns: 1fr; }
  .lp-pages-groups  { grid-template-columns: 1fr 1fr; }
  .lp-gallery-grid  { grid-template-columns: repeat(2, 1fr); }
  .lp-versions-grid { grid-template-columns: 1fr; }
  .lp-wn-grid       { grid-template-columns: 1fr; }
}

/* ── Print ──────────────────────────────────────────────────────────────── */
@media print {
  .lp-nav, .lp-tawk, .lp-btt { display: none !important; }
  .lp-hero { min-height: auto; padding: 40px 0; }
  .lp-section-dark { background: #f5f5f5 !important; color: #000 !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   FUN MODE — font boost +6px · animations · micro-interactions · scroll preview
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Logo containment fix ────────────────────────────────────────────────── */
.lp-logo {
  height:     44px !important;
  max-width:  180px;
  width:      auto !important;
  object-fit: contain;
  display:    block;
}

/* ── Hero: full-width inner, bigger mockup ───────────────────────────────── */
.lp-hero-inner {
  max-width:  1240px !important;
  padding:    110px 40px 70px !important;
}
.lp-hero-browser {
  max-width:  none !important;
  width:      100% !important;
}

/* ── Screenshot wrapper (scroll on hover — hero only) ────────────────────── */
.lp-hero-browser .lp-screenshot-wrapper {
  overflow:   hidden;
  height:     540px;
  position:   relative;
  cursor:     zoom-in;
}
.lp-hero-browser .lp-screenshot-wrapper img {
  width:     100%;
  height:    auto;
  display:   block;
  transform: translateY(0);
  /* transition set dynamically by JS */
}

/* ── Font size boost (+6px on all text) ──────────────────────────────────── */
.lp-body               { font-size: 22px !important; }
.lp-section-tag        { font-size: 14px !important; }
.lp-section-subtitle   { font-size: 20px !important; max-width: 680px !important; }
.lp-hero-badge         { font-size: 14px !important; }
.lp-hero-desc          { font-size: 20px !important; }
.lp-stat-label         { font-size: 13px !important; }
.lp-trust-item         { font-size: 15px !important; }
.lp-feat-card h3       { font-size: 19px !important; }
.lp-feat-card p        { font-size: 16px !important; }
.lp-demo-info h3       { font-size: 26px !important; }
.lp-demo-info p        { font-size: 16px !important; }
.lp-demo-link          { font-size: 16px !important; }
.lp-wn-card h3         { font-size: 18px !important; }
.lp-wn-card p          { font-size: 15px !important; }
.lp-pages-group h4     { font-size: 15px !important; }
.lp-pages-group a      { font-size: 15px !important; }
.lp-compat-inner h3    { font-size: 24px !important; }
.lp-browser span       { font-size: 14px !important; }
.lp-version-card h3    { font-size: 22px !important; }
.lp-version-card p     { font-size: 16px !important; }
.lp-usecase-pill       { font-size: 16px !important; }
.lp-why-list li        { font-size: 17px !important; }
.lp-cta-box p          { font-size: 17px !important; }
.lp-faq-list .accordion-button { font-size: 18px !important; }
.lp-faq-list .accordion-body   { font-size: 16px !important; }
.lp-footer-about       { font-size: 15px !important; }
.lp-footer-col h5      { font-size: 15px !important; }
.lp-footer-col a       { font-size: 15px !important; }
.lp-footer-bottom      { font-size: 14px !important; }
.lp-btn                { font-size: 16px !important; }
.lp-nav-links a        { font-size: 16px !important; }


/* ── Floating paw prints in hero ─────────────────────────────────────────── */
.lp-hero-paws {
  position: absolute;
  inset:    0;
  overflow: hidden;
  pointer-events: none;
  z-index:  1;
}
.lp-paw {
  position:  absolute;
  font-size: 36px;
  opacity:   0.09;
  animation: lpPawFloat var(--dur, 9s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  user-select: none;
}
.lp-paw:nth-child(1)  { left:  4%;  top: 18%; --dur:8s;  --delay:0s; }
.lp-paw:nth-child(2)  { left: 12%;  top: 72%; --dur:11s; --delay:1.2s; }
.lp-paw:nth-child(3)  { left: 22%;  top: 40%; --dur:9s;  --delay:2.4s; }
.lp-paw:nth-child(4)  { right: 6%;  top: 25%; --dur:12s; --delay:0.7s; }
.lp-paw:nth-child(5)  { right: 15%; top: 62%; --dur:8.5s;--delay:3.1s; }
.lp-paw:nth-child(6)  { right: 28%; top: 10%; --dur:10s; --delay:1.8s; }
.lp-paw:nth-child(7)  { left: 48%;  top: 85%; --dur:13s; --delay:0.4s; }
.lp-paw:nth-child(8)  { left: 35%;  top: 5%;  --dur:9.5s;--delay:2.0s; }
@keyframes lpPawFloat {
  0%,100% { transform: translateY(0)    rotate(0deg)   scale(1);    }
  25%     { transform: translateY(-18px) rotate(-14deg) scale(1.08); }
  50%     { transform: translateY(-6px)  rotate(6deg)   scale(0.96); }
  75%     { transform: translateY(12px)  rotate(-8deg)  scale(1.04); }
}

/* ── Fun hero entrance animation ─────────────────────────────────────────── */
.lp-hero-content .lp-hero-badge  { animation: lpSlideUp .6s .1s both; }
.lp-hero-content .lp-hero-title  { animation: lpSlideUp .7s .25s both; }
.lp-hero-content .lp-hero-desc   { animation: lpSlideUp .7s .4s both; }
.lp-hero-content .lp-hero-ctas   { animation: lpSlideUp .7s .55s both; }
.lp-hero-content .lp-hero-stats  { animation: lpSlideUp .7s .7s both; }
.lp-hero-visual                  { animation: lpSlideRight .9s .3s both; }
@keyframes lpSlideUp {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:translateY(0);    }
}
@keyframes lpSlideRight {
  from { opacity:0; transform:translateX(40px); }
  to   { opacity:1; transform:translateX(0);    }
}

/* ── Browser mockup: glow ring on hover ──────────────────────────────────── */
.lp-hero-browser:hover {
  box-shadow: 0 28px 90px rgba(0,0,0,.60),
              0 0 0 3px var(--lp-primary),
              0 0 40px rgba(255,142,21,.35) !important;
}

/* ── Feature cards: icon spin on hover ───────────────────────────────────── */
.lp-feat-card:hover .lp-feat-icon {
  animation: lpIconSpin .5s ease-in-out;
}
@keyframes lpIconSpin {
  0%   { transform: rotate(0)    scale(1);   }
  40%  { transform: rotate(200deg) scale(1.15); }
  70%  { transform: rotate(340deg) scale(0.95); }
  100% { transform: rotate(360deg) scale(1);   }
}

/* ── What's New cards: icon pulse on hover ───────────────────────────────── */
.lp-wn-card:hover .lp-wn-icon { animation: lpPulse .5s ease; }
@keyframes lpPulse {
  0%,100% { transform: scale(1);    }
  40%     { transform: scale(1.25); }
  70%     { transform: scale(0.92); }
}

/* ── Use-case pills: wiggle on hover ─────────────────────────────────────── */
.lp-usecase-pill:hover {
  animation: lpWiggle .4s ease;
}
@keyframes lpWiggle {
  0%,100% { transform: rotate(0)     translateY(-2px); }
  20%     { transform: rotate(-5deg) translateY(-2px); }
  40%     { transform: rotate(5deg)  translateY(-2px); }
  60%     { transform: rotate(-3deg) translateY(-2px); }
  80%     { transform: rotate(3deg)  translateY(-2px); }
}

/* ── Buttons: bouncy spring on hover ─────────────────────────────────────── */
.lp-btn:hover { animation: lpBounce .4s cubic-bezier(.36,.07,.19,.97); }
@keyframes lpBounce {
  0%,100% { transform: translateY(-2px) scale(1);    }
  30%     { transform: translateY(-6px) scale(1.04); }
  60%     { transform: translateY(1px)  scale(0.98); }
  80%     { transform: translateY(-3px) scale(1.01); }
}

/* ── Buy Now button: continuous pulse glow ───────────────────────────────── */
.lp-btn-buy {
  animation: lpBuyPulse 2.5s ease-in-out infinite !important;
}
@keyframes lpBuyPulse {
  0%,100% { box-shadow: 0 3px 12px rgba(255,142,21,.35); }
  50%     { box-shadow: 0 3px 24px rgba(255,142,21,.70); }
}

/* ── CTA box heart: heartbeat ────────────────────────────────────────────── */
.lp-cta-paw { animation: lpHeartbeat 1.4s ease-in-out infinite; }
@keyframes lpHeartbeat {
  0%,100% { transform: scale(1);    }
  14%     { transform: scale(1.15); }
  28%     { transform: scale(1);    }
  42%     { transform: scale(1.10); }
  56%     { transform: scale(1);    }
}

/* ── Version card: active card glow pulse ────────────────────────────────── */
.lp-version-card.active {
  animation: lpActivePulse 3s ease-in-out infinite;
}
@keyframes lpActivePulse {
  0%,100% { box-shadow: 0 4px 32px rgba(255,142,21,.20); }
  50%     { box-shadow: 0 4px 48px rgba(255,142,21,.45); }
}

/* ── Trust strip: slide-in on page load ──────────────────────────────────── */
.lp-trust-item {
  animation: lpTrustIn .5s both;
}
.lp-trust-item:nth-child(1) { animation-delay:.05s; }
.lp-trust-item:nth-child(2) { animation-delay:.10s; }
.lp-trust-item:nth-child(3) { animation-delay:.15s; }
.lp-trust-item:nth-child(4) { animation-delay:.20s; }
.lp-trust-item:nth-child(5) { animation-delay:.25s; }
.lp-trust-item:nth-child(6) { animation-delay:.30s; }
.lp-trust-item:nth-child(7) { animation-delay:.35s; }
@keyframes lpTrustIn {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0);    }
}

/* ── Nav links: underline slide ──────────────────────────────────────────── */
.lp-nav-links a:not(.lp-btn-buy) {
  position: relative;
  overflow: hidden;
}
.lp-nav-links a:not(.lp-btn-buy)::after {
  content:    '';
  position:   absolute;
  bottom:     4px;
  left:       14px;
  right:      14px;
  height:     2px;
  background: var(--lp-primary);
  transform:  scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.lp-nav-links a:not(.lp-btn-buy):hover::after,
.lp-nav-links a.active::after { transform: scaleX(1); }

/* ── Page links: arrow slide on hover ────────────────────────────────────── */
.lp-pages-group a {
  transition: color .2s, padding-left .2s !important;
}
.lp-pages-group a:hover { padding-left: 6px !important; }

/* ── FAQ: open state left accent bar ─────────────────────────────────────── */
.lp-faq-list .accordion-button:not(.collapsed) {
  border-left: 4px solid var(--lp-primary) !important;
  padding-left: 20px !important;
}

/* ── Stat block: pop on reveal ───────────────────────────────────────────── */
.lp-hero-stats.revealed .lp-stat { animation: lpStatPop .4s both; }
.lp-hero-stats.revealed .lp-stat:nth-child(1) { animation-delay:.05s; }
.lp-hero-stats.revealed .lp-stat:nth-child(2) { animation-delay:.15s; }
.lp-hero-stats.revealed .lp-stat:nth-child(3) { animation-delay:.25s; }
.lp-hero-stats.revealed .lp-stat:nth-child(4) { animation-delay:.35s; }
@keyframes lpStatPop {
  0%   { transform:scale(.7);  opacity:0; }
  70%  { transform:scale(1.06);opacity:1; }
  100% { transform:scale(1);   opacity:1; }
}

/* ── Responsive: keep fun on mobile ──────────────────────────────────────── */
@media (max-width:767px) {
  .lp-hero-browser .lp-screenshot-wrapper { height: 280px !important; }
  .lp-paw { font-size: 24px; }
}