/* ============================================================
   ShopApp Labs Theme — landing-page.css  v2.0
   Full animation system: scroll-reveal, parallax, 3D tilts,
   counters, floating elements, gradient pulses & more.
   ============================================================ */

/* ── Google Fonts ───────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800;900&display=swap');

/* ── Design Tokens ──────────────────────────────────────────── */
:root {
  --indigo:       #4f46e5;
  --indigo-dark:  #3730a3;
  --indigo-mid:   #4338ca;
  --indigo-light: #e0e7ff;
  --indigo-xlight:#f0f0ff;
  --teal:         #0d9488;
  --teal-light:   #ccfbf1;
  --green:        #22c55e;
  --green-light:  #dcfce7;
  --purple:       #8b5cf6;
  --purple-light: #ede9fe;
  --amber:        #f59e0b;
  --red:          #ef4444;
  --dark:         #0f172a;
  --dark-2:       #1e293b;
  --text:         #334155;
  --muted:        #64748b;
  --border:       #e2e8f0;
  --border-light: #f1f5f9;
  --bg-light:     #f8fafc;
  --bg-white:     #ffffff;
  --wa-green:     #25d366;

  --ff-head: 'Outfit', system-ui, sans-serif;
  --ff-body: 'Inter',  system-ui, sans-serif;

  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   22px;
  --r-xl:   32px;
  --r-2xl:  44px;
  --r-full: 9999px;

  --shadow-xs:  0 1px 2px rgba(0,0,0,.04);
  --shadow-sm:  0 1px 3px rgba(0,0,0,.06);
  --shadow-md:  0 4px 14px rgba(0,0,0,.07);
  --shadow-lg:  0 12px 32px rgba(0,0,0,.08);
  --shadow-xl:  0 24px 56px rgba(0,0,0,.09);
  --shadow-2xl: 0 48px 96px rgba(0,0,0,.10);
  --shadow-glow:      0 8px 32px rgba(79,70,229,.28);
  --shadow-glow-teal: 0 8px 32px rgba(13,148,136,.28);

  --ease:       cubic-bezier(.4,0,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-out:   cubic-bezier(0,0,.2,1);
  --tr:         .28s var(--ease);
}

/* ── Reset ──────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--ff-body);
  font-size:16px;
  color:var(--text);
  background:var(--bg-white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{cursor:pointer;border:none;background:none;font-family:inherit;font-size:inherit}
input,textarea{font-family:inherit;font-size:inherit}
h1,h2,h3,h4,h5,h6{font-family:var(--ff-head);color:var(--dark);line-height:1.2;font-weight:700}

/* ════════════════════════════════════════════════════════════
   SCROLL-REVEAL ANIMATION SYSTEM
   ════════════════════════════════════════════════════════════ */
.sal-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.sal-reveal.sal-slide-left  { transform: translateX(-50px); }
.sal-reveal.sal-slide-right { transform: translateX(50px); }
.sal-reveal.sal-scale-in    { transform: scale(.88) translateY(20px); }
.sal-reveal.sal-visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* Staggered children delays */
.sal-stagger > *:nth-child(1)  { transition-delay: .05s; }
.sal-stagger > *:nth-child(2)  { transition-delay: .15s; }
.sal-stagger > *:nth-child(3)  { transition-delay: .25s; }
.sal-stagger > *:nth-child(4)  { transition-delay: .35s; }
.sal-stagger > *:nth-child(5)  { transition-delay: .45s; }
.sal-stagger > *:nth-child(6)  { transition-delay: .55s; }

/* ── Layout ─────────────────────────────────────────────────── */
#sal-landing{overflow-x:hidden}
.sal-container{width:100%;max-width:1200px;margin:0 auto;padding:0 28px}
.sal-section{padding:100px 0}
.sal-bg-light{background:var(--bg-light)}
.sal-bg-white{background:var(--bg-white)}

.sal-section-header{text-align:center;margin-bottom:64px}
.sal-h1{font-size:clamp(2.4rem,5vw,4rem);letter-spacing:-.04em;line-height:1.08;margin-bottom:24px;font-weight:900}
.sal-h2{font-size:clamp(1.9rem,3.5vw,2.9rem);letter-spacing:-.03em;margin-bottom:18px}
.sal-section-desc{font-size:1.1rem;color:var(--muted);max-width:640px;margin:0 auto;line-height:1.7}

.sal-gradient-text{
  background:linear-gradient(135deg,var(--indigo) 0%,#818cf8 50%,var(--teal) 100%);
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:gradientShift 4s ease infinite;
}
@keyframes gradientShift{
  0%  {background-position:0% 50%}
  50% {background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* ── Pills ──────────────────────────────────────────────────── */
.sal-pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 18px;
  background:var(--indigo-light);
  color:var(--indigo);
  border-radius:var(--r-full);
  font-family:var(--ff-head);font-weight:700;font-size:.8rem;
  letter-spacing:.07em;text-transform:uppercase;
  margin-bottom:18px;
}
.sal-pill-teal{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 18px;
  background:var(--teal-light);color:var(--teal);
  border-radius:var(--r-full);
  font-family:var(--ff-head);font-weight:700;font-size:.85rem;
  margin-bottom:26px;width:fit-content;
  animation:pillPulse 3s ease-in-out infinite;
}
@keyframes pillPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(13,148,136,.15)}
  50%    {box-shadow:0 0 0 8px rgba(13,148,136,0)}
}

/* ── Buttons ─────────────────────────────────────────────────── */
.sal-btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;font-family:var(--ff-head);font-weight:700;
  border-radius:var(--r-md);transition:var(--tr);
  white-space:nowrap;line-height:1;position:relative;overflow:hidden;
}
.sal-btn::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,0));
  opacity:0;transition:opacity var(--tr);pointer-events:none;
}
.sal-btn:hover::after{opacity:1}

