/* Landing Page Styles (lightweight, customizable) */
:root {
  --lp-bg-gradient: linear-gradient(135deg,#f5fbff 0%,#ffffff 50%,#eef7ff 100%);
  --lp-accent: var(--primary-color, #3498db);
  --lp-accent-rgb: 52,152,219;
  --lp-accent-dark: var(--primary-dark,#2980b9);
  --lp-text-color: #2c3e50;
  --lp-muted: #5f6e7b;
  --lp-radius: 18px;
  --lp-shadow: 0 4px 16px -4px rgba(0,0,0,.08), 0 2px 4px -2px rgba(0,0,0,.06);
  --lp-section-padding: 4.5rem;
}

body.landing-active { background: var(--lp-bg-gradient); }

.lp-section { padding: var(--lp-section-padding) 0; position: relative; }
.lp-section-tight { padding: 2.75rem 0; }
.lp-section:nth-of-type(even) { background: linear-gradient(to bottom, rgba(255,255,255,.0), rgba(255,255,255,.65)); }

.lp-container { max-width: 1160px; margin: 0 auto; padding: 0 1rem; margin-top: -3rem;}

.lp-hero { padding-top: 5rem;}
.lp-hero { 
    position:relative; overflow:hidden;
}

/* Removed legacy hero variants (.lp-hero--glass, .lp-hero--minimal) to reduce CSS weight & avoid unused backdrop-filter repaints. */

/* Soft blend gradient variant (requested) */
.lp-hero--softblend { position:relative; 
    background-image: linear-gradient(-20deg, rgba(233,222,250,0.65) 0%, rgba(251,252,219,0.55) 100%);
  /* Use dynamic viewport to avoid iOS address bar jumps and rely less on JS var for initial paint */
  min-height: calc(100dvh - var(--app-topbar-height, 45px));
  display:flex; flex-direction:column; justify-content:center;
  /* Prevent subtle reflow when contents animate in */
  contain: layout paint;
  /* Promote layer to avoid snapping when returning to top */
  transform: translateZ(0);
}
/* Ensure seamless fade into body background (light) */
body:not(.dark-mode) .lp-hero--softblend { border-bottom:1px solid rgba(0,0,0,0.02); }
.lp-hero-heading { font-size: clamp(1.5rem,4.5vw,2rem); font-weight: 700; line-height: 1.08; letter-spacing: -1px; }
.lp-hero-sub { font-size: 1.125rem; max-width: 680px; margin: 1.25rem auto 2rem auto; color: var(--lp-muted); }
.lp-hero-actions { 
  contain: layout paint; 
  /* Remove will-change to avoid continuous layer invalidation causing jump on scroll restore */
}

/* Diagnostic helper (toggle in DOM if needed) */
.lp-hero-debug-outline * { outline:1px solid rgba(255,0,0,.15); }

.lp-btn { --btn-bg: var(--lp-accent); --btn-bg-hover: var(--lp-accent-dark); --btn-color:#fff; display:inline-flex; align-items:center; gap:.5rem; font-weight:600; padding:.85rem 1.4rem; border-radius: 999px; background:var(--btn-bg); color:var(--btn-color); text-decoration:none; box-shadow: 0 2px 4px rgba(0,0,0,.12) !important; transition: background .25s, box-shadow .25s, transform .25s; }
.lp-btn:hover { background: var(--btn-bg-hover); color:#fff; transform: translateY(-2px); box-shadow: 0 6px 16px -4px rgba(0,0,0,.2); }
.lp-btn-outline { --btn-bg:rgba(var(--lp-accent-rgb),0.1); --btn-bg-hover:rgba(var(--lp-accent-rgb),0.18); --btn-color: var(--lp-accent); box-shadow:none; backdrop-filter: blur(6px); border:1px solid rgba(var(--lp-accent-rgb),0.35); }
.lp-btn-outline:hover { color: var(--lp-accent-dark); }

/* Premium Success Button */
.btn-premium-success {
  background: linear-gradient(135deg, #2ecc71 0%, #1e8449 100%);
  border: none;
  color: #fff !important;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.btn-premium-success:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: all 0.6s;
  z-index: -1;
}

.btn-premium-success:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 25px rgba(46, 204, 113, 0.5);
  filter: brightness(1.05);
}

.btn-premium-success:hover:before {
  left: 100%;
}

.btn-premium-success:active {
  transform: translateY(-1px) scale(0.98);
}

/* Premium Primary Button */
.btn-premium-primary {
  background: linear-gradient(135deg, #3498db 0%, #2471a3 100%);
  border: none;
  color: #fff !important;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 15px rgba(52, 152, 219, 0.4);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.btn-premium-primary:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: all 0.6s;
  z-index: -1;
}

.btn-premium-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 25px rgba(52, 152, 219, 0.5);
  filter: brightness(1.05);
}

.btn-premium-primary:hover:before {
  left: 100%;
}

.btn-premium-primary:active {
  transform: translateY(-1px) scale(0.98);
}

.lp-feature-grid { display:grid; gap:1.75rem; grid-template-columns: repeat(auto-fit,minmax(340px,1fr)); }
.lp-feature-card { background:#fff; padding:1.25rem 1.15rem 1.35rem; border-radius: var(--lp-radius); box-shadow: var(--lp-shadow); position:relative; overflow:hidden; transition: transform .35s cubic-bezier(.4,1,.3,1), box-shadow .35s ease; }
.lp-feature-card:before { content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(var(--lp-accent-rgb),0.07),transparent 55%); opacity:0; transition:opacity .4s; }
.lp-feature-card:hover { transform: translateY(-6px); box-shadow: 0 8px 28px -6px rgba(0,0,0,.15), 0 4px 12px -4px rgba(0,0,0,.08); }
.lp-feature-card:hover:before { opacity:1; }
.lp-feature-icon { width:54px; height:54px; display:grid; place-items:center; background:linear-gradient(135deg,var(--lp-accent),var(--lp-accent-dark)); color:#fff; border-radius:14px; font-size:1.45rem; box-shadow:0 4px 12px -3px rgba(var(--lp-accent-rgb),.55); }

.lp-stepper { counter-reset: step; }
.lp-stepper-grid { display:grid; gap:1.25rem; }
.lp-step { display:flex; gap:1rem; background:#fff; border:1px solid #eef2f6; padding:1rem 1.1rem; border-radius: var(--lp-radius); align-items:center; position:relative; box-shadow:0 2px 4px rgba(0,0,0,.05); }
.lp-step:before { counter-increment: step; content: counter(step); width:36px; height:36px; flex-shrink: 0; background:var(--lp-accent); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:600; box-shadow:0 3px 8px -2px rgba(var(--lp-accent-rgb),.6); }

.lp-stats { display:grid; gap:1.5rem; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); }
.lp-stat { background:#fff; padding:1.25rem 1rem; border-radius: var(--lp-radius); box-shadow: var(--lp-shadow); text-align:center; }
.lp-stat h3 { font-size:clamp(1.55rem,3vw,2.1rem); font-weight:700; margin:0; color:var(--lp-accent); letter-spacing:-1px; }
.lp-stat p { margin:.35rem 0 0; font-size:.85rem; letter-spacing:.5px; text-transform:uppercase; color:var(--lp-muted); font-weight:600; }

.lp-media-apps { display:grid; gap:2rem; align-items:center; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); }
.lp-app-preview { background:#fff; border-radius: 32px; padding:1.5rem; box-shadow:0 12px 48px -10px rgba(0,0,0,.15); position:relative; min-height:340px; }
.lp-app-preview:before { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(140deg,rgba(var(--lp-accent-rgb),.1),transparent 60%); pointer-events:none; }

.lp-future-card { background:#fff; border-radius: var(--lp-radius); padding:1.4rem 1.35rem 1.5rem; box-shadow: var(--lp-shadow); display:flex; gap:1rem; align-items:flex-start; }
.lp-future-card i { font-size:1.4rem; color: var(--lp-accent-dark); }

.lp-cta { background:linear-gradient(120deg,var(--lp-accent),var(--lp-accent-dark)); color:#fff; border-radius: 34px; padding:3rem 2rem; position:relative; overflow:hidden; }
.lp-cta:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 20% 25%,rgba(255,255,255,.22),transparent 60%), radial-gradient(circle at 78% 65%,rgba(255,255,255,.18),transparent 70%); mix-blend-mode:overlay; pointer-events:none; }

.lp-footer-banner { background:#fff; border-radius: var(--lp-radius); padding:1rem 1.2rem; box-shadow: var(--lp-shadow); display:flex; flex-wrap:wrap; gap:.75rem 1.25rem; align-items:center; justify-content:space-between; }


.lp-feature-card .lp-muted {
  font-size: 1.1rem !important;
}
.features-intro {
  font-size: 1.125rem !important;
}

/* Utilities */
.lp-badge { display:inline-block; background:rgba(var(--lp-accent-rgb),.12); color:var(--lp-accent-dark); padding:.35rem .75rem; font-size:.675rem; font-weight:600; letter-spacing:.5px; border-radius:999px; text-transform:uppercase; }
.lp-muted { color: var(--lp-muted); }
.lp-divider { height:1px; width:100%; background:#e4ebf1; margin:2.4rem 0; }

@media (max-width: 768px){
  .lp-hero { text-align:center; }
  .lp-hero-actions { flex-direction:column; }
  .lp-cta { text-align:center; }
}

/* Brand Mark Styling */
.lp-brand-mark { display:flex; flex-direction:column; align-items:center; justify-content:center; }
.lp-brand-mark + .lp-badge { margin-top:.25rem; }
.lp-brand-logo-wrapper { width:96px; height:96px; border-radius:50%; background:#ffffff; border:1px solid #e5eaf0; box-shadow:0 4px 10px -6px rgba(0,0,0,.12),0 2px 5px -2px rgba(0,0,0,.08); display:flex; align-items:center; justify-content:center; position:relative; }
/* Remove previous decorative overlays for a pure white disc */
.lp-brand-logo-wrapper:before,
.lp-brand-logo-wrapper:after { content:none !important; }
.lp-brand-logo { width:58px; height:58px; object-fit:contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.18)); }
.lp-brand-logo-wrapper:hover { transform:translateY(-3px); transition:transform .4s cubic-bezier(.4,1,.3,1); }
.lp-brand-logo-wrapper:active { transform:translateY(0); }

.lp-feature-card {
  background: #fff;
  padding: 0 !important;
  border-radius: var(--lp-radius);
  /* Sophisticated multi-layered shadow for modern depth */
  box-shadow: 
    0 2px 4px rgba(0,0,0,0.02),
    0 10px 20px -5px rgba(0,0,0,0.04),
    0 0 0 1px rgba(0,0,0,0.04); 
  position: relative;
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
}

.lp-feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 
    0 20px 40px -12px rgba(0,0,0,0.12),
    0 0 0 1px rgba(0,0,0,0.05);
}

.lp-card-media {
  height: 200px;
  min-height: 200px;
  position: relative;
  overflow: hidden;
  border-top-left-radius: var(--lp-radius);
  border-top-right-radius: var(--lp-radius);
  background: #f8fafc;
  transform: translateZ(0);
}

/* Modern "Glass" Scrim - 3-sided inner shadow (left, right, bottom) */
.lp-card-media:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  /* 3-sided inset shadow: strong on left, right, bottom - minimal on top */
  box-shadow: 
    inset 12px 0 20px -12px rgba(0,0,0,0.3),   /* Left shadow */
    inset -12px 0 20px -12px rgba(0,0,0,0.3),  /* Right shadow */
    inset 0 -20px 25px -15px rgba(0,0,0,0.5),   /* Bottom shadow (stronger) */
    inset 0 2px 4px -2px rgba(0,0,0,0.03);      /* Very subtle top hint */
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.lp-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1);
  display: block;
}

.lp-feature-card:hover .lp-card-media img {
  transform: scale(1.04);
}

/* GLightbox anchor styling */
.lp-card-media a.glightbox {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  cursor: zoom-in;
}

/* Zoom hint icon */
.lp-zoom-hint {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(4px);
  border-radius: 50%;
  color: var(--lp-accent);
  font-size: 0.9rem;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 5;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

[dir="rtl"] .lp-zoom-hint {
  right: auto;
  left: 12px;
}

.lp-feature-card:hover .lp-zoom-hint {
  opacity: 1;
  transform: scale(1);
}

/* Mobile: always show hint with reduced opacity */
@media (max-width: 768px) {
  .lp-zoom-hint {
    opacity: 0.7;
    transform: scale(1);
  }
}

.lp-card-text {
  padding: 0 1.5rem 1.75rem 1.5rem;
  flex-grow: 1;
  background: #fff;
  position: relative;
  z-index: 2;
}

/* Pull the overlapping icon slightly more into the image area */
.lp-feature-icon {
  position: relative;
  z-index: 3;
  margin-top: -30px; 
  margin-bottom: 1.25rem;
  width: 60px;
  height: 60px;
  border: 4px solid #fff;
  border-radius: 16px;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}

/* Ensure grid doesn't overflow on small mobile screens */
@media (max-width: 575px) {
  .lp-feature-grid {
    grid-template-columns: 1fr;
  }
}