/* ═══════════════════════════════════════════════════════════════
   PrimeX — Public Landing Page (Foundation)
   Namespaced with the `lp-` prefix / `--lp-*` custom properties so
   this file never collides with style.css, panel.css, admin.css or
   global-header.css. Safe to load ONLY on the public landing page.
   Design language: Premium Glassmorphism — matches the blur/opacity/
   saturation tokens already used across the dashboard (panel.css:
   --sb-glass, blur(14px) saturate(1.5)).
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Light Mode */
  --lp-bg:          #ffffff;
  --lp-bg-soft:     #f6f6f8;
  --lp-card:        #ffffff;
  --lp-text:        #0f0f14;
  --lp-text-soft:   #63636d;
  --lp-line:        rgba(15,15,20,0.08);
  --lp-accent:      #111119;
  --lp-accent-inv:  #ffffff;

  /* Glass tokens — mirrors panel.css / admin.css conventions */
  --lp-glass:       rgba(255,255,255,0.85);
  --lp-glass-blur:  14px;
  --lp-glass-sat:   1.5;
  --lp-shadow-sm:   0 1px 3px rgba(0,0,0,0.05), 0 2px 10px rgba(0,0,0,0.04);
  --lp-shadow-md:   0 4px 18px rgba(0,0,0,0.09), 0 1px 4px rgba(0,0,0,0.05);

  --lp-header-h:    72px;
  --lp-radius:      14px;
  --lp-radius-lg:   22px;
}

[data-theme="dark"]{
  --lp-bg:          #0a0a0d;
  --lp-bg-soft:     #101014;
  --lp-card:        #141418;
  --lp-text:        #f0f0f8;
  --lp-text-soft:   #93939f;
  --lp-line:        rgba(255,255,255,0.08);
  --lp-accent:      #f0f0f8;
  --lp-accent-inv:  #0a0a0d;

  --lp-glass:       rgba(16,16,20,0.82);
  --lp-shadow-sm:   0 1px 4px rgba(0,0,0,0.4), 0 2px 12px rgba(0,0,0,0.28);
  --lp-shadow-md:   0 4px 20px rgba(0,0,0,0.5);
}

/* ── Reset (scoped to landing page only) ── */
.lp-page,
.lp-page *{ box-sizing: border-box; }
.lp-page{
  margin: 0;
  background: var(--lp-bg);
  color: var(--lp-text);
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  transition: background .2s ease, color .2s ease;
}
.lp-page a{ color: inherit; text-decoration: none; }
.lp-page h1,.lp-page h2,.lp-page h3,.lp-page h4{
  font-family: 'Manrope', sans-serif;
  letter-spacing: -.02em;
  line-height: 1.15;
}
@media (prefers-reduced-motion: reduce){
  .lp-page *{ animation: none !important; transition: none !important; }
}