.sal-btn-sm {padding:9px 22px;font-size:.9rem}
.sal-btn-lg {padding:15px 32px;font-size:1.05rem}
.sal-btn-block{width:100%;padding:15px 20px;font-size:1rem}

.sal-btn-primary{
  background:linear-gradient(135deg,var(--indigo),#6366f1);
  color:#fff;box-shadow:var(--shadow-glow);
}
.sal-btn-primary:hover{
  background:linear-gradient(135deg,var(--indigo-dark),var(--indigo));
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 16px 40px rgba(79,70,229,.4);
}
.sal-btn-primary:active{transform:translateY(-1px) scale(1.00)}

.sal-btn-outline{
  background:var(--bg-white);color:var(--dark);
  border:1.5px solid var(--border);box-shadow:var(--shadow-sm);
}
.sal-btn-outline:hover{
  border-color:var(--indigo);color:var(--indigo);
  transform:translateY(-3px);box-shadow:var(--shadow-md);
}
.sal-btn-ghost{
  background:transparent;color:var(--dark);border:1.5px solid var(--border);
}
.sal-btn-ghost:hover{background:var(--bg-light);border-color:var(--muted)}

.sal-btn-wa{
  background:var(--wa-green);color:#fff;
  box-shadow:0 6px 24px rgba(37,211,102,.35);
  border-radius:var(--r-md);padding:14px 28px;
  font-family:var(--ff-head);font-weight:700;font-size:1rem;
  gap:10px;display:inline-flex;align-items:center;transition:var(--tr);
}
.sal-btn-wa:hover{
  background:#1da851;transform:translateY(-3px) scale(1.02);
  box-shadow:0 12px 32px rgba(37,211,102,.45);
}

/* ════════════════════════════════════════════════════════════
   HEADER
   ════════════════════════════════════════════════════════════ */
.sal-header{
  position:sticky;top:0;z-index:1000;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(226,232,240,.6);
  padding:14px 0;transition:var(--tr);
}
.sal-header.scrolled{
  padding:10px 0;box-shadow:0 2px 20px rgba(79,70,229,.08);
  background:rgba(255,255,255,.95);
}
.sal-nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}

.sal-logo{
  display:flex;align-items:center;gap:10px;
  font-family:var(--ff-head);font-size:1.45rem;font-weight:900;
  color:var(--dark);flex-shrink:0;
}
.sal-logo span{
  background:linear-gradient(135deg,var(--indigo),var(--teal));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.sal-logo-icon{
  width:38px;height:38px;
  background:linear-gradient(135deg,var(--indigo),var(--teal));
  border-radius:10px;display:flex;align-items:center;justify-content:center;
  color:#fff;flex-shrink:0;
  box-shadow:var(--shadow-glow);
  transition:var(--tr);
}
.sal-logo:hover .sal-logo-icon{transform:rotate(-8deg) scale(1.08)}

.sal-nav{display:flex;gap:28px;align-items:center}
.sal-nav-link{
  font-weight:500;font-size:.95rem;color:var(--text);
  position:relative;padding:3px 0;transition:color var(--tr);
}
.sal-nav-link::after{
  content:'';position:absolute;bottom:-1px;left:0;
  width:0;height:2px;
  background:linear-gradient(90deg,var(--indigo),var(--teal));
  border-radius:var(--r-full);transition:width var(--tr);
}
.sal-nav-link:hover{color:var(--indigo)}
.sal-nav-link:hover::after{width:100%}

.sal-nav-actions{display:flex;gap:12px;align-items:center;flex-shrink:0}

.sal-burger{display:none;flex-direction:column;gap:5px;width:26px;padding:2px}
.sal-burger span{display:block;width:100%;height:2px;background:var(--dark);border-radius:var(--r-full);transition:var(--tr)}

/* ════════════════════════════════════════════════════════════
   HERO — full animated layout
   ════════════════════════════════════════════════════════════ */
.sal-hero{
  position:relative;padding:110px 0 100px;
  background:var(--bg-white);overflow:hidden;
}

/* Animated background grid */
.sal-hero::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(79,70,229,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(79,70,229,.04) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 0%,black 30%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 0%,black 30%,transparent 100%);
  pointer-events:none;
}

/* Animated blobs */
.sal-blob{
  position:absolute;border-radius:var(--r-full);
  filter:blur(80px);opacity:0;pointer-events:none;
  animation:blobReveal 1.2s var(--ease-out) forwards;
}
.sal-blob-1{
  width:480px;height:480px;
  background:radial-gradient(circle,rgba(79,70,229,.18),transparent 70%);
  top:-120px;right:-80px;animation-delay:.2s;
}
.sal-blob-2{
  width:380px;height:380px;
  background:radial-gradient(circle,rgba(13,148,136,.14),transparent 70%);
  bottom:-80px;left:-60px;animation-delay:.5s;
}
.sal-blob-3{
  width:260px;height:260px;
  background:radial-gradient(circle,rgba(139,92,246,.1),transparent 70%);
  top:40%;left:42%;animation-delay:.8s;
}
@keyframes blobReveal{to{opacity:1}}

