:root{
      --pp-blue:#0066FF; --pp-cyan:#00E5FF; --pp-lime:#22f39b;--pp-white:#FFFFFF;
      --pp-gradient:linear-gradient(135deg,var(--pp-cyan) 0%,var(--pp-blue) 100%);
      --pp-dark:#070a11; --pp-card:#0f1522; --pp-muted:#a0a6b6;
    }
    .split-illu .device 
    {
      position: relative!important;
      width: auto!important;
    }
    html,body{font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial;background:var(--pp-dark);color:#e7ecf8}
    .gradient-text{background:var(--pp-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
    .btn-gradient{background:var(--pp-gradient);box-shadow:0 10px 30px rgba(0,102,255,.35)}
    .glass{background:rgba(255,255,255,0.06);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.08)}
    .card{background:var(--pp-card);border:1px solid rgba(255,255,255,0.06)}
    .tag{font-size:.75rem;padding:.25rem .5rem;border-radius:.65rem;background:rgba(0,102,255,.12);border:1px solid rgba(0,102,255,.25);color:#cfe1ff}
    .mockup{position:relative;border-radius:18px;border:1px solid rgba(255,255,255,.08);overflow:hidden;background:#0b1220}
    .mockup:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(800px 300px at 10% -10%,rgba(0,102,255,.25),transparent),radial-gradient(600px 260px at 100% 0,rgba(0,229,255,.15),transparent)}
    .shine{position:relative;overflow:hidden}
    .shine:after{content:"";position:absolute;inset:-200%;background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.08) 50%,transparent 65%);transform:translateX(-100%);animation:shine 3.2s infinite}
    @keyframes shine{0%{transform:translateX(-100%)}60%,100%{transform:translateX(120%)}}

    /* ---------- Pretty borders / timeline / testimonials ---------- */
    .gborder{position:relative;border-radius:16px;background:var(--pp-card)}
    .gborder:before{content:"";position:absolute;inset:0;padding:1px;border-radius:16px;background:linear-gradient(135deg,rgba(0,102,255,.6),rgba(0,229,255,.4));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
    .noisy{background:radial-gradient(1200px 400px at 20% -20%,rgba(0,102,255,.10),transparent 60%),radial-gradient(900px 360px at 110% 0%,rgba(0,229,255,.08),transparent 60%),rgba(255,255,255,0.03)}
    .quote-mark{position:absolute;inset:auto 16px 16px auto;opacity:.25;font-size:64px;line-height:1}

    .timeline-img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:#0b1220}
    .daychip{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .75rem;border-radius:999px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);position:relative;z-index:1}
    .daychip .dot{width:14px;height:14px;border-radius:999px;background:radial-gradient(circle at 30% 30%,#5df,#06f);box-shadow:0 0 0 3px rgba(0,153,255,.15);animation:pulse 2.4s ease-in-out infinite}
    @keyframes pulse{0%,100%{transform:scale(1);box-shadow:0 0 0 3px rgba(0,153,255,.15)}50%{transform:scale(1.12);box-shadow:0 0 0 6px rgba(0,153,255,.12)}}

    /* ---------- Reveal-on-scroll ---------- */
    @media (prefers-reduced-motion:no-preference){
      .reveal{opacity:0;will-change:transform,opacity;transition:opacity .7s ease,transform .7s ease;transition-delay:var(--d,0ms)}
      .reveal.fade-up{transform:translateY(16px) scale(.98)}
      .reveal.zoom-in{transform:scale(.94)}
      .reveal.slide-in{transform:translateX(-16px)}
      .reveal.revealed{opacity:1;transform:none}
    }

    /* ---------- Pricing polish + animations ---------- */
    .pricing-grid{align-items:stretch}
    .plan{display:flex;flex-direction:column;gap:.5rem;transition:transform .2s ease, box-shadow .2s ease}
    .plan:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.2)}
    .plan-cta{margin-top:auto}

    .plan-popular{
      transform:scale(1.1);
      z-index:2;
      box-shadow:0 0 30px rgba(0,102,255,.25);
      border:1px solid rgba(0,229,255,.4);
      background:radial-gradient(circle at top,rgba(0,102,255,.15),rgba(0,0,0,.3));
      transition:transform .25s ease, box-shadow .25s ease, transform-origin .25s ease;
      transform-origin:center;
      will-change:transform;
    }
/* Center the Most Popular badge perfectly above the card */
.plan-popular { position: relative; }

.badge-popular{
  position: absolute;
  top: -0.9rem;
  left: 50% !important;       /* center anchor */
  right: auto !important;     /* cancel any 'right' from utilities */
  transform: translateX(-50%) !important;
  padding: .35rem .9rem;
  border-radius: 9999px;
  background: linear-gradient(90deg,#00e5ff,#0066ff,#00e5ff);
  background-size: 200% 100%;
  color: #fff;
  font-weight: 600;
  letter-spacing: .3px;
  box-shadow: 0 6px 18px rgba(0,102,255,.45);
  z-index: 5;
  animation: gradientShift 6s linear infinite, floaty 4s ease-in-out infinite;
}

/* Alternating split illustrations */
.split-illu{
  position:relative; aspect-ratio: 4/3; border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  transform-style:preserve-3d; perspective:900px;
}
.split-illu.alt { background:linear-gradient(180deg,rgba(0,229,255,.06),rgba(0,102,255,.04)); }

.split-illu .blob{
  position:absolute; inset:-20%; filter:blur(40px); opacity:.45; pointer-events:none;
  background: radial-gradient(600px 300px at 20% 10%, rgba(0,102,255,.22), transparent),
              radial-gradient(500px 240px at 90% 20%, rgba(0,229,255,.18), transparent);
  animation: blobFloat 14s ease-in-out infinite;
}
@keyframes blobFloat{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-12px,10px,0) scale(1.03)}
}

