/* =============================================
   SPF Design System v3 — Production Ready
   WooCommerce + JWT + Stripe Checkout
============================================= */
:root{
  --bg:#0a0a0f;--bg2:#0f0f1a;--bg3:#13131f;--bg4:#1a1a2e;
  --border:#1e1e35;--border2:#2a2a45;
  --purple:#a78bfa;--purple2:#7c3aed;
  --teal:#06b6d4;--green:#10b981;
  --red:#ef4444;--orange:#f59e0b;
  --text:#e2e8f0;--text2:#94a3b8;--text3:#64748b;--text4:#475569;
  --grad:linear-gradient(135deg,#7c3aed 0%,#06b6d4 100%);
  --grad2:linear-gradient(135deg,#a78bfa 0%,#06b6d4 100%);
  --grad-soft:linear-gradient(135deg,rgba(124,58,237,.1) 0%,rgba(6,182,212,.06) 100%);
  --shadow:0 4px 24px rgba(124,58,237,.18);
  --shadow-lg:0 8px 48px rgba(124,58,237,.26);
  --r:12px;--r2:8px;--r3:6px;
  --tr:all .22s cubic-bezier(.4,0,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--bg2)}::-webkit-scrollbar-thumb{background:var(--purple2);border-radius:99px}
a{color:var(--purple);text-decoration:none;transition:var(--tr)}

/* VIEWS */
.spf-view{display:none}.spf-view.on{display:block}

/* ANIMATIONS */
@keyframes spf-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes spf-spin{to{transform:rotate(360deg)}}
@keyframes spf-ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.2);opacity:0}}
@keyframes spf-glow{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.8;transform:scale(1.06)}}
.anim{animation:spf-up .38s ease both}
.d1{animation-delay:.06s}.d2{animation-delay:.12s}.d3{animation-delay:.18s}
.d4{animation-delay:.22s}.d5{animation-delay:.28s}.d6{animation-delay:.34s}