.sal-hero-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:64px;align-items:center;position:relative;z-index:1;
}
.sal-hero-text{display:flex;flex-direction:column}

.sal-hero-sub{
  font-size:1.15rem;color:var(--muted);
  line-height:1.7;margin-bottom:36px;
}
.sal-hero-sub strong{color:var(--dark)}

.sal-hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:38px}

.sal-trust-row{
  display:flex;gap:24px;flex-wrap:wrap;
  padding-top:24px;border-top:1px solid var(--border);
}
.sal-trust-item{
  display:flex;align-items:center;gap:8px;
  font-size:.875rem;font-weight:600;color:var(--dark);
}
.sal-trust-item svg{color:var(--green);flex-shrink:0}

/* Hero image with floating elements */
.sal-hero-visual{position:relative}

.sal-hero-img-wrap{
  border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--shadow-2xl);border:4px solid #fff;
  position:relative;z-index:2;
  animation:heroImgFloat 6s ease-in-out infinite;
}
@keyframes heroImgFloat{
  0%,100%{transform:translateY(0) rotate(0deg)}
  33%    {transform:translateY(-10px) rotate(.3deg)}
  66%    {transform:translateY(-5px) rotate(-.2deg)}
}

/* Floating badge cards on the hero */
.sal-float-badge{
  position:absolute;z-index:3;
  background:var(--bg-white);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:12px 18px;
  box-shadow:var(--shadow-xl);
  display:flex;align-items:center;gap:10px;
  font-family:var(--ff-head);font-weight:700;font-size:.9rem;
  color:var(--dark);white-space:nowrap;
}
.sal-float-badge-1{
  top:-22px;left:-32px;
  animation:floatBadge1 5s ease-in-out infinite;
}
.sal-float-badge-2{
  bottom:-20px;right:-28px;
  animation:floatBadge2 6s ease-in-out infinite;
}
.sal-float-badge-3{
  top:50%;right:-40px;transform:translateY(-50%);
  animation:floatBadge3 7s ease-in-out infinite;
  flex-direction:column;text-align:center;padding:16px 20px;gap:4px;
}
@keyframes floatBadge1{0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-12px) rotate(1deg)}}
@keyframes floatBadge2{0%,100%{transform:translateY(0) rotate(1deg)} 50%{transform:translateY(-8px) rotate(-1deg)}}
@keyframes floatBadge3{0%,100%{transform:translateY(-50%) rotate(0deg)} 50%{transform:translateY(calc(-50% - 10px)) rotate(.5deg)}}

.sal-badge-icon{
  width:36px;height:36px;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.sal-badge-icon-green{background:var(--green-light);color:var(--green)}
.sal-badge-icon-indigo{background:var(--indigo-light);color:var(--indigo)}
.sal-badge-icon-teal{background:var(--teal-light);color:var(--teal)}
.sal-badge-small{font-size:.75rem;color:var(--muted);font-weight:400}
.sal-badge-big{font-size:1.4rem;font-weight:900;color:var(--indigo)}

/* ════════════════════════════════════════════════════════════
   STATS BAR — animated counters
   ════════════════════════════════════════════════════════════ */
.sal-stats-bar{
  background:var(--dark);padding:40px 0;
  position:relative;overflow:hidden;
}
.sal-stats-bar::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(79,70,229,.15) 0%,transparent 60%,rgba(13,148,136,.1) 100%);
  pointer-events:none;
}
.sal-stats-grid{
  display:flex;align-items:center;justify-content:center;
  gap:0;flex-wrap:wrap;position:relative;z-index:1;
}
.sal-stat{text-align:center;padding:16px 44px}
.sal-stat-num{
  font-family:var(--ff-head);font-size:2.4rem;font-weight:900;
  background:linear-gradient(135deg,#a5b4fc,#5eead4);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  line-height:1;margin-bottom:6px;
}
.sal-stat-label{color:rgba(255,255,255,.55);font-size:.85rem;font-weight:500}
.sal-stat-divider{width:1px;height:56px;background:rgba(255,255,255,.1);flex-shrink:0}

/* ════════════════════════════════════════════════════════════
   VALUE CARDS — 4-col with 3D tilt effect
   ════════════════════════════════════════════════════════════ */
.sal-cards-4{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
}
.sal-card{
  background:var(--bg-white);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:34px 28px;
  box-shadow:var(--shadow-sm);
  transition:transform var(--tr),box-shadow var(--tr),border-color var(--tr);
  transform-style:preserve-3d;will-change:transform;
  position:relative;overflow:hidden;
}
.sal-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(79,70,229,.03),transparent 60%);
  opacity:0;transition:opacity var(--tr);pointer-events:none;
}
.sal-card:hover{
  transform:translateY(-8px) scale(1.01);
  box-shadow:var(--shadow-lg);border-color:var(--indigo-light);
}
.sal-card:hover::before{opacity:1}