.split-illu .device{
  position:absolute; inset:auto 0 0 0; margin:auto; width:86%; height:auto; translate:0 4%;
  transform: translateZ(30px);
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.45));
  transition: transform .25s ease;
}
.split-illu:hover .device{ transform: translateZ(60px) scale(1.02); }

.statchip{
  position:absolute; bottom:14px; left:14px; z-index:2;
  font-size:.75rem; padding:.35rem .6rem; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
  color:#dbeafe; backdrop-filter: blur(6px);
}
.statchip.right{ left:auto; right:14px; }

/* Eyebrow + bullets */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:#9fb6ff;
  background:rgba(0,102,255,.12); border:1px solid rgba(0,102,255,.25);
  padding:.35rem .7rem; border-radius:999px;
}
.li-dot{ width:.6rem; height:.6rem; border-radius:999px; margin-top:.45rem;
  background: radial-gradient(circle at 30% 30%, var(--pp-cyan), var(--pp-blue));
  box-shadow:0 0 0 3px rgba(0,153,255,.12);
}


/* little animated sparkline */
.spark path{
  stroke-dasharray: 480;
  stroke-dashoffset: 480;
  animation: draw 2.6s ease forwards;
}
@keyframes draw{ to{ stroke-dashoffset: 0 } }
    @keyframes gradientShift{0%{background-position:0% 50%}100%{background-position:200% 50%}}
    @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

    /* Float + glow for hero stat cards */
    .hero-stats .card{animation:softFloat 6s ease-in-out infinite;box-shadow:0 0 0 rgba(0,0,0,0)}
    .hero-stats .card:nth-child(2){animation-delay:.5s}
    .hero-stats .card:nth-child(3){animation-delay:1s}
    .hero-stats .card:nth-child(4){animation-delay:1.5s}
    @keyframes softFloat{
      0%,100%{transform:translateY(0)}
      50%{transform:translateY(-6px)}
    }

    /* Buttons: lift + ring burst */
    .btn, .btn-gradient, .plan-cta{transition:transform .12s ease, box-shadow .12s ease}
    .btn:hover, .btn-gradient:hover, .plan-cta:hover{transform:translateY(-1px)}
    .burstable{position:relative;overflow:hidden}
    .burstable:after{
      content:"";position:absolute;border-radius:9999px;border:2px solid rgba(255,255,255,.35);
      inset:auto auto 50% 50%;transform:translate(-50%,50%) scale(0);opacity:0;pointer-events:none
    }
    .burst{ /* toggled via JS */
      --x:50%;--y:50%;
    }
    .burst:after{
      left:var(--x);top:var(--y);bottom:auto;right:auto;
      animation:ring 600ms ease-out forwards
    }
    @keyframes ring{
      0%{transform:translate(-50%,-50%) scale(.1);opacity:.6}
      80%{opacity:.15}
      100%{transform:translate(-50%,-50%) scale(8);opacity:0}
    }

    /* Parallax tilt shadow */
    .tilt-shadow{box-shadow:0 24px 60px rgba(0,0,0,.35)}

    /* Mobile spacing */
    @media (max-width:768px){
      .pricing-grid > *{margin-bottom:1.25rem}
      .plan-popular{transform:scale(1.02)}
      .badge-popular{top:-0.9rem;right:50%;transform:translateX(50%);font-size:.7rem;padding:.25rem .75rem}
      #pricing{padding-bottom:5rem}
    }
/* --- LIGHTBOX --- */
#lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
#lightbox.visible { display:flex; }

#lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 1rem;
  box-shadow: 0 0 40px rgba(0,0,0,0.6);
  animation: zoomIn .35s ease;
}
@keyframes zoomIn {
  from { transform: scale(0.9); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* arrows + close icon */
.lb-btn {
  position: absolute;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  user-select: none;
  background: rgba(255,255,255,0.1);
  border-radius: 999px;
  padding: 0.4rem 0.8rem;
  transition: background .25s;
}
.lb-btn:hover { background: rgba(255,255,255,0.25); }

#lb-prev { left: 2%; }
#lb-next { right: 2%; }
#lb-close {
  top: 3%;
  right: 3%;
  font-size: 1.8rem;
  padding: 0.3rem 0.7rem;
  background: rgba(255,255,255,0.15);
}
nav img {
  max-height: 48px;
  width: auto;
}