:root{
  --pl-bg:#0d1230;
  --pl-surface:#11183a;
  --pl-ink:#0f172a;
  --pl-ink-soft:#2c3560;
  --pl-muted:#6c7aac;
  --pl-primary:#5a6bff;
  --pl-primary-dark:#3948f0;
  --pl-accent:#ff9ccf;
  --pl-card:#ffffff;
  --pl-card-tint:rgba(255,255,255,0.08);
  --pl-line:rgba(102,119,255,0.16);
  --pl-shadow:0 24px 60px rgba(12,24,64,0.26);
  --pl-radius:20px;
}

*{box-sizing:border-box}
.pl-container{max-width:1180px;margin:0 auto;padding:0 22px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:999px;border:1px solid transparent;font-weight:700;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease}
.btn.primary{background:linear-gradient(120deg,var(--pl-primary),#7d8dff);color:#fff;box-shadow:0 18px 40px rgba(90,107,255,0.30)}
.btn.primary:hover{transform:translateY(-2px);background:linear-gradient(120deg,var(--pl-primary-dark),var(--pl-primary))}
.btn.ghost{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.28);color:#fff}
.btn.ghost:hover{background:rgba(255,255,255,0.2)}
.btn.white{background:#fff;color:var(--pl-ink);border:1px solid rgba(15,23,42,0.08);box-shadow:0 18px 40px rgba(15,23,42,0.12)}
.btn.white:hover{background:#f6f8ff}
.btn.small{padding:10px 16px;font-size:.9rem}

/* Generic animation helper */
[data-animate]{opacity:0;transform:translateY(24px);transition:opacity .5s ease,transform .5s ease}
[data-animate].is-visible{opacity:1;transform:none}

/* HERO */
.pl-hero{position:relative;padding:140px 0 120px;background:radial-gradient(circle at 15% 20%,rgba(123,140,255,0.35),transparent 52%),radial-gradient(circle at 85% 8%,rgba(255,168,220,0.32),transparent 56%),linear-gradient(180deg,#10173d 0%,#0a112e 100%);color:#fff;overflow:hidden}
.pl-hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.pl-blob{position:absolute;border-radius:50%;filter:blur(0)}
.pl-blob--one{width:420px;height:420px;background:radial-gradient(circle,rgba(117,132,255,0.55),transparent 70%);top:-140px;left:-110px}
.pl-blob--two{width:360px;height:360px;background:radial-gradient(circle,rgba(255,160,226,0.5),transparent 68%);right:-140px;bottom:-40px}
.pl-grid{position:absolute;width:640px;height:640px;right:-220px;top:50%;transform:translateY(-50%);opacity:.28;background-image:linear-gradient(90deg,rgba(255,255,255,0.12) 1px,transparent 1px),linear-gradient(rgba(255,255,255,0.12) 1px,transparent 1px);background-size:46px 46px;border-radius:50%}
.pl-halo{position:absolute;width:520px;height:520px;left:50%;top:65%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(90,107,255,0.22),transparent 70%);opacity:.6}
.pl-hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.pl-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,0.16);color:#fff;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;margin-bottom:14px;border:1px solid rgba(255,255,255,0.24)}
.pl-hero__text h1{margin:0 0 16px;font-size:clamp(36px,4.2vw,56px);letter-spacing:-.02em}
.pl-hero__text p{margin:0 0 20px;font-size:1.05rem;color:rgba(226,232,255,0.9)}
.pl-hero__points{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:12px;color:#d9e1ff;font-weight:600}
.pl-hero__points li{display:flex;align-items:flex-start;gap:10px}
.pl-hero__points li::before{content:"★";font-size:.85rem;color:var(--pl-accent);line-height:1.6}
.pl-cta{display:flex;gap:14px;flex-wrap:wrap}
.pl-hero__meta{margin-top:24px;display:flex;flex-wrap:wrap;gap:16px;color:#d6ddff;font-weight:600}
.pl-hero__meta span strong{display:block;font-size:1.12rem;color:#fff}

.pl-hero__media{position:relative;display:grid;place-items:center}
.pl-hero__device{position:relative;border-radius:26px;overflow:hidden;background:rgba(17,24,58,0.78);border:1px solid rgba(129,146,255,0.32);box-shadow:0 40px 90px rgba(12,18,60,0.48)}
.pl-hero__device img{display:block;width:100%;height:auto}
.pl-floating{position:absolute;right:-28px;top:24px;background:rgba(15,22,48,0.92);border:1px solid rgba(136,154,255,0.28);padding:16px 18px;border-radius:16px;box-shadow:0 24px 48px rgba(6,14,40,0.38);max-width:220px;font-size:.9rem;color:#dee6ff}
.pl-floating strong{display:block;font-size:.95rem;color:#fff;margin-bottom:4px}
.pl-floating--secondary{left:-20px;bottom:-30px;top:auto;right:auto;background:rgba(255,255,255,0.92);color:var(--pl-ink);border-color:rgba(15,23,42,0.08);box-shadow:0 20px 46px rgba(12,24,64,0.25)}
.pl-floating--secondary strong{color:var(--pl-primary-dark)}

.pl-scallop{position:absolute;inset:auto 0 0 0;height:52px;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23f7f8ff' d='M0 80h1440V0c-120 24-240 36-360 36S720 0 540 0 240 36 120 36 0 0 0 0z'/%3E%3C/svg%3E") no-repeat center/cover}

/* Spotlight */
.pl-spotlight{padding:70px 0;background:#f7f8ff}
.pl-spotlight__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:26px}
.pl-spotlight__card{background:#fff;border-radius:24px;padding:32px;border:1px solid rgba(17,24,58,0.08);box-shadow:0 24px 60px rgba(15,23,72,0.10);display:flex;flex-direction:column;gap:18px}
.pl-spotlight__card h3{margin:0;font-size:1.8rem;color:var(--pl-ink)}
.pl-spotlight__card p{margin:0;color:var(--pl-muted);font-size:1.02rem}
.pl-keypoints{list-style:none;margin:0;padding:0;display:grid;gap:12px;color:var(--pl-ink)}
.pl-keypoints li{display:flex;gap:10px;font-weight:600;color:var(--pl-ink-soft)}
.pl-keypoints li::before{content:"✔";color:var(--pl-primary);font-size:.9rem}
.pl-spotlight__card--accent{background:linear-gradient(160deg,#161f46 0%,#1b2a63 55%,#263977 100%);color:#fff;border:1px solid rgba(120,138,255,0.24)}
.pl-spotlight__card--accent header h4{margin:0;font-size:1.2rem}
.pl-spotlight__card--accent header p{margin:6px 0 20px;color:rgba(222,230,255,0.78)}
.pl-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:0;padding:0}
.pl-metrics div{background:rgba(255,255,255,0.08);border-radius:16px;padding:18px;text-align:left;border:1px solid rgba(255,255,255,0.16)}
.pl-metrics dt{margin:0;color:#fff;font-size:1.6rem;font-weight:800}
.pl-metrics dd{margin:6px 0 0;color:rgba(226,232,255,0.78);font-size:.95rem}
.pl-spotlight__card--accent .btn{align-self:flex-start;margin-top:10px}

/* Overview */
.pl-overview{padding:80px 0;background:linear-gradient(180deg,#f7f8ff 0%,#eef1ff 100%)}
.pl-overview__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.pl-overview__card{position:relative;background:#fff;border-radius:24px;padding:28px;border:1px solid rgba(17,24,58,0.08);box-shadow:0 24px 60px rgba(15,23,72,0.08);overflow:hidden}
.pl-overview__card::after{content:"";position:absolute;inset:auto -20% -60px;pointer-events:none;height:140px;background:radial-gradient(circle,rgba(90,107,255,0.28),transparent 70%)}
.pl-overview__card .badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:rgba(96,108,255,0.12);color:var(--pl-primary);font-weight:700;margin-bottom:16px;font-size:.85rem}
.pl-overview__card h3{margin:0 0 12px;color:var(--pl-ink)}
.pl-overview__card p{margin:0;color:var(--pl-muted)}

/* Section Head */
.pl-sec-head{text-align:center;margin:0 0 36px}
.pl-sec-head h2{margin:0 0 10px;font-size:2.2rem;color:var(--pl-ink)}
.pl-sec-head p{margin:0;color:var(--pl-muted);font-size:1.05rem}

/* Plans browser */
.pl-plans{padding:90px 0;background:#f7f8ff}
.pl-browser{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:32px;align-items:start}
.pl-list{display:flex;flex-direction:column;gap:12px}
.pl-item{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;background:#fff;border-radius:18px;padding:16px;border:1px solid rgba(17,24,58,0.06);text-align:left;color:var(--pl-ink);cursor:pointer;box-shadow:0 14px 36px rgba(15,23,72,0.08);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.pl-item .num{font-weight:800;color:var(--pl-primary);font-size:1.05rem}
.pl-item .title{font-weight:700}
.pl-item .desc{font-size:.9rem;color:var(--pl-muted)}
.pl-item .chev{font-size:1.2rem;color:var(--pl-primary);opacity:.4}
.pl-item:hover{transform:translateY(-3px);box-shadow:0 24px 50px rgba(15,23,72,0.16)}
.pl-item.active{border-color:rgba(90,107,255,0.45);box-shadow:0 26px 60px rgba(90,107,255,0.18)}

.pl-detail{position:relative;padding:20px}
.pl-detail__aura{position:absolute;inset:0;border-radius:28px;background:linear-gradient(160deg,rgba(90,107,255,0.18),rgba(255,174,214,0.14));filter:blur(0);opacity:.7;z-index:0}
.pl-detail__cards{position:relative;z-index:1}
.pl-detail__card{display:none;background:linear-gradient(160deg,#16204a 0%,#1e2e6b 100%);color:#e6edff;border-radius:26px;padding:28px;border:1px solid rgba(122,138,255,0.28);box-shadow:0 32px 70px rgba(12,18,60,0.32)}
.pl-detail__card.show{display:block;animation:fadeUp .28s ease}
.pl-detail__head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.pl-detail__tag{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,0.16);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.pl-detail__card h3{margin:0;font-size:1.8rem;color:#fff}
.pl-detail__card p{margin:0 0 16px;color:rgba(222,229,255,0.9)}
.ticks{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ticks li{position:relative;padding-left:20px;font-weight:600;color:#d9e3ff}
.ticks li::before{content:"";position:absolute;left:0;top:8px;width:10px;height:10px;border-radius:50%;background:linear-gradient(120deg,var(--pl-primary),#91a0ff);box-shadow:0 0 0 4px rgba(255,255,255,0.1)}
/* .mock{background:rgba(7,12,32,0.72);border:1px solid rgba(138,152,255,0.24);border-radius:20px;padding:18px;margin-bottom:18px} */
.mock img{display:block;width:100%;border-radius:14px}
.actions{display:flex;gap:12px;flex-wrap:wrap}

@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* Banner */
.pl-banner{padding:80px 0;background:linear-gradient(120deg,#1a2452,#2e3b7c)}
.pl-banner__wrap{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.2);border-radius:26px;padding:34px;box-shadow:0 28px 64px rgba(10,18,52,0.36);text-align:center;color:#f5f7ff;display:grid;gap:18px;justify-items:center}
.pl-banner__wrap h3{margin:0;font-size:1.8rem}
.pl-banner__wrap p{margin:0;color:rgba(230,234,255,0.85);max-width:680px}

/* CTA */
.pl-cta{padding:100px 0;}
.pl-cta__wrap{max-width:980px;margin:0 auto;background:linear-gradient(135deg,#5a6bff,#7b67ff);color:#fff;border-radius:28px;padding:38px;border:1px solid rgba(255,255,255,0.18);box-shadow:0 32px 70px rgba(90,107,255,0.22);text-align:center;display:grid;gap:14px}
.pl-cta__wrap h3{margin:0;font-size:2rem}
.pl-cta__wrap .grad{color:#ffe7ff}
.pl-cta__wrap p{margin:0;color:rgba(232,236,255,0.86)}
.pl-cta__actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.pl-cta .btn.white{background:#fff;color:var(--pl-primary);border-color:rgba(255,255,255,0.8)}

/* Responsive */
@media (max-width:1180px){
  .pl-browser{grid-template-columns:1fr}
  .pl-detail{margin-top:24px}
}
@media (max-width:1024px){
  .pl-hero__grid{grid-template-columns:1fr;gap:48px}
  .pl-floating{position:static;margin-top:18px}
  .pl-floating--secondary{position:static;margin-top:12px}
  .pl-spotlight__grid{grid-template-columns:1fr}
  .pl-metrics{grid-template-columns:1fr 1fr}
  .pl-overview__grid{grid-template-columns:1fr 1fr}
  .ticks{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .pl-overview__grid{grid-template-columns:1fr}
  .pl-metrics{grid-template-columns:1fr}
  .ticks{grid-template-columns:1fr}
  .pl-banner__wrap h3{font-size:1.6rem}
}
@media (max-width:560px){
  .pl-hero{padding:120px 0 100px}
  .pl-hero__text h1{font-size:32px}
  .pl-cta__wrap h3{font-size:1.7rem}
}