.sal-card-icon{
  width:56px;height:56px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:22px;transition:transform var(--tr);
}
.sal-card:hover .sal-card-icon{transform:scale(1.12) rotate(-5deg)}
.sal-icon-indigo{background:rgba(79,70,229,.09); color:var(--indigo)}
.sal-icon-teal  {background:rgba(13,148,136,.09); color:var(--teal)}
.sal-icon-green {background:rgba(34,197,94,.09);  color:var(--green)}
.sal-icon-purple{background:rgba(139,92,246,.09); color:var(--purple)}
.sal-card h3{font-size:1.15rem;margin-bottom:10px}
.sal-card p {font-size:.93rem;color:var(--muted);line-height:1.65}

/* ════════════════════════════════════════════════════════════
   VS GRID
   ════════════════════════════════════════════════════════════ */
.sal-vs-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.sal-vs-card{border-radius:var(--r-lg);padding:48px 44px;border:2px solid transparent}
.sal-vs-problem{background:rgba(254,242,242,.5);border-color:rgba(239,68,68,.12)}
.sal-vs-solution{
  background:transparent;border:2px solid transparent;
  box-shadow:var(--shadow-lg);position:relative;
}
.sal-vs-solution::before{
  content:'';position:absolute;inset:-2px;border-radius:inherit;
  background:linear-gradient(135deg,rgba(13,148,136,.25),rgba(79,70,229,.2));
  z-index:-2;animation:borderGlow 3s ease-in-out infinite;
}
.sal-vs-solution::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:rgba(240,253,250,.96);
  z-index:-1;border:2px solid rgba(34,197,94,.25);
  pointer-events:none;
}
@keyframes borderGlow{
  0%,100%{opacity:.5} 50%{opacity:1}
}
.sal-vs-head{display:flex;align-items:center;gap:14px;margin-bottom:32px}
.sal-vs-head h3{font-size:1.4rem}
.sal-vs-icon{
  width:42px;height:42px;border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;
  color:#fff;flex-shrink:0;
}
.sal-vs-icon-red  {background:var(--red)}
.sal-vs-icon-green{background:var(--green)}
.sal-vs-list{display:flex;flex-direction:column;gap:20px}
.sal-vs-list li{display:flex;gap:12px;align-items:flex-start;font-size:1rem}
.sal-vs-list li svg{flex-shrink:0;margin-top:3px}
.sal-vs-problem  .sal-vs-list li svg{color:var(--red)}
.sal-vs-solution .sal-vs-list li svg{color:var(--green)}

/* ════════════════════════════════════════════════════════════
   STEPS — with connecting animated line
   ════════════════════════════════════════════════════════════ */
.sal-steps{display:flex;align-items:flex-start;gap:16px;justify-content:center}
.sal-step{flex:1;max-width:260px;text-align:center;display:flex;flex-direction:column;align-items:center}
.sal-step-num{
  width:68px;height:68px;border-radius:var(--r-full);
  background:var(--bg-white);border:3px solid var(--indigo-light);
  color:var(--indigo);font-family:var(--ff-head);font-size:1.55rem;font-weight:900;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:24px;box-shadow:var(--shadow-sm);
  transition:var(--ease-spring) .35s;transition-property:background,color,transform,border-color,box-shadow;
  position:relative;
}
.sal-step-num::after{
  content:'';position:absolute;inset:-8px;border-radius:var(--r-full);
  border:2px dashed var(--indigo-light);
  animation:spinSlow 12s linear infinite;
}
@keyframes spinSlow{to{transform:rotate(360deg)}}

.sal-step:hover .sal-step-num{
  background:linear-gradient(135deg,var(--indigo),var(--teal));
  color:#fff;border-color:transparent;
  transform:scale(1.12);
  box-shadow:var(--shadow-glow);
}
.sal-step:hover .sal-step-num::after{border-color:rgba(79,70,229,.2)}
.sal-step h3{font-size:1.2rem;margin-bottom:10px}
.sal-step p {font-size:.93rem;color:var(--muted);line-height:1.65}

.sal-step-arrow{
  color:var(--border);flex-shrink:0;margin-top:22px;
  animation:arrowPulse 2s ease-in-out infinite;
}
@keyframes arrowPulse{
  0%,100%{transform:translateX(0);color:var(--border)}
  50%    {transform:translateX(4px);color:var(--indigo-light)}
}

/* ════════════════════════════════════════════════════════════
   DEMO PLAYER
   ════════════════════════════════════════════════════════════ */