/* GLOWS */
.glow-scene{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.glow{position:absolute;border-radius:50%;filter:blur(80px);animation:spf-glow 8s ease-in-out infinite}
.glow1{width:600px;height:600px;top:-200px;left:-200px;background:radial-gradient(circle,rgba(124,58,237,.12) 0%,transparent 70%)}
.glow2{width:500px;height:500px;bottom:-160px;right:-160px;background:radial-gradient(circle,rgba(6,182,212,.09) 0%,transparent 70%);animation-delay:4s}
.glow3{width:280px;height:280px;top:45%;right:22%;background:radial-gradient(circle,rgba(167,139,250,.05) 0%,transparent 70%);animation-delay:2s}

/* TOPNAV */
.topnav{position:fixed;top:0;left:0;right:0;height:58px;background:rgba(10,10,15,.88);backdrop-filter:blur(18px);border-bottom:1px solid var(--border);z-index:100;display:flex;align-items:center;padding:0 28px;gap:14px}
.logo-wrap{display:flex;align-items:center;gap:9px}
.logo-mark{width:32px;height:32px;border-radius:8px;background:var(--grad);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;color:#fff;flex-shrink:0}
.logo-name{font-size:15px;font-weight:800;letter-spacing:-.3px}
.logo-name .g{background:var(--grad2);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.logo-sub{font-size:9px;color:var(--text3);font-weight:500;display:block;margin-top:-2px}
.nav-sep{flex:1}
.step-row{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--text3)}
.step-dot{width:20px;height:20px;border-radius:50%;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--border2);flex-shrink:0}
.step-dot.done{background:var(--green);border-color:var(--green);color:#fff}
.step-dot.active{background:var(--grad);border:none;color:#fff}
.step-line{width:20px;height:1.5px;background:var(--border2)}
.step-line.done{background:var(--green)}
.nav-links{display:flex;align-items:center;gap:5px}
.nav-link{font-size:12px;color:var(--text2);font-weight:500;padding:6px 11px;border-radius:var(--r3);transition:var(--tr);cursor:pointer;border:none;background:transparent;font-family:'Inter',sans-serif}
.nav-link:hover{color:var(--text);background:rgba(255,255,255,.05)}
.nav-cta{padding:7px 15px;border-radius:var(--r3);background:var(--grad);color:#fff;font-size:12px;font-weight:700;cursor:pointer;border:none;transition:var(--tr);font-family:'Inter',sans-serif}
.nav-cta:hover{transform:translateY(-1px);box-shadow:var(--shadow)}

/* FORMS */
.fg{margin-bottom:15px}
.fg label{display:block;font-size:11px;font-weight:600;color:var(--text2);margin-bottom:6px;letter-spacing:.2px;text-transform:uppercase}
.inp{width:100%;background:var(--bg3);border:1.5px solid var(--border2);border-radius:var(--r2);padding:12px 14px;color:var(--text);font-size:13px;font-family:'Inter',sans-serif;transition:var(--tr);outline:none}
.inp:focus{border-color:var(--purple);background:var(--bg4);box-shadow:0 0 0 3px rgba(167,139,250,.1)}
.inp::placeholder{color:var(--text4)}
.inp.err{border-color:var(--red)}
.inp-wrap{position:relative}.inp-wrap .inp{padding-right:40px}
.inp-icon{position:absolute;right:13px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:12px;cursor:pointer;transition:var(--tr)}
.inp-icon:hover{color:var(--purple)}
.err-msg{font-size:11px;color:var(--red);margin-top:4px;display:none;align-items:center;gap:4px}
.err-msg.show{display:flex}
select.inp{cursor:pointer}
select.inp option{background:var(--bg3)}

/* BUTTONS */
.btn-pri{width:100%;padding:13px 18px;border:none;border-radius:var(--r);background:var(--grad);color:#fff;font-size:14px;font-weight:700;cursor:pointer;transition:var(--tr);display:flex;align-items:center;justify-content:center;gap:8px;font-family:'Inter',sans-serif}
.btn-pri:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}
.btn-pri:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-pri.loading .btn-txt{display:none}
.btn-pri.loading::after{content:'';width:15px;height:15px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spf-spin .8s linear infinite}
.btn-ghost{width:100%;padding:11px 18px;border:1.5px solid var(--border2);border-radius:var(--r);background:transparent;color:var(--text2);font-size:13px;font-weight:600;cursor:pointer;transition:var(--tr);display:flex;align-items:center;justify-content:center;gap:8px;font-family:'Inter',sans-serif}
.btn-ghost:hover{border-color:var(--purple);color:var(--text);background:rgba(124,58,237,.05)}
.divider{display:flex;align-items:center;gap:10px;margin:18px 0;color:var(--text3);font-size:11px;font-weight:600}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border)}

/* SOCIAL BTNS */
.social-row{display:flex;gap:9px;margin-bottom:16px}
.social-btn{flex:1;padding:10px;border:1.5px solid var(--border2);border-radius:var(--r2);background:var(--bg3);color:var(--text2);font-size:12px;font-weight:600;cursor:pointer;transition:var(--tr);display:flex;align-items:center;justify-content:center;gap:7px;font-family:'Inter',sans-serif}
.social-btn:hover{border-color:var(--purple);color:var(--text)}

/* BADGES / CHIPS */
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:99px;font-size:10px;font-weight:700;letter-spacing:.3px}
.badge.purple{background:rgba(124,58,237,.13);border:1px solid rgba(167,139,250,.22);color:var(--purple)}
.badge.green{background:rgba(16,185,129,.11);border:1px solid rgba(16,185,129,.2);color:var(--green)}
.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:99px;font-size:10px;font-weight:600}
.chip.green{background:rgba(16,185,129,.12);color:var(--green)}
.chip.red{background:rgba(239,68,68,.1);color:#f87171}
.chip.grey{background:rgba(100,116,139,.12);color:var(--text3)}
.infobox{background:rgba(124,58,237,.07);border:1px solid rgba(124,58,237,.16);border-radius:var(--r2);padding:11px 14px;font-size:11px;color:var(--purple);display:flex;align-items:flex-start;gap:8px;line-height:1.5}
.infobox.ok{background:rgba(16,185,129,.07);border-color:rgba(16,185,129,.16);color:var(--green)}
.infobox.warn{background:rgba(245,158,11,.07);border-color:rgba(245,158,11,.16);color:var(--orange)}
.infobox i{margin-top:1px;flex-shrink:0}

/* PW STRENGTH */
.pw-bars{display:flex;gap:3px;margin-top:6px;margin-bottom:3px}
.pw-bar{height:3px;flex:1;border-radius:99px;background:var(--border2);transition:var(--tr)}
.pw-bar.weak{background:var(--red)}.pw-bar.fair{background:var(--orange)}.pw-bar.strong{background:var(--green)}
.pw-lbl{font-size:10px;color:var(--text3)}

/* AGREE */
.agree{display:flex;align-items:flex-start;gap:9px;margin-bottom:16px;cursor:pointer}
.agree input[type=checkbox]{width:14px;height:14px;accent-color:var(--purple2);flex-shrink:0;margin-top:2px;cursor:pointer}
.agree-txt{font-size:11px;color:var(--text3);line-height:1.6}
.agree-txt a{color:var(--purple)}
.nocard{text-align:center;font-size:11px;color:var(--text3);margin-top:12px;display:flex;align-items:center;justify-content:center;gap:5px}

/* =============================================
   PAGE: AUTH
============================================= */
#pg-auth{padding-top:58px;min-height:100vh;display:flex;align-items:center;justify-content:center;padding-bottom:40px}
.auth-layout{display:grid;grid-template-columns:1fr 460px;gap:56px;max-width:980px;width:100%;margin:0 auto;padding:0 24px;align-items:center}
@media(max-width:840px){.auth-layout{grid-template-columns:1fr;max-width:440px}}
.auth-left .live-tag{display:inline-flex;align-items:center;gap:7px;background:rgba(124,58,237,.11);border:1px solid rgba(167,139,250,.2);border-radius:99px;padding:5px 13px;font-size:10px;font-weight:700;color:var(--purple);letter-spacing:.5px;margin-bottom:22px}
.live-tag .ld{width:6px;height:6px;border-radius:50%;background:var(--green);position:relative;flex-shrink:0}
.live-tag .ld::after{content:'';position:absolute;inset:-3px;border-radius:50%;background:var(--green);opacity:.35;animation:spf-ping 1.5s ease infinite}
.auth-left h1{font-size:40px;font-weight:900;line-height:1.12;margin-bottom:14px;letter-spacing:-.5px}
.auth-left h1 .g{background:var(--grad2);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.auth-left p{font-size:14px;color:var(--text2);line-height:1.7;margin-bottom:26px}
.auth-stats{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:26px}
.auth-stat-val{font-size:20px;font-weight:900;background:var(--grad2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1}
.auth-stat-lbl{font-size:10px;color:var(--text3);margin-top:2px;font-weight:500}
.proof-bar{display:flex;align-items:center;gap:10px;padding:12px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);max-width:320px}
.proof-avs{display:flex;margin-right:4px}
.proof-av{width:26px;height:26px;border-radius:50%;border:2px solid var(--bg2);margin-right:-7px;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center}
.proof-av:nth-child(1){background:var(--grad)}
.proof-av:nth-child(2){background:linear-gradient(135deg,#06b6d4,#10b981)}
.proof-av:nth-child(3){background:linear-gradient(135deg,#f59e0b,#ef4444)}
.proof-txt{font-size:10px;color:var(--text2);line-height:1.5}
.proof-txt strong{color:var(--text)}
@media(max-width:840px){.auth-left{display:none}}
.auth-card{background:var(--bg2);border:1.5px solid var(--border2);border-radius:20px;padding:36px 32px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden;z-index:1}
.auth-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad)}
.auth-tabs{display:flex;background:var(--bg3);border:1px solid var(--border);border-radius:9px;padding:3px;gap:3px;margin-bottom:24px}
.auth-tab{flex:1;padding:9px;border:none;border-radius:7px;background:transparent;color:var(--text3);font-size:12px;font-weight:600;cursor:pointer;transition:var(--tr);font-family:'Inter',sans-serif}
.auth-tab.on{background:var(--grad);color:#fff}
.auth-form-title{font-size:19px;font-weight:800;margin-bottom:4px;letter-spacing:-.3px}
.auth-form-sub{font-size:12px;color:var(--text2);margin-bottom:20px}
.auth-form-sub strong{color:var(--purple)}

/* =============================================
   PAGE: PLANS
============================================= */
#pg-plans{padding-top:58px}
.plans-inner{max-width:1120px;margin:0 auto;padding:52px 22px}
.plans-head{text-align:center;margin-bottom:48px}
.eyebrow{display:inline-block;background:rgba(124,58,237,.11);border:1px solid rgba(167,139,250,.2);color:var(--purple);font-size:10px;font-weight:700;padding:4px 13px;border-radius:99px;margin-bottom:16px;letter-spacing:.6px}
.plans-h{font-size:42px;font-weight:900;line-height:1.12;margin-bottom:13px;letter-spacing:-.5px}
.plans-h .g{background:var(--grad2);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.plans-sub{font-size:15px;color:var(--text2);max-width:520px;margin:0 auto;line-height:1.65}
.plans-sub strong{color:var(--purple)}
.billing-row{display:flex;align-items:center;justify-content:center;gap:11px;margin-bottom:44px}
.billing-row span{font-size:12px;font-weight:600;color:var(--text3);transition:var(--tr)}
.billing-row span.on{color:var(--text)}
.tog{width:42px;height:22px;background:var(--bg4);border:1.5px solid var(--border2);border-radius:99px;cursor:pointer;position:relative;transition:var(--tr)}
.tog.on{background:var(--purple2);border-color:var(--purple2)}
.tog-knob{width:16px;height:16px;background:#fff;border-radius:50%;position:absolute;top:2px;left:2px;transition:var(--tr);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.tog.on .tog-knob{left:21px}
.save-pill{background:rgba(16,185,129,.13);border:1px solid rgba(16,185,129,.22);color:var(--green);font-size:10px;font-weight:800;padding:3px 9px;border-radius:99px}
.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:40px}
@media(max-width:920px){.plans-grid{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}}

/* PLAN CARD */
.pc{background:var(--bg2);border:1.5px solid var(--border);border-radius:18px;padding:30px 24px;position:relative;transition:var(--tr);overflow:hidden}
.pc::after{content:'';position:absolute;top:0;left:0;right:0;height:2px}
.pc.free::after{background:linear-gradient(90deg,var(--text3),var(--border2))}
.pc.growth::after{background:var(--grad)}
.pc.pro::after{background:linear-gradient(90deg,#ef4444,#f59e0b)}
.pc:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.pc.feat{border-color:var(--purple2);background:linear-gradient(155deg,rgba(124,58,237,.07),var(--bg2));box-shadow:0 0 36px rgba(124,58,237,.16)}
.pc.feat:hover{box-shadow:0 0 56px rgba(124,58,237,.26)}
.ribbon{position:absolute;top:-1px;left:50%;transform:translateX(-50%);background:var(--grad);color:#fff;font-size:9px;font-weight:800;padding:4px 16px;border-radius:0 0 11px 11px;white-space:nowrap;letter-spacing:.5px}
.pc-icon-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.pc-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px}
.pc-icon.free{background:var(--bg4)}.pc-icon.growth{background:var(--grad-soft)}.pc-icon.pro{background:rgba(239,68,68,.1)}
.pc-name{font-size:11px;font-weight:700;letter-spacing:.8px;color:var(--text3);text-transform:uppercase;margin-bottom:7px}
.pc-price-row{display:flex;align-items:baseline;gap:3px;margin-bottom:5px}
.pc-price{font-size:44px;font-weight:900;line-height:1;letter-spacing:-2px}
.pc-period{font-size:13px;font-weight:500;color:var(--text3)}
.pc-tag{font-size:11px;color:var(--text2);line-height:1.55;margin:9px 0 18px;min-height:36px}
.pc-div{height:1px;background:var(--border);margin:16px 0}
.pc-sec{font-size:9px;font-weight:700;letter-spacing:.7px;color:var(--text3);text-transform:uppercase;margin:13px 0 8px}
.pc ul{list-style:none;margin-bottom:22px}
.pc ul li{display:flex;align-items:flex-start;gap:8px;font-size:11px;color:var(--text2);margin-bottom:9px;line-height:1.5}
.pc ul li i{font-size:10px;margin-top:2px;flex-shrink:0}
.pc ul li i.fa-check{color:var(--green)}.pc ul li i.fa-times{color:var(--text3)}
.pc ul li.lock{opacity:.35}
.hl{background:rgba(124,58,237,.1);border-radius:4px;padding:1px 5px;color:var(--purple);font-weight:700}
.pc-btn{width:100%;padding:12px 18px;border:none;border-radius:var(--r);font-size:12px;font-weight:700;cursor:pointer;transition:var(--tr);font-family:'Inter',sans-serif}
.pc-btn.free-b{background:var(--bg4);border:1.5px solid var(--border2);color:var(--text)}
.pc-btn.free-b:hover{border-color:var(--purple);color:var(--purple)}
.pc-btn.growth-b{background:var(--grad);color:#fff;box-shadow:var(--shadow)}
.pc-btn.growth-b:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}
.pc-btn.pro-b{background:linear-gradient(135deg,#ef4444,#f59e0b);color:#fff}
.pc-btn.pro-b:hover{transform:translateY(-1px);box-shadow:0 7px 26px rgba(239,68,68,.28)}
.pc-micro{font-size:10px;color:var(--text3);text-align:center;margin-top:9px;display:flex;align-items:center;justify-content:center;gap:4px}
.plans-footer{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;padding:24px 0;border-top:1px solid var(--border)}
.plans-footer-item{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text2)}
.plans-footer-item i{color:var(--green);font-size:13px}
.plans-note{text-align:center;margin-top:14px;font-size:12px;color:var(--text3)}
.plans-note span{color:var(--purple);font-weight:600}
/* FAQ */
.faq-wrap{max-width:680px;margin:0 auto;padding:0 22px 56px}
.faq-h{font-size:24px;font-weight:800;text-align:center;margin-bottom:24px}
.faq-item{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);margin-bottom:7px;overflow:hidden}
.faq-q{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;cursor:pointer;font-size:12px;font-weight:600;transition:var(--tr)}
.faq-q:hover{color:var(--purple)}.faq-q i{color:var(--text3);font-size:11px;transition:var(--tr);flex-shrink:0}
.faq-q.open i{transform:rotate(180deg);color:var(--purple)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a.open{max-height:180px}
.faq-a-inner{padding:0 18px 14px;font-size:12px;color:var(--text2);line-height:1.7}

/* =============================================
   PAGE: CHECKOUT
============================================= */
#pg-checkout{padding-top:58px}
.co-inner{max-width:860px;margin:0 auto;padding:44px 22px 60px}
.co-head{text-align:center;margin-bottom:32px}
.co-head h2{font-size:24px;font-weight:900;margin-bottom:6px;letter-spacing:-.3px}
.co-head p{font-size:12px;color:var(--text2)}
.co-grid{display:grid;grid-template-columns:1fr 340px;gap:22px}
@media(max-width:740px){.co-grid{grid-template-columns:1fr}}
.co-card{background:var(--bg2);border:1.5px solid var(--border2);border-radius:16px;padding:26px}
.co-sec{font-size:9px;font-weight:700;letter-spacing:.7px;color:var(--text3);text-transform:uppercase;margin-bottom:12px;margin-top:22px;display:flex;align-items:center;gap:7px}
.co-sec:first-child{margin-top:0}
.co-sec::after{content:'';flex:1;height:1px;background:var(--border)}
.stripe-note{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--text3);background:var(--bg3);border:1px solid var(--border);border-radius:var(--r2);padding:9px 12px;margin-bottom:14px}
.stripe-note i{color:var(--green);font-size:12px}
.card-icons{display:flex;gap:6px;margin-bottom:14px}
.card-icon{width:40px;height:25px;background:var(--bg3);border:1px solid var(--border);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:12px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.coupon-row{display:flex;gap:7px}
.coupon-row .inp{flex:1}
.apply-btn{padding:12px 16px;border:1.5px solid var(--border2);border-radius:var(--r2);background:var(--bg3);color:var(--text2);font-size:11px;font-weight:700;cursor:pointer;transition:var(--tr);white-space:nowrap;font-family:'Inter',sans-serif}
.apply-btn:hover{border-color:var(--purple);color:var(--purple)}
/* Order Summary */
.order-plan{background:var(--grad-soft);border:1px solid rgba(124,58,237,.18);border-radius:var(--r);padding:16px;margin-bottom:18px;display:flex;align-items:center;gap:12px}
.order-plan-icon{width:40px;height:40px;border-radius:9px;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.order-plan-name{font-size:15px;font-weight:800;margin-bottom:2px}
.order-plan-label{font-size:11px;color:var(--text2)}
.ord-line{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--border)}
.ord-line:last-child{border-bottom:none}
.ord-line .l{font-size:11px;color:var(--text2)}.ord-line .v{font-size:11px;font-weight:700}
.ord-total{display:flex;justify-content:space-between;align-items:center;padding:14px 0 2px;border-top:1.5px solid var(--border2);margin-top:7px}
.ord-total .l{font-size:13px;font-weight:700}
.ord-total .v{font-size:22px;font-weight:900;background:var(--grad2);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.trust-list{list-style:none;margin-top:16px}
.trust-list li{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text2);padding:6px 0;border-bottom:1px solid var(--border)}
.trust-list li:last-child{border-bottom:none}
.trust-list li i{color:var(--green);width:13px;font-size:11px;flex-shrink:0}
.co-btn{width:100%;padding:14px 18px;border:none;border-radius:var(--r);background:var(--grad);color:#fff;font-size:14px;font-weight:800;cursor:pointer;transition:var(--tr);display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;font-family:'Inter',sans-serif}
.co-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}
.co-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.co-secure{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;font-size:10px;color:var(--text3)}
.co-secure i{color:var(--green)}
.co-back{display:block;text-align:center;margin-top:10px;font-size:11px;color:var(--text3);cursor:pointer;transition:var(--tr)}
.co-back:hover{color:var(--purple)}
/* WooCommerce redirect state */
.woo-redirect{display:none;text-align:center;padding:36px 20px}
.woo-redirect.show{display:block}
.woo-icon{width:64px;height:64px;border-radius:50%;background:rgba(124,58,237,.13);border:2px solid var(--purple);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:26px}
.woo-redirect h3{font-size:20px;font-weight:900;margin-bottom:7px}
.woo-redirect p{font-size:13px;color:var(--text2);margin-bottom:20px;line-height:1.6}
.woo-spinner{width:32px;height:32px;border:3px solid rgba(124,58,237,.2);border-top-color:var(--purple);border-radius:50%;animation:spf-spin .8s linear infinite;margin:0 auto 14px}

/* =============================================
   SPF Global Design System — shared across all pages
   Paste full CSS here (from the HTML file above)
   or enqueue a spf-style.css file via functions.php
============================================= */

@keyframes spf-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes spf-spin{to{transform:rotate(360deg)}}
@keyframes spf-ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.2);opacity:0}}
@keyframes spf-glow{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.8;transform:scale(1.06)}}
.anim{animation:spf-up .38s ease both}
.d1{animation-delay:.06s}.d2{animation-delay:.12s}.d3{animation-delay:.18s}

.glow-scene{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.glow{position:absolute;border-radius:50%;filter:blur(80px);animation:spf-glow 8s ease-in-out infinite}
.glow1{width:600px;height:600px;top:-200px;left:-200px;background:radial-gradient(circle,rgba(124,58,237,.12) 0%,transparent 70%)}
.glow2{width:500px;height:500px;bottom:-160px;right:-160px;background:radial-gradient(circle,rgba(6,182,212,.09) 0%,transparent 70%);animation-delay:4s}
.glow3{width:280px;height:280px;top:45%;right:22%;background:radial-gradient(circle,rgba(167,139,250,.05) 0%,transparent 70%);animation-delay:2s}