/* ── Ambient background shapes (decorative only) ── */
.lp-bg-shapes{ position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.lp-shape{ position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; }
[data-theme="dark"] .lp-shape{ opacity: .18; }
.lp-shape.lp-s1{ width: 420px; height: 420px; background: radial-gradient(circle,#d9d9ff,transparent 70%); top: -120px; left: -100px; }
.lp-shape.lp-s2{ width: 380px; height: 380px; background: radial-gradient(circle,#ffe3d1,transparent 70%); top: 25%; right: -140px; }
.lp-shape.lp-s3{ width: 340px; height: 340px; background: radial-gradient(circle,#d7f7e4,transparent 70%); bottom: -120px; left: 15%; }

/* ══════════════ Fixed / Sticky Header ══════════════ */
.lp-header{
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 500;
  background: #ffffff;
  border-bottom: 1px solid var(--lp-line);
  box-shadow: var(--lp-shadow-sm);
  transition: background .2s ease, border-color .2s ease;
}
[data-theme="dark"] .lp-header{ background: #04091C; }
.lp-header-inner{
  max-width: 1280px;
  margin: 0 auto;
  height: var(--lp-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

/* Brand / logo */
.lp-brand{ display: flex; align-items: center; gap: 10px; }
.lp-logo{
  width: 38px; height: 38px; border-radius: 12px;
  background: var(--lp-accent); color: var(--lp-accent-inv);
  display: grid; place-items: center;
  font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 17px;
  box-shadow: var(--lp-shadow-sm);
  flex-shrink: 0;
}
.lp-brand-text{ font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 19px; letter-spacing: -.02em; }
.lp-brand-text-soft{ color: var(--lp-text-soft); font-weight: 600; }

/* Admin-controlled banner logo (Settings → Branding) — same treatment as
   the post-login header (includes/global-header.php). Light and dark
   banners are both rendered; CSS shows only the one matching the live
   [data-theme] attribute so it swaps instantly with no page reload. */
.lp-banner-link{ display:flex; align-items:center; text-decoration:none; max-height:48px; gap:0; }
.lp-banner-img{ height:44px; max-width:220px; object-fit:contain; display:block; }
html[data-theme="dark"] .lp-theme-light-only{ display:none !important; }
html:not([data-theme="dark"]) .lp-theme-dark-only{ display:none !important; }
.lp-banner-default{ display:flex; align-items:center; gap:9px; }
.lp-banner-mark{
  width:36px;height:36px;border-radius:11px;background:var(--lp-accent);color:var(--lp-accent-inv);
  display:grid;place-items:center;font-family:'Manrope',sans-serif;font-weight:900;font-size:16px;
  box-shadow:var(--lp-shadow-sm);
}
.lp-banner-text{ font-family:'Manrope',sans-serif; font-weight:800; font-size:18px; color:var(--lp-text); letter-spacing:-.03em; }
.lp-banner-text-tag{ color:var(--lp-text-soft); font-weight:600; }
@media (max-width: 640px){
  .lp-banner-img{ height:36px; max-width:160px; }
}

/* Nav — empty placeholder, ready for future links */
.lp-nav{ display: flex; align-items: center; gap: 4px; }

/* Header-right actions cluster */
.lp-actions{ display: flex; align-items: center; gap: 10px; }

/* Theme toggle */
.lp-theme-toggle{
  width: 40px; height: 40px; border-radius: 12px;
  border: 1px solid var(--lp-line);
  background: var(--lp-bg-soft);
  color: var(--lp-text);
  cursor: pointer;
  display: grid; place-items: center;
  font-size: 16px;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.lp-theme-toggle:hover{ background: var(--lp-card); transform: scale(1.06); box-shadow: var(--lp-shadow-sm); }
.lp-theme-toggle:active{ transform: scale(.94); }

/* Hamburger — structural only for now, opens an empty drawer */
.lp-ham-btn{
  display: flex;
  width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid var(--lp-line);
  background: var(--lp-bg-soft);
  cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  transition: background .18s ease;
}
.lp-ham-btn:hover{ background: var(--lp-card); }
.lp-ham-bar{ width: 18px; height: 2px; border-radius: 2px; background: var(--lp-text); transition: transform .18s ease, opacity .18s ease; }
.lp-ham-btn.lp-open .lp-ham-bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.lp-ham-btn.lp-open .lp-ham-bar:nth-child(2){ opacity: 0; }
.lp-ham-btn.lp-open .lp-ham-bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer — empty container, ready for future nav content */
.lp-mobile-menu{
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 14px 20px 20px;
  border-bottom: 1px solid var(--lp-line);
  background: #ffffff;
}
[data-theme="dark"] .lp-mobile-menu{ background: #04091C; }
.lp-mobile-menu.lp-show{ display: flex; animation: lpSlideDown .25s ease; }
@keyframes lpSlideDown{ from{ opacity: 0; transform: translateY(-8px); } to{ opacity: 1; transform: translateY(0); } }

/* Mobile drawer — nav links */
.lp-mm-nav{ display: flex; flex-direction: column; gap: 2px; }
.lp-mm-link{
  display: block;
  padding: 12px 10px;
  border-radius: 10px;
  color: var(--lp-text);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: background .15s ease;
}
.lp-mm-link:hover, .lp-mm-link:active{ background: var(--lp-bg-soft); }

/* Specificity note: same issue as .lp-btn-primary above — the global
   ".lp-page a{ color: inherit }" reset (0,1,1) is MORE specific than a
   single ".lp-mm-link-primary" class (0,1,0), so it was silently winning
   and forcing the Register link's text to inherit the page's body-text
   color instead of --lp-accent-inv, making the label invisible against
   its own dark background. Using the compound ".lp-mm-link.lp-mm-link-primary"
   selector (0,2,0) restores the intended contrast color. */
.lp-mm-link.lp-mm-link-primary{
  background: var(--lp-accent);
  color: var(--lp-accent-inv);
  text-align: center;
  margin-top: 4px;
}
.lp-mm-link.lp-mm-link-primary:hover{ background: var(--lp-accent); color: var(--lp-accent-inv); opacity: .9; }
.lp-mm-divider{ height: 1px; background: var(--lp-line); margin: 8px 2px; }

/* ══════════════ Main content foundation ══════════════ */
.lp-main{
  position: relative;
  z-index: 1;
  min-height: calc(100vh - var(--lp-header-h));
}

/* ══════════════ Hero Section (mobile-first) ══════════════ */
.lp-hero{
  padding: 48px 20px 56px;
  position: relative;
  z-index: 1;
}
.lp-hero-inner{
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

.lp-hero-content{ text-align: left; }
.lp-hero-title{
  font-size: clamp(30px, 8vw, 52px);
  font-weight: 800;
  margin: 0 0 16px;
  color: var(--lp-text);
}
.lp-hero-title-soft{ color: var(--lp-text-soft); }
.lp-hero-subtitle{
  font-size: 15.5px;
  color: var(--lp-text-soft);
  max-width: 520px;
  margin: 0 0 28px;
}
.lp-hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ── Premium glass buttons ── */
.lp-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--lp-radius);
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .01em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s ease, background .18s ease;
}
.lp-btn:active{ transform: scale(.97); }

/* Specificity note: buttons are rendered as <a class="lp-btn lp-btn-primary">.
   The global ".lp-page a{ color: inherit }" reset (0,1,1) is MORE specific
   than a single ".lp-btn-primary" class (0,1,0), so it was silently winning
   and forcing button text to inherit the page's body-text color instead of
   the button's own contrast color — making the label nearly invisible
   against the button background in both themes. Using the compound
   ".lp-btn.lp-btn-primary" selector (0,2,0) restores the intended color
   without touching layout, spacing or animation. */
.lp-btn.lp-btn-primary{
  background: var(--lp-accent);
  color: var(--lp-accent-inv);
  box-shadow: 0 6px 20px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.1);
}
.lp-btn.lp-btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,.24), 0 2px 6px rgba(0,0,0,.12);
  color: var(--lp-accent-inv);
}
.lp-btn.lp-btn-primary:active{
  color: var(--lp-accent-inv);
}

.lp-btn.lp-btn-glass{
  background: var(--lp-glass);
  backdrop-filter: blur(var(--lp-glass-blur)) saturate(var(--lp-glass-sat));
  -webkit-backdrop-filter: blur(var(--lp-glass-blur)) saturate(var(--lp-glass-sat));
  color: var(--lp-text);
  border-color: var(--lp-line);
  box-shadow: var(--lp-shadow-sm);
}
.lp-btn.lp-btn-glass:hover{
  transform: translateY(-2px);
  box-shadow: var(--lp-shadow-md);
  border-color: rgba(15,15,20,.16);
  color: var(--lp-text);
}
[data-theme="dark"] .lp-btn.lp-btn-glass:hover{ border-color: rgba(255,255,255,.16); }

/* ══════════════ Hero Visual — Premium 3D Aurora + Floating Dashboard ══════════════ */
.lp-hero-visual{
  position: relative;
  width: 100%;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 16px;
  perspective: 1200px;
}

/* Contained aurora + glow layer (clipped to rounded bounds) */
.lp-hero-visual-bg{
  position: absolute;
  inset: 0;
  border-radius: var(--lp-radius-lg);
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.lp-aurora{
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(42% 42% at 28% 28%, rgba(59,130,246,.55), transparent 70%),
    radial-gradient(46% 46% at 72% 62%, rgba(139,92,246,.5), transparent 70%),
    radial-gradient(34% 34% at 48% 92%, rgba(56,189,248,.32), transparent 70%);
  filter: blur(60px) saturate(1.4);
  opacity: .9;
  animation: lpAuroraShift 16s ease-in-out infinite;
}
[data-theme="dark"] .lp-aurora{ opacity: .65; }
@keyframes lpAuroraShift{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  33%{     transform: translate3d(3%,-4%,0) scale(1.08); }
  66%{     transform: translate3d(-4%,3%,0) scale(1.04); }
}

/* Soft glow orbs behind the 3D card */
.lp-glow{ position: absolute; border-radius: 50%; filter: blur(46px); }
.lp-glow-1{ width: 190px; height: 190px; top: 6%;  right: 8%; background: radial-gradient(circle,rgba(59,130,246,.55),transparent 70%); }
.lp-glow-2{ width: 170px; height: 170px; bottom: 4%; left: 6%; background: radial-gradient(circle,rgba(139,92,246,.5),transparent 70%); }

/* 3D floating dashboard group — tilts with mouse parallax (--lp-mx/--lp-my set by landing.js) */
.lp-dash3d{
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 320px;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--lp-mx, 0) * 8deg)) rotateX(calc(var(--lp-my, 0) * -8deg));
  transition: transform .12s ease-out;
  animation: lpFloatMain 6s ease-in-out infinite;
  will-change: transform;
}
@keyframes lpFloatMain{
  0%,100%{ transform: rotateY(calc(var(--lp-mx, 0) * 8deg)) rotateX(calc(var(--lp-my, 0) * -8deg)) translateY(0); }
  50%{     transform: rotateY(calc(var(--lp-mx, 0) * 8deg)) rotateX(calc(var(--lp-my, 0) * -8deg)) translateY(-10px); }
}

.lp-dash-card{
  background: var(--lp-glass);
  backdrop-filter: blur(var(--lp-glass-blur)) saturate(var(--lp-glass-sat));
  -webkit-backdrop-filter: blur(var(--lp-glass-blur)) saturate(var(--lp-glass-sat));
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
}

.lp-dash-main{
  padding: 20px;
  border-radius: var(--lp-radius-lg);
  box-shadow: var(--lp-shadow-md), 0 30px 50px -20px rgba(59,130,246,.28);
}
.lp-dash-topbar{ display: flex; gap: 6px; margin-bottom: 16px; }
.lp-dash-topbar span{ width: 9px; height: 9px; border-radius: 50%; background: var(--lp-line); }
.lp-dash-topbar span:nth-child(1){ background: #ff6159; }
.lp-dash-topbar span:nth-child(2){ background: #ffbd2e; }
.lp-dash-topbar span:nth-child(3){ background: #28c93f; }

.lp-dash-row{ display: flex; gap: 12px; margin-bottom: 18px; }
.lp-dash-stat{
  flex: 1;
  background: var(--lp-bg-soft);
  border: 1px solid var(--lp-line);
  border-radius: 12px;
  padding: 10px 12px;
}
.lp-dash-stat-label{
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--lp-text-soft);
  margin-bottom: 4px;
}
.lp-dash-stat-value{ font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 17px; }
.lp-dash-up{ color: #22c55e; }

.lp-dash-chart{ display: flex; align-items: flex-end; gap: 5px; height: 58px; }
.lp-dash-chart span{
  flex: 1;
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg,#60a5fa,#8b5cf6);
  animation: lpBarPulse 2.4s ease-in-out infinite;
  transform-origin: bottom;
}
.lp-dash-chart span:nth-child(1){ height: 40%; animation-delay: 0s; }
.lp-dash-chart span:nth-child(2){ height: 65%; animation-delay: .1s; }
.lp-dash-chart span:nth-child(3){ height: 45%; animation-delay: .2s; }
.lp-dash-chart span:nth-child(4){ height: 85%; animation-delay: .3s; }
.lp-dash-chart span:nth-child(5){ height: 60%; animation-delay: .4s; }
.lp-dash-chart span:nth-child(6){ height: 95%; animation-delay: .5s; }
.lp-dash-chart span:nth-child(7){ height: 70%; animation-delay: .6s; }
@keyframes lpBarPulse{
  0%,100%{ transform: scaleY(1); }
  50%{     transform: scaleY(1.08); }
}

/* Floating side cards — sit above/below the main card with independent motion + parallax depth */
.lp-dash-float{
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 14px;
  box-shadow: var(--lp-shadow-md);
  white-space: nowrap;
}
.lp-dash-badge{ font-size: 12px; font-weight: 700; }
.lp-dash-mini-label{ font-size: 10.5px; color: var(--lp-text-soft); }

.lp-dash-float-a{
  top: -14px;
  right: -14px;
  animation: lpFloatA 5s ease-in-out infinite;
  transform: translate(calc(var(--lp-mx, 0) * 16px), calc(var(--lp-my, 0) * 16px));
}
.lp-dash-float-b{
  bottom: -14px;
  left: -16px;
  animation: lpFloatB 5.6s ease-in-out infinite;
  transform: translate(calc(var(--lp-mx, 0) * -14px), calc(var(--lp-my, 0) * -10px));
}
@keyframes lpFloatA{
  0%,100%{ margin-top: 0; } 50%{ margin-top: -8px; }
}
@keyframes lpFloatB{
  0%,100%{ margin-top: 0; } 50%{ margin-top: 8px; }
}

.lp-dash-ring{
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #3b82f6;
  border-right-color: #8b5cf6;
  animation: lpSpin 2.2s linear infinite;
}
@keyframes lpSpin{ to{ transform: rotate(360deg); } }

/* ══════════════ Live Statistics Section (mobile-first) ══════════════ */
.lp-stats{
  padding: 8px 20px 56px;
  position: relative;
  z-index: 1;
}
.lp-stats-inner{
  max-width: 1280px;
  margin: 0 auto;
}
.lp-stats-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Premium glass stat card */
.lp-stat-card{
  position: relative;
  padding: 22px 20px;
  border-radius: var(--lp-radius-lg);
  background: var(--lp-glass);
  border: 1px solid var(--lp-line);
  backdrop-filter: blur(var(--lp-glass-blur)) saturate(var(--lp-glass-sat));
  -webkit-backdrop-filter: blur(var(--lp-glass-blur)) saturate(var(--lp-glass-sat));
  box-shadow: var(--lp-shadow-sm);
  overflow: hidden;
  transition: transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s ease, border-color .22s ease;
}
/* Soft glow that blooms in on hover, kept behind the content */
.lp-stat-card::before{
  content: '';
  position: absolute;
  inset: -30%;
  background: radial-gradient(circle at 30% 20%, rgba(59,130,246,.35), transparent 60%),
              radial-gradient(circle at 80% 80%, rgba(139,92,246,.3), transparent 60%);
  opacity: 0;
  transition: opacity .28s ease;
  pointer-events: none;
  z-index: 0;
}
.lp-stat-card:hover,
.lp-stat-card:focus-within{
  transform: translateY(-6px);
  border-color: rgba(99,102,241,.35);
  box-shadow: var(--lp-shadow-md), 0 18px 40px -14px rgba(99,102,241,.35);
}
.lp-stat-card:hover::before{ opacity: 1; }

.lp-stat-icon{
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(59,130,246,.16), rgba(139,92,246,.16));
  border: 1px solid rgba(99,102,241,.22);
  color: #6d5bf6;
}
[data-theme="dark"] .lp-stat-icon{ color: #9c8cff; }
.lp-stat-icon svg{ width: 24px; height: 24px; }

.lp-stat-value{
  position: relative;
  z-index: 1;
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 6vw, 32px);
  color: var(--lp-text);
  margin-bottom: 4px;
  letter-spacing: -.02em;
}
.lp-stat-label{
  position: relative;
  z-index: 1;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--lp-text-soft);
}

/* ── Small phones: two columns ── */
@media (min-width: 420px){
  .lp-stats-grid{ grid-template-columns: repeat(2, 1fr); }
}
/* ── Tablet: three columns ── */
@media (min-width: 720px){
  .lp-stats-grid{ grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
/* ── Desktop: all six in one row ── */
@media (min-width: 1180px){
  .lp-stats{ padding: 10px 20px 80px; }
  .lp-stats-grid{ grid-template-columns: repeat(6, 1fr); }
}

/* ══════════════ Supported Platforms Section (mobile-first) ══════════════ */
.lp-platforms{
  padding: 8px 0 60px;
  position: relative;
  z-index: 1;
}
.lp-platforms-inner{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}
.lp-platforms-title{
  font-size: clamp(22px, 5vw, 30px);
  font-weight: 800;
  margin: 0 0 6px;
  color: var(--lp-text);
}
.lp-platforms-subtitle{
  font-size: 14.5px;
  color: var(--lp-text-soft);
  margin: 0 0 24px;
  max-width: 480px;
}

/* Mobile: horizontally swipeable track */
.lp-platforms-track{
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 20px 14px;
  margin: 0 -20px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.lp-platforms-track::-webkit-scrollbar{ display: none; }

/* Progressive-enhancement entrance animation: only applied once JS
   marks the track ready, so the section stays fully visible with
   JS disabled or with prefers-reduced-motion. */
.lp-platform-card{
  opacity: 1;
  transform: none;
  transition: opacity .5s ease, transform .5s ease,
              box-shadow .22s ease, border-color .22s ease;
}
.lp-platforms-track.lp-anim-ready .lp-platform-card{
  opacity: 0;
  transform: translateY(18px);
}
.lp-platforms-track.lp-anim-ready.lp-in-view .lp-platform-card{
  opacity: 1;
  transform: translateY(0);
}
.lp-platforms-track.lp-anim-ready .lp-platform-card:nth-child(1){ transition-delay: .02s; }
.lp-platforms-track.lp-anim-ready .lp-platform-card:nth-child(2){ transition-delay: .06s; }
.lp-platforms-track.lp-anim-ready .lp-platform-card:nth-child(3){ transition-delay: .10s; }
.lp-platforms-track.lp-anim-ready .lp-platform-card:nth-child(4){ transition-delay: .14s; }
.lp-platforms-track.lp-anim-ready .lp-platform-card:nth-child(5){ transition-delay: .18s; }
.lp-platforms-track.lp-anim-ready .lp-platform-card:nth-child(6){ transition-delay: .22s; }
.lp-platforms-track.lp-anim-ready .lp-platform-card:nth-child(7){ transition-delay: .26s; }
.lp-platforms-track.lp-anim-ready .lp-platform-card:nth-child(8){ transition-delay: .30s; }
.lp-platforms-track.lp-anim-ready .lp-platform-card:nth-child(9){ transition-delay: .34s; }
.lp-platforms-track.lp-anim-ready .lp-platform-card:nth-child(10){ transition-delay: .38s; }
.lp-platforms-track.lp-anim-ready .lp-platform-card:nth-child(11){ transition-delay: .42s; }

/* Premium glass platform card */
.lp-platform-card{
  position: relative;
  flex: 0 0 auto;
  width: 128px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 20px 14px;
  border-radius: var(--lp-radius-lg);
  background: var(--lp-glass);
  border: 1px solid var(--lp-line);
  backdrop-filter: blur(var(--lp-glass-blur)) saturate(var(--lp-glass-sat));
  -webkit-backdrop-filter: blur(var(--lp-glass-blur)) saturate(var(--lp-glass-sat));
  box-shadow: var(--lp-shadow-sm);
  overflow: hidden;
}
.lp-platform-card::before{
  content: '';
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 50% 30%, var(--lp-accent-glow, rgba(99,102,241,.35)), transparent 65%);
  opacity: 0;
  transition: opacity .28s ease;
  pointer-events: none;
  z-index: 0;
}
.lp-platform-card:hover,
.lp-platform-card:focus-within{
  transform: translateY(-6px);
  border-color: rgba(99,102,241,.35);
  box-shadow: var(--lp-shadow-md), 0 16px 34px -14px var(--lp-accent-glow, rgba(99,102,241,.4));
}
.lp-platform-card:hover::before{ opacity: 1; }

.lp-platform-icon{
  position: relative;
  z-index: 1;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--lp-accent-bg, #6d5bf6);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 6px 16px -4px var(--lp-accent-glow, rgba(99,102,241,.5));
}
.lp-platform-icon svg{ width: 26px; height: 26px; }

.lp-platform-name{
  position: relative;
  z-index: 1;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--lp-text);
  white-space: nowrap;
}

/* ── Brand accents — swap/add a class here to onboard new platforms ── */
.lp-pf-instagram   .lp-platform-icon{ background: linear-gradient(135deg,#f9ce34,#ee2a7b 55%,#6228d7); }
.lp-pf-instagram{ --lp-accent-glow: rgba(238,42,123,.35); }
.lp-pf-facebook    .lp-platform-icon{ background: #1877F2; }
.lp-pf-facebook{ --lp-accent-glow: rgba(24,119,242,.35); }
.lp-pf-youtube     .lp-platform-icon{ background: #FF0000; }
.lp-pf-youtube{ --lp-accent-glow: rgba(255,0,0,.3); }
.lp-pf-tiktok      .lp-platform-icon{ background: #111318; box-shadow: 0 6px 16px -4px rgba(37,244,238,.35), 0 0 0 1px rgba(254,44,85,.25) inset; }
.lp-pf-tiktok{ --lp-accent-glow: rgba(37,244,238,.3); }
.lp-pf-telegram    .lp-platform-icon{ background: #26A5E4; }
.lp-pf-telegram{ --lp-accent-glow: rgba(38,165,228,.35); }
.lp-pf-twitter     .lp-platform-icon{ background: #111318; }
.lp-pf-twitter{ --lp-accent-glow: rgba(120,120,140,.35); }
.lp-pf-spotify     .lp-platform-icon{ background: #1DB954; }
.lp-pf-spotify{ --lp-accent-glow: rgba(29,185,84,.35); }
.lp-pf-discord     .lp-platform-icon{ background: #5865F2; }
.lp-pf-discord{ --lp-accent-glow: rgba(88,101,242,.35); }
.lp-pf-linkedin    .lp-platform-icon{ background: #0A66C2; }
.lp-pf-linkedin{ --lp-accent-glow: rgba(10,102,194,.35); }
.lp-pf-snapchat    .lp-platform-icon{ background: #FFFC00; border-color: rgba(0,0,0,.08); }
.lp-pf-snapchat{ --lp-accent-glow: rgba(255,252,0,.4); }
.lp-pf-threads     .lp-platform-icon{ background: #111318; }
.lp-pf-threads{ --lp-accent-glow: rgba(120,120,140,.35); }

/* ── Tablet and up: swap the swipeable track for a responsive grid ── */
@media (min-width: 640px){
  .lp-platforms-track{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    overflow: visible;
    padding: 4px 0 0;
    margin: 0;
    scroll-snap-type: none;
  }
  .lp-platform-card{ width: 100%; }
}
@media (min-width: 900px){
  .lp-platforms-track{ grid-template-columns: repeat(6, 1fr); }
}
@media (min-width: 1180px){
  .lp-platforms{ padding: 10px 0 80px; }
  .lp-platforms-track{ grid-template-columns: repeat(6, 1fr); gap: 20px; }
}

/* ══════════════ Why Choose Section (mobile-first) ══════════════ */
.lp-why{
  padding: 8px 20px 64px;
  position: relative;
  z-index: 1;
}
.lp-why-inner{
  max-width: 1180px;
  margin: 0 auto;
}
.lp-why-header{
  text-align: center;
  max-width: 560px;
  margin: 0 auto 36px;
}
.lp-why-title{
  font-size: clamp(24px, 5.5vw, 32px);
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--lp-text);
}
.lp-why-subtitle{
  font-size: 14.5px;
  color: var(--lp-text-soft);
  margin: 0;
}

/* Layout wrapper: mobile-first = simple stacked column.
   Cards + core share one grid so DOM order
   [card,card,card,card, CORE, card,card,card,card]
   naturally centers the core on the desktop 3-column grid. */
.lp-why-layout{
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

/* Decorative connector spokes — desktop only */
.lp-why-connectors{ display: none; }

/* ── Feature cards: premium glass, hover lift + glow ── */
.lp-why-card{
  position: relative;
  padding: 22px 20px;
  border-radius: var(--lp-radius-lg);
  background: var(--lp-glass);
  border: 1px solid var(--lp-line);
  backdrop-filter: blur(var(--lp-glass-blur)) saturate(var(--lp-glass-sat));
  -webkit-backdrop-filter: blur(var(--lp-glass-blur)) saturate(var(--lp-glass-sat));
  box-shadow: var(--lp-shadow-sm);
  overflow: hidden;
  transition: opacity .5s ease, transform .5s ease,
              box-shadow .22s ease, border-color .22s ease;
}
.lp-why-card::before{
  content: '';
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 30% 25%, rgba(59,130,246,.3), transparent 60%),
              radial-gradient(circle at 80% 80%, rgba(139,92,246,.28), transparent 60%);
  opacity: 0;
  transition: opacity .28s ease;
  pointer-events: none;
  z-index: 0;
}
.lp-why-card:hover,
.lp-why-card:focus-within{
  transform: translateY(-6px);
  border-color: rgba(99,102,241,.35);
  box-shadow: var(--lp-shadow-md), 0 18px 40px -16px rgba(99,102,241,.35);
}
.lp-why-card:hover::before{ opacity: 1; }

.lp-why-icon{
  position: relative;
  z-index: 1;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(59,130,246,.16), rgba(139,92,246,.16));
  border: 1px solid rgba(99,102,241,.22);
  color: #6d5bf6;
}
[data-theme="dark"] .lp-why-icon{ color: #9c8cff; }
.lp-why-icon svg{ width: 22px; height: 22px; }

.lp-why-card-title{
  position: relative;
  z-index: 1;
  font-family: 'Manrope', sans-serif;
  font-size: 16.5px;
  font-weight: 800;
  margin: 0 0 6px;
  color: var(--lp-text);
}
.lp-why-card-desc{
  position: relative;
  z-index: 1;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--lp-text-soft);
  margin: 0;
}

/* ── Progressive-enhancement scroll-reveal (JS-gated; fully visible
   without JS or with prefers-reduced-motion) ── */
.lp-why-card,
.lp-why-core{ opacity: 1; transform: none; }
.lp-why-layout.lp-anim-ready .lp-why-card,
.lp-why-layout.lp-anim-ready .lp-why-core{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .55s ease, transform .55s ease;
}
.lp-why-layout.lp-anim-ready.lp-in-view .lp-why-card,
.lp-why-layout.lp-anim-ready.lp-in-view .lp-why-core{
  opacity: 1;
  transform: translateY(0);
}
.lp-why-card[data-reveal-index="1"]{ transition-delay: .02s; }
.lp-why-card[data-reveal-index="2"]{ transition-delay: .08s; }
.lp-why-card[data-reveal-index="3"]{ transition-delay: .14s; }
.lp-why-card[data-reveal-index="4"]{ transition-delay: .20s; }
.lp-why-core{ transition-delay: .24s; }
.lp-why-card[data-reveal-index="5"]{ transition-delay: .28s; }
.lp-why-card[data-reveal-index="6"]{ transition-delay: .34s; }
.lp-why-card[data-reveal-index="7"]{ transition-delay: .40s; }
.lp-why-card[data-reveal-index="8"]{ transition-delay: .46s; }

/* ── Center 3D core — large glowing circular highlight ── */
.lp-why-core{
  position: relative;
  justify-self: center;
  width: 140px;
  height: 140px;
  display: grid;
  place-items: center;
  margin: 6px 0;
}
.lp-why-core-ring{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid transparent;
  border-top-color: rgba(59,130,246,.55);
  border-right-color: rgba(139,92,246,.5);
}
.lp-why-ring-1{ animation: lpWhySpin 10s linear infinite; }
.lp-why-ring-2{ inset: 14px; border-top-color: rgba(139,92,246,.4); border-right-color: rgba(59,130,246,.35); animation: lpWhySpin 7s linear infinite reverse; }
@keyframes lpWhySpin{ to{ transform: rotate(360deg); } }

.lp-why-core-inner{
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 32% 28%, #6ea8ff, #6d5bf6 55%, #8b5cf6 100%);
  box-shadow: 0 0 0 6px rgba(99,102,241,.12),
              0 18px 40px -10px rgba(99,102,241,.55),
              inset 0 2px 6px rgba(255,255,255,.35);
  animation: lpWhyPulse 4.5s ease-in-out infinite;
}
@keyframes lpWhyPulse{
  0%,100%{ box-shadow: 0 0 0 6px rgba(99,102,241,.12), 0 18px 40px -10px rgba(99,102,241,.55), inset 0 2px 6px rgba(255,255,255,.35); }
  50%{     box-shadow: 0 0 0 12px rgba(99,102,241,.16), 0 22px 46px -8px rgba(99,102,241,.65), inset 0 2px 6px rgba(255,255,255,.35); }
}
.lp-why-core-mark{
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 38px;
  color: #fff;
  letter-spacing: -.02em;
}

/* ── Tablet: 2-column layout, core spans full width above the grid ── */
@media (min-width: 640px){
  .lp-why-layout{
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .lp-why-core{
    grid-column: 1 / -1;
    order: -1;
  }
}

/* ── Desktop: true centered 3×3 layout with connector spokes ── */
@media (min-width: 1100px){
  .lp-why{ padding: 10px 20px 90px; }
  .lp-why-layout{
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    align-items: stretch;
  }
  .lp-why-core{
    grid-column: auto;
    order: 0;
    width: 190px;
    height: 190px;
    margin: 0;
  }
  .lp-why-core-inner{ width: 132px; height: 132px; }
  .lp-why-core-mark{ font-size: 50px; }
  .lp-why-card{ display: flex; flex-direction: column; justify-content: center; }

  /* Decorative spokes radiating from the exact grid center toward
     the 8 surrounding cells (N/S/E/W + 4 diagonals) */
  .lp-why-connectors{
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }
  .lp-why-line{
    position: absolute;
    top: 50%;
    left: 50%;
    background: linear-gradient(90deg, transparent, rgba(99,102,241,.28) 50%, transparent);
  }
  .lp-why-line-h{ width: 100%;   height: 1px; transform: translate(-50%,-50%); }
  .lp-why-line-v{ width: 1px;    height: 100%; transform: translate(-50%,-50%) rotate(90deg); }
  .lp-why-line-d1{ width: 130%; height: 1px; transform: translate(-50%,-50%) rotate(45deg); }
  .lp-why-line-d2{ width: 130%; height: 1px; transform: translate(-50%,-50%) rotate(-45deg); }
}


@media (min-width: 960px){
  .lp-hero{ padding: 90px 20px 70px; }
  .lp-hero-inner{
    grid-template-columns: 1.05fr .95fr;
    gap: 50px;
  }
  .lp-hero-visual{ min-height: 460px; padding: 40px; }
  .lp-dash3d{ max-width: 380px; }
  .lp-glow-1{ width: 220px; height: 220px; }
  .lp-glow-2{ width: 200px; height: 200px; }
}

/* ── Responsive: mobile-first, nav collapses under 860px ── */
@media (max-width: 860px){
  .lp-nav{ display: none; }
  .lp-ham-btn{ display: flex; }
}
@media (max-width: 600px){
  .lp-header-inner{ padding: 0 16px; }
  .lp-brand-text{ font-size: 17px; }
  .lp-hero-actions{ flex-direction: column; align-items: stretch; }
  .lp-hero-actions .lp-btn{ width: 100%; }

  /* Keep the 3D visual compact and fully on-screen on small phones */
  .lp-hero-visual{ min-height: 260px; padding: 24px 10px; }
  .lp-dash3d{ max-width: 250px; }
  .lp-dash-main{ padding: 16px; }
  .lp-dash-chart{ height: 46px; }
  .lp-dash-float{ padding: 8px 11px; }
  .lp-dash-float-a{ top: -10px; right: -6px; }
  .lp-dash-float-b{ bottom: -10px; left: -8px; }
  .lp-glow{ filter: blur(34px); }
  .lp-aurora{ filter: blur(44px) saturate(1.3); }
}

/* Respect reduced motion for the 3D tilt too (base .lp-page rule already
   disables keyframe animations; this also freezes the JS-driven tilt) */
@media (prefers-reduced-motion: reduce){
  .lp-dash3d{ transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   ══════════════ Popular Services Section (mobile-first) ══════════════
   Premium Glassmorphism Bento Grid. Fully additive: reuses the same
   --lp-* glass/shadow/radius tokens and the existing .lp-pf-* brand
   accent modifier classes (Instagram/YouTube/TikTok/etc.) already
   defined above for Supported Platforms — no existing rule is
   modified. Card data itself lives in views/home.php as a plain PHP
   array, ready to be swapped for dynamic backend categories later.
   ═══════════════════════════════════════════════════════════════ */
.lp-services{
  padding: 8px 0 64px;
  position: relative;
  z-index: 1;
}
.lp-services-inner{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header row: heading left, "View All Services" premium button top-right */
.lp-services-header{
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 24px;
}
.lp-services-title{
  font-size: clamp(22px, 5vw, 30px);
  font-weight: 800;
  margin: 0 0 6px;
  color: var(--lp-text);
}
.lp-services-subtitle{
  font-size: 14.5px;
  color: var(--lp-text-soft);
  margin: 0;
  max-width: 480px;
}
.lp-services-viewall{
  align-self: flex-start;
  white-space: nowrap;
}
.lp-services-viewall svg{ width: 17px; height: 17px; transition: transform .18s ease; }
.lp-services-viewall:hover svg{ transform: translateX(3px); }

/* Mobile: horizontally swipeable track (matches Supported Platforms pattern) */
.lp-services-grid{
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 20px 14px;
  margin: 0 -20px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.lp-services-grid::-webkit-scrollbar{ display: none; }

/* Progressive-enhancement entrance animation: fully visible without
   JS / with prefers-reduced-motion, same convention as other sections */
.lp-service-card{
  opacity: 1;
  transform: none;
  transition: opacity .5s ease, transform .5s ease,
              box-shadow .25s ease, border-color .25s ease;
}
.lp-services-grid.lp-anim-ready .lp-service-card{
  opacity: 0;
  transform: translateY(20px);
}
.lp-services-grid.lp-anim-ready.lp-in-view .lp-service-card{
  opacity: 1;
  transform: translateY(0);
}
.lp-services-grid.lp-anim-ready .lp-service-card:nth-child(1){ transition-delay: .02s; }
.lp-services-grid.lp-anim-ready .lp-service-card:nth-child(2){ transition-delay: .07s; }
.lp-services-grid.lp-anim-ready .lp-service-card:nth-child(3){ transition-delay: .12s; }
.lp-services-grid.lp-anim-ready .lp-service-card:nth-child(4){ transition-delay: .17s; }
.lp-services-grid.lp-anim-ready .lp-service-card:nth-child(5){ transition-delay: .22s; }
.lp-services-grid.lp-anim-ready .lp-service-card:nth-child(6){ transition-delay: .27s; }
.lp-services-grid.lp-anim-ready .lp-service-card:nth-child(7){ transition-delay: .32s; }
.lp-services-grid.lp-anim-ready .lp-service-card:nth-child(8){ transition-delay: .37s; }

/* Premium glass bento card */
.lp-service-card{
  position: relative;
  flex: 0 0 auto;
  width: 250px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: 22px 20px;
  border-radius: var(--lp-radius-lg);
  background: var(--lp-glass);
  border: 1px solid var(--lp-line);
  backdrop-filter: blur(var(--lp-glass-blur)) saturate(var(--lp-glass-sat));
  -webkit-backdrop-filter: blur(var(--lp-glass-blur)) saturate(var(--lp-glass-sat));
  box-shadow: var(--lp-shadow-sm);
  overflow: hidden;
  text-decoration: none;
}
.lp-service-card::before{
  content: '';
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 30% 22%, var(--lp-accent-glow, rgba(99,102,241,.32)), transparent 62%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  z-index: 0;
}
.lp-service-card:hover,
.lp-service-card:focus-within{
  transform: translateY(-7px);
  border-color: rgba(99,102,241,.35);
  box-shadow: var(--lp-shadow-md), 0 20px 44px -16px var(--lp-accent-glow, rgba(99,102,241,.4));
}
.lp-service-card:hover::before{ opacity: 1; }
.lp-service-card:hover .lp-service-icon{ transform: scale(1.08) rotate(-4deg); }
.lp-service-card:hover .lp-service-arrow{ transform: translateX(4px); color: var(--lp-text); }

.lp-service-icon{
  position: relative;
  z-index: 1;
  width: 50px;
  height: 50px;
  margin-bottom: 16px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: var(--lp-accent-bg, #6d5bf6);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 6px 16px -4px var(--lp-accent-glow, rgba(99,102,241,.5));
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.lp-service-icon svg{ width: 25px; height: 25px; }

.lp-service-name{
  position: relative;
  z-index: 1;
  font-family: 'Manrope', sans-serif;
  font-size: 16.5px;
  font-weight: 800;
  margin: 0 0 6px;
  color: var(--lp-text);
}
.lp-service-desc{
  position: relative;
  z-index: 1;
  font-size: 13px;
  line-height: 1.55;
  color: var(--lp-text-soft);
  margin: 0 0 18px;
  flex-grow: 1;
}
.lp-service-price{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--lp-line);
}
.lp-service-price-label{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--lp-text-soft);
  font-weight: 600;
}
.lp-service-price-value{
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--lp-text);
}
.lp-service-price-unit{
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 11.5px;
  color: var(--lp-text-soft);
  margin-left: 1px;
}
.lp-service-arrow{
  position: absolute;
  z-index: 1;
  top: 22px;
  right: 20px;
  display: grid;
  place-items: center;
  color: var(--lp-text-soft);
  opacity: .6;
  transition: transform .25s ease, color .25s ease, opacity .25s ease;
}
.lp-service-arrow svg{ width: 16px; height: 16px; }
.lp-service-card:hover .lp-service-arrow{ opacity: 1; }

/* Brand accent chips — reuse the same colors as Supported Platforms,
   scoped to .lp-service-icon so the original .lp-platform-icon rules
   above are never touched. */
.lp-pf-instagram .lp-service-icon{ background: linear-gradient(135deg,#f9ce34,#ee2a7b 55%,#6228d7); }
.lp-pf-instagram.lp-service-card{ --lp-accent-glow: rgba(238,42,123,.35); }
.lp-pf-facebook  .lp-service-icon{ background: #1877F2; }
.lp-pf-facebook.lp-service-card{ --lp-accent-glow: rgba(24,119,242,.35); }
.lp-pf-youtube   .lp-service-icon{ background: #FF0000; }
.lp-pf-youtube.lp-service-card{ --lp-accent-glow: rgba(255,0,0,.3); }
.lp-pf-tiktok    .lp-service-icon{ background: #111318; box-shadow: 0 6px 16px -4px rgba(37,244,238,.35), 0 0 0 1px rgba(254,44,85,.25) inset; }
.lp-pf-tiktok.lp-service-card{ --lp-accent-glow: rgba(37,244,238,.3); }
.lp-pf-telegram  .lp-service-icon{ background: #26A5E4; }
.lp-pf-telegram.lp-service-card{ --lp-accent-glow: rgba(38,165,228,.35); }
.lp-pf-twitter   .lp-service-icon{ background: #111318; }
.lp-pf-twitter.lp-service-card{ --lp-accent-glow: rgba(120,120,140,.35); }
.lp-pf-spotify   .lp-service-icon{ background: #1DB954; }
.lp-pf-spotify.lp-service-card{ --lp-accent-glow: rgba(29,185,84,.35); }
.lp-pf-discord   .lp-service-icon{ background: #5865F2; }
.lp-pf-discord.lp-service-card{ --lp-accent-glow: rgba(88,101,242,.35); }

/* ── Tablet: swap the swipeable track for a clean 2-column grid ── */
@media (min-width: 640px){
  .lp-services-header{
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
  .lp-services-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    overflow: visible;
    padding: 4px 0 0;
    margin: 0;
    scroll-snap-type: none;
  }
  .lp-service-card{ width: 100%; }
}

/* ── Desktop: premium Bento Grid — Instagram featured as a large
   2×2 tile, the rest arranged around it via named grid areas ── */
@media (min-width: 1100px){
  .lp-services{ padding: 10px 0 84px; }
  .lp-services-grid{
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, minmax(150px, auto));
    grid-template-areas:
      "a a b b"
      "a a c d"
      "e f g h";
    gap: 22px;
  }
  .lp-service-card{ padding: 26px 24px; }
  .lp-service-card:nth-child(1){ grid-area: a; }
  .lp-service-card:nth-child(2){ grid-area: b; }
  .lp-service-card:nth-child(3){ grid-area: c; }
  .lp-service-card:nth-child(4){ grid-area: d; }
  .lp-service-card:nth-child(5){ grid-area: e; }
  .lp-service-card:nth-child(6){ grid-area: f; }
  .lp-service-card:nth-child(7){ grid-area: g; }
  .lp-service-card:nth-child(8){ grid-area: h; }

  /* Featured tile gets a larger icon + name to justify the 2×2 span */
  .lp-service-card:nth-child(1){ justify-content: center; }
  .lp-service-card:nth-child(1) .lp-service-icon{ width: 64px; height: 64px; border-radius: 18px; margin-bottom: 20px; }
  .lp-service-card:nth-child(1) .lp-service-icon svg{ width: 32px; height: 32px; }
  .lp-service-card:nth-child(1) .lp-service-name{ font-size: 21px; }
  .lp-service-card:nth-child(1) .lp-service-desc{ font-size: 14px; max-width: 360px; }
}

/* ═══════════════════════════════════════════════════════════════
   ══════════════ Customer Reviews Section (mobile-first) ══════════════
   Premium Glassmorphism review cards. Fully additive: reuses the
   same --lp-* glass/shadow/radius tokens as every other section.
   Mobile: swipeable row. Desktop (>=1100px): JS duplicates the card
   set (landing.js) and this file animates the doubled track as a
   seamless auto-scrolling marquee, paused on hover/focus for
   readability. Review data itself lives in views/home.php as a
   plain PHP array, ready to be swapped for a DB-driven query later.
   ═══════════════════════════════════════════════════════════════ */
.lp-reviews{
  padding: 8px 0 64px;
  position: relative;
  z-index: 1;
}
.lp-reviews-inner{
  max-width: 1280px;
  margin: 0 auto;
}
.lp-reviews-header{
  text-align: center;
  max-width: 560px;
  margin: 0 auto 32px;
  padding: 0 20px;
}
.lp-reviews-title{
  font-size: clamp(22px, 5vw, 30px);
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--lp-text);
}
.lp-reviews-subtitle{
  font-size: 14.5px;
  color: var(--lp-text-soft);
  margin: 0;
}

/* Mobile: swipeable row */
.lp-reviews-viewport{
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 20px 14px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.lp-reviews-viewport::-webkit-scrollbar{ display: none; }
.lp-reviews-track{
  display: flex;
  gap: 18px;
  width: max-content;
}

/* Clones only exist once JS duplicates the set for the desktop
   marquee — harmless / unused on mobile. */
.lp-review-clone{ display: none; }

/* Progressive-enhancement entrance animation: fully visible without
   JS / with prefers-reduced-motion, same convention as other sections */
.lp-review-card{
  opacity: 1;
  transform: none;
  transition: opacity .55s ease, transform .55s ease,
              box-shadow .25s ease, border-color .25s ease;
}
.lp-reviews-track.lp-anim-ready .lp-review-card{
  opacity: 0;
  transform: translateY(24px);
}
.lp-reviews-track.lp-anim-ready.lp-in-view .lp-review-card{
  opacity: 1;
  transform: translateY(0);
}
.lp-reviews-track.lp-anim-ready .lp-review-card:nth-child(1){ transition-delay: .02s; }
.lp-reviews-track.lp-anim-ready .lp-review-card:nth-child(2){ transition-delay: .09s; }
.lp-reviews-track.lp-anim-ready .lp-review-card:nth-child(3){ transition-delay: .16s; }
.lp-reviews-track.lp-anim-ready .lp-review-card:nth-child(4){ transition-delay: .23s; }
.lp-reviews-track.lp-anim-ready .lp-review-card:nth-child(5){ transition-delay: .30s; }
.lp-reviews-track.lp-anim-ready .lp-review-card:nth-child(6){ transition-delay: .37s; }
.lp-reviews-track.lp-anim-ready .lp-review-card:nth-child(7){ transition-delay: .44s; }
.lp-reviews-track.lp-anim-ready .lp-review-card:nth-child(8){ transition-delay: .51s; }
.lp-reviews-track.lp-anim-ready .lp-review-card:nth-child(9){ transition-delay: .58s; }
.lp-reviews-track.lp-anim-ready .lp-review-card:nth-child(10){ transition-delay: .65s; }
.lp-reviews-track.lp-anim-ready .lp-review-card:nth-child(11){ transition-delay: .72s; }

/* Premium glass review card */
.lp-review-card{
  position: relative;
  flex: 0 0 auto;
  width: 300px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: 24px 22px;
  border-radius: var(--lp-radius-lg);
  background: var(--lp-glass);
  border: 1px solid var(--lp-line);
  backdrop-filter: blur(var(--lp-glass-blur)) saturate(var(--lp-glass-sat));
  -webkit-backdrop-filter: blur(var(--lp-glass-blur)) saturate(var(--lp-glass-sat));
  box-shadow: var(--lp-shadow-sm);
  overflow: hidden;
}
.lp-review-card::before{
  content: '';
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 25% 20%, rgba(59,130,246,.28), transparent 60%),
              radial-gradient(circle at 85% 85%, rgba(139,92,246,.26), transparent 60%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  z-index: 0;
}
.lp-review-card:hover,
.lp-review-card:focus-within{
  transform: translateY(-6px);
  border-color: rgba(99,102,241,.35);
  box-shadow: var(--lp-shadow-md), 0 18px 40px -16px rgba(99,102,241,.32);
}
.lp-review-card:hover::before{ opacity: 1; }

.lp-review-top{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.lp-review-avatar{
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: #fff;
  background: linear-gradient(135deg, #6ea8ff, #8b5cf6);
  box-shadow: 0 6px 14px -4px rgba(99,102,241,.5);
}
.lp-review-who{ display: flex; flex-direction: column; min-width: 0; }
.lp-review-name{
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 14.5px;
  color: var(--lp-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lp-review-country{
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--lp-text-soft);
}

.lp-review-stars{
  position: relative;
  z-index: 1;
  display: flex;
  gap: 2px;
  margin: 10px 0 14px;
}
.lp-review-stars svg{ width: 15px; height: 15px; }
.lp-star-filled{ fill: #f5b400; stroke: #f5b400; stroke-width: 1; }
.lp-star-empty{ fill: none; stroke: var(--lp-line); stroke-width: 1.5; }

.lp-review-text{
  position: relative;
  z-index: 1;
  font-size: 13.5px;
  line-height: 1.6;
  font-style: italic;
  color: var(--lp-text-soft);
  margin: 0;
}

/* ── Desktop: seamless auto-scrolling marquee (JS-duplicated track) ── */
@media (min-width: 1100px){
  .lp-reviews{ padding: 10px 0 84px; }
  .lp-reviews-viewport{
    overflow: hidden;
    padding: 10px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  }
  .lp-review-card{ width: 320px; }
  .lp-review-clone{ display: flex; }
  .lp-reviews-track.lp-reviews-marquee{
    animation: lpReviewsScroll 38s linear infinite;
    will-change: transform;
  }
  .lp-reviews-track.lp-reviews-marquee:hover,
  .lp-reviews-track.lp-reviews-marquee:focus-within{
    animation-play-state: paused;
  }
  @keyframes lpReviewsScroll{
    from{ transform: translateX(0); }
    to{   transform: translateX(-50%); }
  }
}
@media (prefers-reduced-motion: reduce){
  .lp-reviews-track.lp-reviews-marquee{ animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   ══════════════ FAQ Section (mobile-first) ══════════════
   Premium Glassmorphism accordion. Fully additive: reuses the same
   --lp-* glass/shadow/radius tokens as every other section. Single-
   open accordion behaviour + icon rotation is driven by landing.js
   toggling aria-expanded and a max-height CSS transition. FAQ data
   lives in views/home.php as a plain PHP array, ready to be swapped
   for a DB-driven query later.
   ═══════════════════════════════════════════════════════════════ */
.lp-faq{
  padding: 8px 20px 64px;
  position: relative;
  z-index: 1;
}
.lp-faq-inner{
  max-width: 820px;
  margin: 0 auto;
}
.lp-faq-header{
  text-align: center;
  max-width: 560px;
  margin: 0 auto 32px;
}
.lp-faq-title{
  font-size: clamp(22px, 5vw, 30px);
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--lp-text);
}
.lp-faq-subtitle{
  font-size: 14.5px;
  color: var(--lp-text-soft);
  margin: 0;
}

.lp-faq-list{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Progressive-enhancement entrance animation: fully visible without
   JS / with prefers-reduced-motion, same convention as other sections */
.lp-faq-item{
  opacity: 1;
  transform: none;
  transition: opacity .5s ease, transform .5s ease,
              box-shadow .22s ease, border-color .22s ease;
}
.lp-faq-list.lp-anim-ready .lp-faq-item{
  opacity: 0;
  transform: translateY(18px);
}
.lp-faq-list.lp-anim-ready.lp-in-view .lp-faq-item{
  opacity: 1;
  transform: translateY(0);
}
.lp-faq-list.lp-anim-ready .lp-faq-item:nth-child(1){ transition-delay: .02s; }
.lp-faq-list.lp-anim-ready .lp-faq-item:nth-child(2){ transition-delay: .06s; }
.lp-faq-list.lp-anim-ready .lp-faq-item:nth-child(3){ transition-delay: .10s; }
.lp-faq-list.lp-anim-ready .lp-faq-item:nth-child(4){ transition-delay: .14s; }
.lp-faq-list.lp-anim-ready .lp-faq-item:nth-child(5){ transition-delay: .18s; }
.lp-faq-list.lp-anim-ready .lp-faq-item:nth-child(6){ transition-delay: .22s; }
.lp-faq-list.lp-anim-ready .lp-faq-item:nth-child(7){ transition-delay: .26s; }
.lp-faq-list.lp-anim-ready .lp-faq-item:nth-child(8){ transition-delay: .30s; }

/* Premium glass accordion card */
.lp-faq-item{
  position: relative;
  border-radius: var(--lp-radius-lg);
  background: var(--lp-glass);
  border: 1px solid var(--lp-line);
  backdrop-filter: blur(var(--lp-glass-blur)) saturate(var(--lp-glass-sat));
  -webkit-backdrop-filter: blur(var(--lp-glass-blur)) saturate(var(--lp-glass-sat));
  box-shadow: var(--lp-shadow-sm);
  overflow: hidden;
}
.lp-faq-item:hover,
.lp-faq-item:focus-within{
  border-color: rgba(99,102,241,.3);
  box-shadow: var(--lp-shadow-md), 0 14px 32px -18px rgba(99,102,241,.32);
}
.lp-faq-item.lp-faq-open{
  border-color: rgba(99,102,241,.4);
  box-shadow: var(--lp-shadow-md), 0 18px 38px -16px rgba(99,102,241,.38);
}

.lp-faq-question{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: 'Inter', sans-serif;
  color: var(--lp-text);
}
.lp-faq-question-text{
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 15.5px;
  color: var(--lp-text);
}
.lp-faq-icon{
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(59,130,246,.16), rgba(139,92,246,.16));
  border: 1px solid rgba(99,102,241,.22);
  color: #6d5bf6;
  transition: transform .3s cubic-bezier(.4,0,.2,1), background .25s ease;
}
[data-theme="dark"] .lp-faq-icon{ color: #9c8cff; }
.lp-faq-icon svg{ width: 16px; height: 16px; transition: transform .3s cubic-bezier(.4,0,.2,1); }
.lp-faq-question[aria-expanded="true"] .lp-faq-icon{ transform: rotate(135deg); }

/* Smooth expand/collapse via max-height transition (grid-template-rows
   trick avoids the "unknown height" limitation of plain max-height) */
.lp-faq-answer{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s cubic-bezier(.4,0,.2,1);
}
.lp-faq-answer-inner{
  overflow: hidden;
  min-height: 0;
}
.lp-faq-item.lp-faq-open .lp-faq-answer{ grid-template-rows: 1fr; }
.lp-faq-answer-inner p{
  margin: 0;
  padding: 0 22px 20px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--lp-text-soft);
}

/* ── "Still have questions?" closing card ── */
.lp-faq-cta{
  margin-top: 32px;
  padding: 34px 24px;
  border-radius: var(--lp-radius-lg);
  text-align: center;
  background: var(--lp-glass);
  border: 1px solid var(--lp-line);
  backdrop-filter: blur(var(--lp-glass-blur)) saturate(var(--lp-glass-sat));
  -webkit-backdrop-filter: blur(var(--lp-glass-blur)) saturate(var(--lp-glass-sat));
  box-shadow: var(--lp-shadow-sm);
  position: relative;
  overflow: hidden;
}
.lp-faq-cta::before{
  content: '';
  position: absolute;
  inset: -50%;
  background: radial-gradient(circle at 30% 20%, rgba(59,130,246,.22), transparent 60%),
              radial-gradient(circle at 75% 80%, rgba(139,92,246,.2), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.lp-faq-cta-title{
  position: relative;
  z-index: 1;
  font-family: 'Manrope', sans-serif;
  font-size: clamp(19px, 4vw, 24px);
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--lp-text);
}
.lp-faq-cta-desc{
  position: relative;
  z-index: 1;
  font-size: 14px;
  color: var(--lp-text-soft);
  margin: 0 0 22px;
}
.lp-faq-cta-btn{
  position: relative;
  z-index: 1;
}
.lp-faq-cta-btn svg{ width: 17px; height: 17px; transition: transform .18s ease; }
.lp-faq-cta-btn:hover svg{ transform: translateX(3px); }

/* ── Tablet/Desktop: centered premium layout with more breathing room ── */
@media (min-width: 720px){
  .lp-faq{ padding: 10px 20px 84px; }
  .lp-faq-question{ padding: 22px 28px; }
  .lp-faq-answer-inner p{ padding: 0 28px 24px; font-size: 14px; }
  .lp-faq-list{ gap: 16px; }
  .lp-faq-cta{ padding: 42px 40px; margin-top: 40px; }
}

/* ═══════════════════════════════════════════════════════════════
   ══════════════ Contact Support Section (mobile-first) ══════════════
   Premium Glassmorphism. Fully additive: reuses the same --lp-*
   glass/shadow/radius tokens as every other section. Card *data* is
   never hardcoded here — views/home.php builds $lpSupportChannels
   dynamically from the same `settings` table keys the Admin Panel
   Support Settings page reads/writes, via the existing get_setting()
   helper. This file only styles whatever channels are passed in.
   ═══════════════════════════════════════════════════════════════ */
.lp-contact{
  padding: 8px 20px 70px;
  position: relative;
  z-index: 1;
}
.lp-contact-inner{
  max-width: 1080px;
  margin: 0 auto;
}
.lp-contact-header{
  text-align: center;
  max-width: 560px;
  margin: 0 auto 30px;
}
.lp-contact-title{
  font-size: clamp(22px, 5vw, 30px);
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--lp-text);
}
.lp-contact-subtitle{
  font-size: 14.5px;
  color: var(--lp-text-soft);
  margin: 0;
}

/* Mobile: 2-column grid */
.lp-contact-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

/* Progressive-enhancement entrance animation: fully visible without
   JS / with prefers-reduced-motion, same convention as other sections */
.lp-contact-card{
  opacity: 1;
  transform: none;
  transition: opacity .5s ease, transform .5s ease,
              box-shadow .22s ease, border-color .22s ease;
}
.lp-contact-grid.lp-anim-ready .lp-contact-card{
  opacity: 0;
  transform: translateY(18px);
}
.lp-contact-grid.lp-anim-ready.lp-in-view .lp-contact-card{
  opacity: 1;
  transform: translateY(0);
}
.lp-contact-grid.lp-anim-ready .lp-contact-card:nth-child(1){ transition-delay: .02s; }
.lp-contact-grid.lp-anim-ready .lp-contact-card:nth-child(2){ transition-delay: .08s; }
.lp-contact-grid.lp-anim-ready .lp-contact-card:nth-child(3){ transition-delay: .14s; }
.lp-contact-grid.lp-anim-ready .lp-contact-card:nth-child(4){ transition-delay: .20s; }

/* Premium glass contact card — the whole card is the clickable link */
.lp-contact-card{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 26px 16px;
  border-radius: var(--lp-radius-lg);
  background: var(--lp-glass);
  border: 1px solid var(--lp-line);
  backdrop-filter: blur(var(--lp-glass-blur)) saturate(var(--lp-glass-sat));
  -webkit-backdrop-filter: blur(var(--lp-glass-blur)) saturate(var(--lp-glass-sat));
  box-shadow: var(--lp-shadow-sm);
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lp-contact-card::before{
  content: '';
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 50% 25%, var(--lp-accent-glow, rgba(99,102,241,.32)), transparent 65%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  z-index: 0;
}
.lp-contact-card:hover,
.lp-contact-card:focus-visible{
  transform: translateY(-7px);
  border-color: rgba(99,102,241,.35);
  box-shadow: var(--lp-shadow-md), 0 20px 42px -16px var(--lp-accent-glow, rgba(99,102,241,.4));
  outline: none;
}
.lp-contact-card:hover::before{ opacity: 1; }
.lp-contact-card:hover .lp-contact-icon{ transform: scale(1.08); }
.lp-contact-card:active{ transform: translateY(-3px) scale(.98); }

/* Ripple effect — a JS-positioned circle that expands + fades on click */
.lp-contact-ripple-layer{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.lp-contact-ripple{
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,.4), rgba(99,102,241,0) 70%);
  transform: scale(0);
  opacity: .8;
  animation: lpContactRipple .6s ease-out forwards;
}
@keyframes lpContactRipple{
  to{ transform: scale(1); opacity: 0; }
}

.lp-contact-icon{
  position: relative;
  z-index: 1;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--lp-accent-bg, #6d5bf6);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 6px 16px -4px var(--lp-accent-glow, rgba(99,102,241,.5));
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.lp-contact-icon svg{ width: 27px; height: 27px; }

.lp-contact-name{
  position: relative;
  z-index: 1;
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: var(--lp-text);
}
.lp-contact-status{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--lp-text-soft);
}

/* Empty state — shown only if no channel is enabled/configured yet */
.lp-contact-empty{
  text-align: center;
  padding: 30px 20px;
  border-radius: var(--lp-radius-lg);
  background: var(--lp-glass);
  border: 1px dashed var(--lp-line);
  color: var(--lp-text-soft);
  font-size: 14px;
}

/* ── Brand accents per channel ── */
.lp-support-instagram .lp-contact-icon{ background: linear-gradient(135deg,#f9ce34,#ee2a7b 55%,#6228d7); }
.lp-support-instagram{ --lp-accent-glow: rgba(238,42,123,.35); }
.lp-support-whatsapp  .lp-contact-icon{ background: #25D366; }
.lp-support-whatsapp{ --lp-accent-glow: rgba(37,211,102,.35); }
.lp-support-telegram  .lp-contact-icon{ background: #26A5E4; }
.lp-support-telegram{ --lp-accent-glow: rgba(38,165,228,.35); }
.lp-support-email     .lp-contact-icon{ background: linear-gradient(135deg,#60a5fa,#8b5cf6); }
.lp-support-email{ --lp-accent-glow: rgba(99,102,241,.35); }

/* ── Tablet: allow either 2 or 4 columns depending on count ── */
@media (min-width: 640px){
  .lp-contact-grid{ grid-template-columns: repeat(4, 1fr); gap: 18px; }
}

/* ── Desktop: 4 premium glass cards, more generous spacing ── */
@media (min-width: 1100px){
  .lp-contact{ padding: 10px 20px 92px; }
  .lp-contact-grid{ gap: 22px; }
  .lp-contact-card{ padding: 32px 20px; }
}

/* ═══════════════════════════════════════════════════════════════
   ══════════════ Premium Footer (mobile-first) ══════════════
   Glassmorphism footer matching the rest of the landing page.
   Fully additive: reuses the same --lp-* glass/shadow/radius tokens.
   Data (service/company/legal/contact link arrays) lives entirely in
   views/home.php, ready to be swapped for dynamic content later.
   ═══════════════════════════════════════════════════════════════ */
.lp-footer{
  position: relative;
  z-index: 1;
  background: var(--lp-bg-soft);
}

/* Premium gradient divider above the footer */
.lp-footer-divider{
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg,
    transparent, var(--lp-line) 15%, var(--lp-line) 85%, transparent);
}

.lp-footer-inner{
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 20px 20px;
}

/* Mobile: 2-column grid from the smallest viewport */
.lp-footer-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 20px;
  margin-bottom: 24px;
}

.lp-footer-col-title{
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--lp-text);
  margin: 0 0 12px;
}
.lp-footer-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/* Every footer item is a real link with a subtle glow-on-hover */
.lp-footer-link{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--lp-text-soft);
  text-decoration: none;
  transition: color .2s ease, text-shadow .2s ease;
  width: fit-content;
}
.lp-footer-link::after{
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 1.5px;
  background: linear-gradient(90deg, #6ea8ff, #8b5cf6);
  transition: width .25s ease;
}
a.lp-footer-link:hover,
a.lp-footer-link:focus-visible{
  color: var(--lp-text);
  text-shadow: 0 0 14px rgba(99,102,241,.45);
  outline: none;
}
a.lp-footer-link:hover::after,
a.lp-footer-link:focus-visible::after{ width: 100%; }

/* Contact column: small brand-tinted icon chip beside each channel name */
.lp-footer-contact-link{ gap: 10px; }
.lp-footer-contact-icon{
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: rgba(99,102,241,.35);
}
.lp-footer-contact-icon svg{ width: 12px; height: 12px; }
.lp-footer-empty{
  font-size: 13px;
  color: var(--lp-text-soft);
  margin: 0;
}

/* Bottom bar: brand mark + copyright */
.lp-footer-bottom{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--lp-line);
  text-align: center;
}
.lp-footer-brand{ display: flex; align-items: center; gap: 9px; }
.lp-footer-logo{
  width: 30px; height: 30px; border-radius: 10px;
  background: var(--lp-accent); color: var(--lp-accent-inv);
  display: grid; place-items: center;
  font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 14px;
  flex-shrink: 0;
}
.lp-footer-brand-text{ font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 15.5px; letter-spacing: -.02em; color: var(--lp-text); }
.lp-footer-brand-text-soft{ color: var(--lp-text-soft); font-weight: 600; }
.lp-footer-copyright{
  font-size: 12.5px;
  color: var(--lp-text-soft);
  margin: 0;
}

/* ── Tablet and up: compact responsive 2-column grid ──
   Services + Company on row one, Legal + Contact on row two —
   kept at 2 columns (instead of expanding to 4) to keep the
   footer short and premium rather than a wide, sprawling strip. */
@media (min-width: 480px){
  .lp-footer-grid{ grid-template-columns: repeat(2, 1fr); gap: 26px 28px; }
}

/* ── Desktop: bottom bar becomes a row; grid stays 2-column ── */
@media (min-width: 1100px){
  .lp-footer-inner{ padding: 40px 20px 24px; }
  .lp-footer-grid{ grid-template-columns: repeat(2, minmax(0, 240px)); gap: 28px 64px; margin-bottom: 28px; }
  .lp-footer-bottom{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Task 13 — Final Polish & Animations
   Purely cosmetic/behavioural additions layered on top of the
   existing landing page. Nothing above this line is modified —
   no section is redesigned, no markup structure or content is
   assumed beyond what already exists. Everything below is additive,
   namespaced with the same `lp-` prefix, and fully respects
   prefers-reduced-motion (already enforced globally at the top of
   this file, which strips all animation/transition when set).
   ═══════════════════════════════════════════════════════════════ */

/* ── Smooth in-page anchor scrolling (e.g. "View Services" → #services).
     scroll-margin-top keeps the target from hiding under the sticky
     header. JS (landing.js) drives the actual smooth scroll so the
     header-offset math is exact on every viewport; this is a CSS-only
     safety net for any anchor jump that bypasses JS (e.g. browser
     back/forward restoring a #hash). ── */
html{ scroll-padding-top: calc(var(--lp-header-h) + 12px); }
.lp-page section[id]{ scroll-margin-top: calc(var(--lp-header-h) + 12px); }

@media (prefers-reduced-motion: no-preference){
  html:has(.lp-page){ scroll-behavior: smooth; }
}

/* ── Premium page-load transition ──
   Runs purely via CSS so it fires even if JS is blocked/slow; the
   global prefers-reduced-motion rule above already disables it for
   users who've asked for less motion. */
@media (prefers-reduced-motion: no-preference){
  .lp-page{ animation: lpPageIn .5s cubic-bezier(.4,0,.2,1) both; }
  @keyframes lpPageIn{
    from{ opacity: 0; transform: translateY(6px); }
    to{ opacity: 1; transform: translateY(0); }
  }
}

/* ── Smooth exit transition before internal navigation (landing.js
     toggles this class just before following a same-page link, so
     leaving the landing page feels like part of one continuous
     product rather than a hard reload). ── */
.lp-page.lp-page-exit{
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease;
  pointer-events: none;
}

/* ── GPU-friendly compositing hints for elements that animate
     continuously (ambient blobs, aurora, floating dashboard cards,
     the reviews marquee) so scrolling and other animations on the
     page stay smooth instead of triggering repeated layout/paint. ── */
.lp-shape,
.lp-aurora,
.lp-glow,
.lp-dash-float,
.lp-dash-main,
.lp-reviews-track.lp-reviews-marquee{
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ── Consistent premium hover language ──
   A shared, slightly springier easing for anything that already
   declares a hover lift/scale above, so every card and button on
   the page feels like it belongs to the same system. */
.lp-stat-card,
.lp-platform-card,
.lp-why-card,
.lp-service-card,
.lp-review-card,
.lp-contact-card,
.lp-faq-item,
.lp-btn{
  transition-timing-function: cubic-bezier(.22,1,.36,1);
}

/* ── Subtle idle float for the header brand mark — a small,
     continuous premium touch that doesn't compete with the hero's
     existing floating dashboard animation. ── */
@media (prefers-reduced-motion: no-preference){
  .lp-logo{ animation: lpLogoFloat 5s ease-in-out infinite; }
  @keyframes lpLogoFloat{
    0%, 100%{ transform: translateY(0); }
    50%{ transform: translateY(-2px); }
  }
}

/* ── Crisper, more premium focus states for keyboard users — visible
     on every interactive element without altering layout. ── */
.lp-page a:focus-visible,
.lp-page button:focus-visible{
  outline: 2px solid var(--lp-accent);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ── Tablet breathing room ──
   A light touch-up for the 768–1023px band that sits between the
   mobile and desktop breakpoints already defined per-section above,
   so spacing never feels cramped on iPads/mid-size tablets without
   changing the layout itself. ── */
@media (min-width: 768px) and (max-width: 1023px){
  .lp-hero{ padding: 56px 32px 64px; }
  .lp-hero-inner{ gap: 48px; }
  .lp-stats-inner,
  .lp-platforms-inner,
  .lp-why-inner,
  .lp-services-inner,
  .lp-reviews-inner,
  .lp-faq-inner,
  .lp-contact-inner,
  .lp-footer-inner{ padding-left: 32px; padding-right: 32px; }
}

/* ── Large-desktop refinement — a touch more vertical rhythm once
     there's room to breathe, matching premium SaaS marketing sites. ── */
@media (min-width: 1440px){
  .lp-hero{ padding-top: 64px; padding-bottom: 72px; }
}

/* ══════════════════════════════════════════════════════════════════
   Premium Theme Toggle — SVG icon spans
   Sun icon: visible in dark mode (click to switch to light).
   Moon icon: visible in light mode (click to switch to dark).
   CSS-driven — no emoji, no JS innerHTML manipulation needed.
   ══════════════════════════════════════════════════════════════════ */
.lp-theme-toggle .lp-ti-sun,
.lp-theme-toggle .lp-ti-moon{
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
/* Light mode: hide sun, show moon */
html:not([data-theme="dark"]) .lp-theme-toggle .lp-ti-sun{ display: none; }
/* Dark mode: hide moon, show sun */
html[data-theme="dark"] .lp-theme-toggle .lp-ti-moon{ display: none; }

/* ══════════════════════════════════════════════════════════════════
   Landing Page — Language Switcher Dropdown
   Matches the premium glass aesthetic of the rest of the header.
   ══════════════════════════════════════════════════════════════════ */

/* Wrapper — the positioning anchor for the dropdown panel */
.lp-lang-wrap{
  position: relative;
  display: flex;
  align-items: center;
}

/* Trigger button — flag + code + caret */
.lp-lang-btn{
  display: flex;
  align-items: center;
  gap: 5px;
  height: 40px;
  padding: 0 12px 0 10px;
  border-radius: 12px;
  border: 1px solid var(--lp-line);
  background: var(--lp-bg-soft);
  color: var(--lp-text);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
  user-select: none;
}
.lp-lang-btn:hover{
  background: var(--lp-card);
  transform: scale(1.03);
  box-shadow: var(--lp-shadow-sm);
}
.lp-lang-btn:active{ transform: scale(.96); }

.lp-lang-flag{
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.lp-lang-code{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--lp-text);
}
.lp-lang-caret{
  color: var(--lp-text-soft);
  transition: transform .18s ease;
  flex-shrink: 0;
}
.lp-lang-btn[aria-expanded="true"] .lp-lang-caret{
  transform: rotate(180deg);
}

/* Dropdown panel — hidden by default */
.lp-lang-drop{
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: var(--lp-card, #fff);
  border: 1px solid var(--lp-line);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  padding: 6px;
  z-index: 600;
  animation: lpLangSlideIn .18s ease;
  overflow: hidden;
}
[data-theme="dark"] .lp-lang-drop{
  background: #0d1525;
  box-shadow: 0 8px 32px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.2);
}
.lp-lang-drop.lp-lang-open{ display: block; }

@keyframes lpLangSlideIn{
  from{ opacity: 0; transform: translateY(-6px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* Language option row */
.lp-lang-option{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--lp-text);
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background .14s ease;
}
.lp-lang-option:hover{
  background: var(--lp-bg-soft);
}
.lp-lang-option.is-selected{
  background: var(--lp-bg-soft);
  font-weight: 700;
}
.lp-lang-opt-flag{
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}
.lp-lang-opt-label{
  flex: 1;
  white-space: nowrap;
}
.lp-lang-tick{
  color: var(--lp-accent, #6366f1);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity .14s ease;
}
.lp-lang-option.is-selected .lp-lang-tick{ opacity: 1; }

/* Mobile: make the dropdown align to left edge on small screens */
@media (max-width: 480px){
  .lp-lang-drop{
    right: auto;
    left: 0;
    min-width: 160px;
  }
}