.sal-demo-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:center}
.sal-demo-scenarios{display:flex;flex-direction:column;gap:14px}
.sal-scenario{
  display:flex;align-items:center;gap:16px;
  background:var(--bg-white);border:1.5px solid var(--border);
  border-radius:var(--r-md);padding:18px 22px;text-align:left;cursor:pointer;
  transition:var(--tr);
}
.sal-scenario:hover,.sal-scenario.active{
  border-color:var(--indigo);
  background:linear-gradient(135deg,var(--indigo-xlight),var(--indigo-light));
  box-shadow:var(--shadow-md);transform:translateX(4px);
}
.sal-scenario-icon{
  width:42px;height:42px;border-radius:var(--r-full);background:var(--bg-light);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  color:var(--indigo);transition:var(--tr);
}
.sal-scenario.active .sal-scenario-icon{background:var(--indigo);color:#fff;transform:scale(1.1)}
.sal-scenario h4{font-size:.98rem;margin-bottom:2px}
.sal-scenario p {font-size:.82rem;color:var(--muted)}

.sal-demo-player{
  background:var(--dark);border-radius:var(--r-xl);padding:34px;color:#fff;
  box-shadow:var(--shadow-2xl);overflow:hidden;position:relative;
}
.sal-demo-player::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(79,70,229,.1) 0%,transparent 50%,rgba(13,148,136,.08) 100%);
  pointer-events:none;
}
.sal-player-top{
  display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:14px;margin-bottom:28px;
  position:relative;z-index:1;
}
.sal-player-label{display:flex;align-items:center;gap:8px;font-family:var(--ff-head);font-size:1rem;color:rgba(255,255,255,.9)}
.sal-live-dot{
  width:9px;height:9px;border-radius:var(--r-full);background:var(--green);
  box-shadow:0 0 0 0 rgba(34,197,94,.5);
  animation:liveDotPulse 2s ease-in-out infinite;
}
@keyframes liveDotPulse{
  0%  {box-shadow:0 0 0 0   rgba(34,197,94,.5)}
  70% {box-shadow:0 0 0 8px rgba(34,197,94,0)}
  100%{box-shadow:0 0 0 0   rgba(34,197,94,0)}
}
.sal-player-top small{color:rgba(255,255,255,.3);font-size:.8rem}

.sal-player-body{display:flex;flex-direction:column;align-items:center;position:relative;z-index:1}

.sal-avatar{
  width:92px;height:92px;border-radius:var(--r-full);
  background:linear-gradient(135deg,var(--indigo),var(--teal));
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
  position:relative;box-shadow:0 0 32px rgba(79,70,229,.5);
}
.sal-avatar-ring{
  position:absolute;inset:-8px;border-radius:var(--r-full);
  border:2px solid rgba(79,70,229,.35);
  animation:ringPulse 2.5s ease-out infinite;
}
.sal-avatar-ring-2{
  position:absolute;inset:-18px;border-radius:var(--r-full);
  border:1px solid rgba(13,148,136,.2);
  animation:ringPulse 2.5s ease-out infinite .8s;
}
@keyframes ringPulse{
  0%  {transform:scale(.95);opacity:.9}
  100%{transform:scale(1.3); opacity:0}
}
.sal-caller-name{font-family:var(--ff-head);font-size:1.15rem;font-weight:700;margin-bottom:5px}
.sal-call-status{
  font-size:.95rem;color:#e2e8f0;font-weight:500;
  letter-spacing:.01em;margin-bottom:22px;line-height:1.5;
  text-align:center;max-width:90%;min-height:48px;
  display:flex;align-items:center;justify-content:center;
  gap:6px;
}
.sal-call-status img.emoji {
  display: inline-block !important;
  height: 1.35em !important;
  width: 1.35em !important;
  margin: 0 4px !important;
  vertical-align: -0.25em !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Waveform using height (not scaleY) for bar animation */
.sal-waveform{
  display:flex;align-items:center;justify-content:center;
  gap:4px;height:56px;margin-bottom:26px;width:100%;
}
.sal-bar{
  width:4px;height:4px;
  background:rgba(255,255,255,.15);border-radius:var(--r-full);
  transition:height .07s var(--ease);
}
#sal-demo-player.playing .sal-bar{
  background:linear-gradient(to top, var(--teal) 0%, var(--indigo) 100%);
}

.sal-play-btn{
  width:58px;height:58px;border-radius:var(--r-full);
  background:#fff;color:var(--dark);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.25);transition:var(--tr);flex-shrink:0;
}
.sal-play-btn:hover{
  transform:scale(1.1);
  background:linear-gradient(135deg,var(--indigo),var(--teal));
  color:#fff;
  box-shadow:var(--shadow-glow);
}
.sal-icon-play{margin-left:3px}

/* ════════════════════════════════════════════════════════════
   USE CASES — with images
   ════════════════════════════════════════════════════════════ */
.sal-use-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.sal-use-card{
  background:var(--bg-white);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;
  transition:transform var(--tr),box-shadow var(--tr),border-color var(--tr);
  display:flex;flex-direction:column;
}
.sal-use-card:hover{
  transform:translateY(-10px) scale(1.01);
  box-shadow:var(--shadow-xl);border-color:var(--indigo-light);
}
.sal-use-card-img-wrapper {
  height: 190px;
  background: var(--dark-2);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* Elegant tech mesh grid background */
.sal-use-card-img-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.02) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  background-position: center;
  mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
  pointer-events: none;
}

/* Radial background glow */
.sal-use-card-glow {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: var(--r-full);
  background: radial-gradient(circle, rgba(79, 70, 229, 0.18) 0%, transparent 70%);
  filter: blur(14px);
  pointer-events: none;
  z-index: 1;
  transition: background .4s var(--ease), transform .6s var(--ease), opacity .4s var(--ease);
}
.sal-use-card:hover .sal-use-card-glow {
  background: radial-gradient(circle, rgba(13, 148, 136, 0.22) 0%, transparent 70%);
  transform: scale(1.25);
}

/* Glassmorphic floating central badge */
.sal-use-card-badge-wrap {
  width: 76px;
  height: 76px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.02);
  border: 1.5px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  transition: transform 0.4s var(--ease-spring), border-color var(--tr), background var(--tr), box-shadow var(--tr);
}
.sal-use-card:hover .sal-use-card-badge-wrap {
  transform: translateY(-5px) scale(1.06);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(13, 148, 136, 0.35);
  box-shadow: 0 16px 40px rgba(13, 148, 136, 0.2);
}

.sal-use-card-icon {
  width: 36px;
  height: 36px;
  color: rgba(255, 255, 255, 0.65);
  transition: color var(--tr), transform 0.4s var(--ease-spring);
}
.sal-use-card:hover .sal-use-card-icon {
  color: var(--teal);
  transform: scale(1.08);
}
.sal-use-card-body{padding:28px 24px 24px;flex:1;display:flex;flex-direction:column}
.sal-use-tag{
  display:inline-block;font-size:.75rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--teal);margin-bottom:8px;
}
.sal-use-card h3{font-size:1.25rem;margin-bottom:10px}
.sal-use-card p {font-size:.93rem;color:var(--muted);line-height:1.65;margin-bottom:16px;flex:1}
.sal-use-quote{
  font-style:italic;font-size:.875rem;color:var(--text);
  background:var(--bg-light);border-left:3px solid var(--teal);
  padding:10px 14px;border-radius:0 var(--r-sm) var(--r-sm) 0;
}

/* ════════════════════════════════════════════════════════════
   FEATURES — dashboard image + cards
   ════════════════════════════════════════════════════════════ */
.sal-features-layout{
  display:grid;grid-template-columns:1.2fr 1fr;
  gap:60px;align-items:center;
}
.sal-features-img-wrap{
  border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--shadow-2xl);border:4px solid #fff;
  position:relative;
  animation:heroImgFloat 7s ease-in-out infinite 1s;
}
.sal-features-img-wrap::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom right,rgba(79,70,229,.06),transparent 60%);
  pointer-events:none;
}
.sal-features-list{display:flex;flex-direction:column;gap:20px}
.sal-feat{
  display:flex;gap:18px;align-items:flex-start;
  padding:24px;border:1px solid var(--border);
  border-radius:var(--r-md);background:var(--bg-white);
  transition:var(--tr);
}
.sal-feat:hover{
  transform:translateX(6px);
  border-color:var(--indigo-light);box-shadow:var(--shadow-md);
}
.sal-feat-icon{
  width:50px;height:50px;background:var(--indigo-light);color:var(--indigo);
  border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:var(--tr);
}
.sal-feat:hover .sal-feat-icon{background:var(--indigo);color:#fff;transform:scale(1.1) rotate(-5deg)}
.sal-feat h3{font-size:1.1rem;margin-bottom:6px}
.sal-feat p {font-size:.91rem;color:var(--muted);line-height:1.6}

/* ════════════════════════════════════════════════════════════
   COMPARISON TABLE
   ════════════════════════════════════════════════════════════ */
.sal-table-wrap{
  border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--border);box-shadow:var(--shadow-lg);overflow-x:auto;
}
.sal-table{width:100%;border-collapse:collapse;min-width:600px}
.sal-table th,.sal-table td{padding:18px 22px;text-align:left;border-bottom:1px solid var(--border)}
.sal-table th{background:var(--bg-light);font-family:var(--ff-head);font-weight:700}
.sal-table tbody tr{transition:background var(--tr)}
.sal-table tbody tr:hover{background:var(--bg-light)}
.sal-table td{font-size:.95rem}
.sal-table tr:last-child td{border-bottom:none}
.sal-th-hl{background:rgba(79,70,229,.05)!important;border-top:3px solid var(--indigo)!important;text-align:center!important}
.sal-td-hl{background:rgba(79,70,229,.03);text-align:center;font-weight:600;border-left:1px solid rgba(79,70,229,.1);border-right:1px solid rgba(79,70,229,.1)}
.sal-winner{display:inline-block;background:var(--indigo);color:#fff;font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:var(--r-full);margin-left:6px;vertical-align:middle}

/* ════════════════════════════════════════════════════════════
   PRICING
   ════════════════════════════════════════════════════════════ */
.sal-pricing-card{
  max-width:560px;margin:0 auto;
  background:transparent;
  border-radius:var(--r-2xl);overflow:hidden;
  box-shadow:var(--shadow-2xl);position:relative;
  transition:transform .4s var(--ease-spring),box-shadow .4s var(--ease);
}
.sal-pricing-card:hover{
  transform:translateY(-10px) scale(1.01);
  box-shadow:0 48px 96px rgba(79,70,229,.18);
}
/* Animated gradient border */
.sal-pricing-card::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(0deg,var(--indigo),var(--teal),var(--purple),var(--indigo));
  background-size:300% 300%;
  z-index:-2;
  animation:pricingBorder 6s ease infinite;
}
/* Inner white background card body */
.sal-pricing-card::after{
  content:'';position:absolute;inset:2px;border-radius:calc(var(--r-2xl) - 2px);
  background:var(--bg-white);
  z-index:-1;
  pointer-events:none;
}
@keyframes pricingBorder{
  0%  {background-position:0% 50%}
  50% {background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* Billing toggle */
.sal-billing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-light);
  border: 1px solid var(--border);
  padding: 6px;
  border-radius: var(--r-md);
  width: fit-content;
  margin: 0 auto 40px;
  position: relative;
  z-index: 10;
}
.sal-toggle-btn {
  padding: 10px 24px;
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: .95rem;
  color: var(--muted);
  border-radius: var(--r-sm);
  transition: var(--tr);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.sal-toggle-btn.active {
  background: var(--bg-white);
  color: var(--indigo);
  box-shadow: var(--shadow-sm);
}
.sal-save-badge {
  background: var(--teal-light);
  color: var(--teal);
  font-size: .7rem;
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-weight: 800;
}
.sal-price-savings-label {
  font-size: .95rem;
  color: var(--teal);
  font-weight: 700;
  margin-top: 8px;
  letter-spacing: .02em;
}

.sal-pricing-ribbon{
  position:absolute;top:28px;right:-44px;width:160px;
  background:linear-gradient(135deg,var(--teal),var(--indigo));
  color:#fff;font-size:.75rem;font-weight:800;text-align:center;
  padding:7px 0;transform:rotate(45deg);letter-spacing:.06em;
  font-family:var(--ff-head);
}
.sal-pricing-top{
  padding:48px 44px 32px;text-align:center;
  background:linear-gradient(to bottom,rgba(79,70,229,.03),transparent);
  border-bottom:1px solid var(--border);
}
.sal-pricing-top h3{font-size:1.7rem;margin-bottom:10px}
.sal-pricing-top>p{color:var(--muted);margin-bottom:26px}
.sal-price-display{display:flex;align-items:center;justify-content:center;gap:4px}
.sal-price-cur{font-size:2rem;font-weight:700;align-self:flex-start;margin-top:14px}
.sal-price-num{
  font-family:var(--ff-head);font-size:5rem;font-weight:900;line-height:1;
  background:linear-gradient(135deg,var(--indigo),var(--teal));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  transition: opacity 0.15s ease-in-out;
}
.sal-price-per{font-size:1rem;color:var(--muted);align-self:flex-end;margin-bottom:14px}
.sal-pricing-body{padding:38px 44px}
.sal-check-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}
.sal-check-list li{
  display:flex;align-items:center;gap:12px;font-size:1rem;font-weight:600;
  padding:10px 14px;border-radius:var(--r-sm);transition:background var(--tr);
}
.sal-check-list li:hover{background:var(--bg-light)}
.sal-check-list li svg{color:var(--green);flex-shrink:0}
.sal-free-badge{
  background:var(--teal-light);color:var(--teal);font-size:.75rem;
  font-weight:700;padding:2px 8px;border-radius:var(--r-full);margin-left:4px;
}
.sal-pricing-note{text-align:center;font-size:.85rem;color:var(--muted);margin-top:14px}

/* ════════════════════════════════════════════════════════════
   FAQ
   ════════════════════════════════════════════════════════════ */
.sal-faq-list{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.sal-faq-item{
  background:var(--bg-white);border:1px solid var(--border);
  border-radius:var(--r-md);overflow:hidden;
  transition:border-color var(--tr),box-shadow var(--tr),transform var(--tr);
}
.sal-faq-item:hover{border-color:var(--indigo-light);box-shadow:var(--shadow-sm);transform:translateX(3px)}
.sal-faq-item.open{border-color:var(--indigo-light);box-shadow:var(--shadow-md)}

.sal-faq-q{
  width:100%;padding:22px 26px;display:flex;
  justify-content:space-between;align-items:center;gap:16px;
  font-family:var(--ff-head);font-weight:700;font-size:1.05rem;
  color:var(--dark);text-align:left;transition:color var(--tr),background var(--tr);
}
.sal-faq-q:hover{color:var(--indigo);background:var(--indigo-xlight)}
.sal-faq-item.open .sal-faq-q{color:var(--indigo);background:var(--indigo-xlight)}
.sal-faq-arrow{flex-shrink:0;color:var(--muted);transition:transform var(--tr),color var(--tr)}
.sal-faq-item.open .sal-faq-arrow{transform:rotate(180deg);color:var(--indigo)}

.sal-faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease-out)}
.sal-faq-item.open .sal-faq-a{max-height:500px}
.sal-faq-a-inner{
  padding:0 26px 24px;font-size:.97rem;color:var(--text);
  line-height:1.7;border-top:1px solid var(--border);padding-top:18px;
}

/* ════════════════════════════════════════════════════════════
   CONTACT
   ════════════════════════════════════════════════════════════ */
.sal-contact-layout{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:flex-start}
.sal-contact-info h2{margin-bottom:16px}
.sal-contact-info>p{color:var(--muted);margin-bottom:34px;line-height:1.7}
.sal-contact-details{display:flex;flex-direction:column;gap:22px;margin-bottom:36px}
.sal-contact-row{display:flex;align-items:center;gap:16px}
.sal-contact-ico{
  width:46px;height:46px;background:var(--indigo-light);color:var(--indigo);
  border-radius:var(--r-full);display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:var(--tr);
}
.sal-contact-row:hover .sal-contact-ico{background:var(--indigo);color:#fff;transform:scale(1.1) rotate(-8deg)}
.sal-contact-row small{display:block;font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin-bottom:2px}
.sal-contact-row strong{font-size:1.02rem;color:var(--dark)}

.sal-contact-form-wrap{
  background:var(--bg-white);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:48px 44px;box-shadow:var(--shadow-xl);
  position:relative;overflow:hidden;
}
.sal-contact-form-wrap::before{
  content:'';position:absolute;top:0;right:0;
  width:200px;height:200px;
  background:radial-gradient(circle,rgba(79,70,229,.06),transparent 70%);
  pointer-events:none;
}
.sal-contact-form-wrap h3{font-size:1.5rem;margin-bottom:28px;position:relative;z-index:1}
.sal-field{margin-bottom:18px;position:relative;z-index:1}
.sal-field label{display:block;font-weight:700;font-size:.875rem;color:var(--dark);margin-bottom:7px}
.sal-field input,.sal-field textarea{
  width:100%;padding:13px 18px;
  border:1.5px solid var(--border);border-radius:var(--r-md);
  background:var(--bg-light);color:var(--dark);font-size:.97rem;
  transition:border-color var(--tr),box-shadow var(--tr),background var(--tr);
}
.sal-field input:focus,.sal-field textarea:focus{
  outline:none;border-color:var(--indigo);background:var(--bg-white);
  box-shadow:0 0 0 3px rgba(79,70,229,.12);
}
.sal-field textarea{min-height:120px;resize:vertical}

.sal-form-status{
  margin-bottom:14px;padding:14px 18px;border-radius:var(--r-md);
  font-size:.94rem;font-weight:600;display:none;
}
.sal-form-status.success{display:block;background:var(--green-light);color:#15803d;border:1px solid rgba(34,197,94,.2)}
.sal-form-status.error  {display:block;background:rgba(239,68,68,.08); color:#b91c1c;border:1px solid rgba(239,68,68,.15)}
.sal-form-status.loading{display:block;background:var(--indigo-light);  color:var(--indigo);border:1px solid rgba(79,70,229,.15)}
.sal-spinner{
  display:inline-block;width:15px;height:15px;border:2px solid currentColor;
  border-right-color:transparent;border-radius:var(--r-full);
  animation:spin .7s linear infinite;vertical-align:middle;margin-right:7px;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════ */
.sal-footer{
  background:var(--dark);color:rgba(255,255,255,.5);
  padding:72px 0 32px;position:relative;overflow:hidden;
}
.sal-footer .sal-logo {
  color: #ffffff;
}
.sal-footer::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--indigo),var(--teal),transparent);
}

.sal-footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:52px;margin-bottom:52px}
.sal-footer-brand p{font-size:.9rem;line-height:1.7;max-width:300px;margin-top:14px}
.sal-footer-col h4{color:rgba(255,255,255,.9);font-family:var(--ff-head);font-size:1rem;margin-bottom:20px}
.sal-footer-col ul{display:flex;flex-direction:column;gap:12px}
.sal-footer-col a{font-size:.9rem;transition:color var(--tr),transform var(--tr);display:inline-block}
.sal-footer-col a:hover{color:var(--indigo-light);transform:translateX(4px)}
.sal-footer-bottom{
  border-top:1px solid rgba(255,255,255,.07);padding-top:28px;
  display:flex;justify-content:space-between;flex-wrap:wrap;
  gap:12px;font-size:.85rem;
}

/* ════════════════════════════════════════════════════════════
   PARTICLE DOT CANVAS (decorative, appended via JS)
   ════════════════════════════════════════════════════════════ */
#sal-particles{
  position:fixed;top:0;left:0;width:100%;height:100%;
  pointer-events:none;z-index:0;opacity:0.45;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media(max-width:1100px){
  .sal-cards-4{grid-template-columns:repeat(2,1fr)}
  .sal-hero-grid{grid-template-columns:1fr;gap:48px}
  .sal-hero-text{text-align:center;align-items:center}
  .sal-hero-ctas,.sal-trust-row{justify-content:center}
  .sal-float-badge-3{display:none}
  .sal-features-layout{grid-template-columns:1fr;gap:40px}
  .sal-contact-layout{grid-template-columns:1fr}
}
@media(max-width:820px){
  .sal-section{padding:64px 0}
  .sal-nav{display:none}
  .sal-nav.open{
    display:flex;flex-direction:column;
    position:absolute;top:100%;left:0;right:0;
    background:var(--bg-white);border-bottom:1px solid var(--border);
    padding:24px 28px;gap:18px;box-shadow:var(--shadow-lg);z-index:999;
  }
  .sal-nav-actions{display:none}
  .sal-burger{display:flex}
  .sal-vs-grid,.sal-use-grid,.sal-feat-grid,.sal-demo-layout{grid-template-columns:1fr}
  .sal-steps{flex-direction:column;align-items:center}
  .sal-step-arrow{transform:rotate(90deg)}
  .sal-stats-grid{gap:0}
  .sal-stat{padding:16px 24px}
  .sal-stat-divider{display:none}
  .sal-footer-grid{grid-template-columns:1fr;gap:32px}
  .sal-contact-form-wrap{padding:28px 22px}
  .sal-float-badge{display:none}
}
@media(max-width:520px){
  .sal-cards-4{grid-template-columns:1fr}
  .sal-hero{padding:72px 0 64px}
  .sal-pricing-top,.sal-pricing-body{padding:32px 24px}
}