@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(fonts/jakarta.woff2) format('woff2');
}
@font-face {
  font-family: 'Black Ops One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/font-0.ttf) format('truetype');
}
@font-face {
  font-family: 'League Spartan';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/font-1.ttf) format('truetype');
}
@font-face {
  font-family: 'League Spartan';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/font-2.ttf) format('truetype');
}
@font-face {
  font-family: 'League Spartan';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/font-3.ttf) format('truetype');
}
@font-face {
  font-family: 'League Spartan';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/font-4.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/font-5.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/font-6.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/font-7.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/font-8.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/font-9.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/font-10.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/font-11.ttf) format('truetype');
}


    

    :root{
      --bg:#080808;
      --bg2:#0f0f0f;
      --card:#161616;
      --card2:#1c1c1c;
      --text:#f5f7fa;
      --muted:#e7e7e7;
      --green:#f4f4f5;
      --green2:#a1a1aa;
      --line:rgba(255,255,255,.08);
      --glow:rgba(255,255,255,.28);
      --danger:#ff6b6b;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
      background:
        radial-gradient(circle at 20% 10%, rgba(255,255,255,.08), transparent 32%),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,.05), transparent 28%),
        linear-gradient(180deg,var(--bg),#050505 75%);
      color:var(--text);
      min-height:100vh;
      font-weight:500;
    }

    a{text-decoration:none;color:inherit}
    .wrap{width:min(1120px,92%);margin:0 auto}

    .topbar{
      position:sticky;top:0;z-index:20;
      backdrop-filter:blur(16px);
      background:rgba(8,8,8,.72);
      border-bottom:1px solid var(--line);
    }
    .nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0}

    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      color:var(--text);
    }
    .brand-mark{
      width:50px;
      height:50px;
      display:grid;
      place-items:center;
      border-radius:15px;
      font-family:'Black Ops One',sans-serif;
      font-size:2rem;
      line-height:1;
      color:#0e0e0e;
      background:linear-gradient(145deg,#eaeaea 0%,#adadad 42%,#6f6f6f 100%);
      border:1px solid rgba(255,255,255,.22);
      box-shadow:
        0 0 0 1px rgba(255,255,255,.14),
        0 12px 34px rgba(255,255,255,.28),
        inset 0 1px 0 rgba(255,255,255,.55);
      transform:skew(-5deg);
    }
    .brand-name{
      font-family:'Plus Jakarta Sans',sans-serif;
      font-size:1.25rem;
      font-weight:800;
      letter-spacing:.08em;
      white-space:nowrap;
    }
    .nav-cta{
      padding:11px 18px;border:1px solid rgba(255,255,255,.45);
      border-radius:999px;color:var(--green);font-weight:700;
      transition:.25s;
    }
    .nav-cta:hover{background:rgba(255,255,255,.1);transform:translateY(-1px)}

    .hero{padding:92px 0 58px;text-align:center}
    .eyebrow{
      display:inline-flex;align-items:center;gap:8px;
      border:1px solid rgba(255,255,255,.3);
      background:rgba(255,255,255,.07);
      color:#cecece;
      padding:9px 13px;border-radius:999px;
      font-size:.86rem;font-weight:700;
    }
    h1{
      font-family:'Plus Jakarta Sans',sans-serif;
      font-size:clamp(2.8rem,7vw,5.9rem);
      line-height:.94;margin:24px auto 22px;
      max-width:940px;letter-spacing:-.055em;
      text-wrap:balance;
      text-shadow:0 8px 35px rgba(0,0,0,.5);
    }
    h1 .accent{
      color:var(--green);
      text-shadow:0 0 32px rgba(255,255,255,.22);
    }
    .hero p{
      max-width:720px;margin:0 auto;
      color:var(--muted);font-size:1.08rem;line-height:1.7;
    }
    .hero-actions{
      margin-top:30px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap
    }
    .btn{
      border:0;cursor:pointer;
      padding:15px 24px;border-radius:14px;
      font-weight:800;font-size:1rem;
      transition:.25s ease;
      display:inline-flex;align-items:center;justify-content:center;
    }
    .btn-primary{
      color:#0e0e0e;
      background:linear-gradient(135deg,#c7c7c7 0%,#9e9e9e 48%,#7a7a7a 100%);
      box-shadow:0 12px 34px var(--glow), inset 0 1px 0 rgba(255,255,255,.45);
      letter-spacing:.01em;
      position:relative;
      overflow:hidden;
    }
    .btn-primary::after{
      content:"";
      position:absolute;
      inset:-50% auto -50% -35%;
      width:28%;
      transform:rotate(18deg);
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.48),transparent);
      animation:shine 3.6s ease-in-out infinite;
    }
    @keyframes shine{
      0%,72%{left:-40%}
      100%{left:130%}
    }
    .btn-primary:hover{transform:translateY(-2px) scale(1.01);box-shadow:0 16px 42px rgba(255,255,255,.38)}
    .btn-secondary{
      color:var(--text);
      background:rgba(255,255,255,.04);
      border:1px solid var(--line);
    }
    .btn-secondary:hover{background:rgba(255,255,255,.07)}

    .section{padding:54px 0}
    .section-head{text-align:center;margin-bottom:28px}
    .section-head h2{
      font-family:'Plus Jakarta Sans',sans-serif;
      font-size:clamp(1.8rem,4vw,2.7rem);
      margin:0 0 10px
    }
    .section-head p{margin:0;color:var(--muted)}

    .plans{
      display:grid;grid-template-columns:repeat(3,1fr);gap:16px
    }
    .plan{
      background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));
      border:1px solid var(--line);
      border-radius:22px;padding:24px;
      position:relative;overflow:hidden;
      transition:.3s ease;
    }
    .plan::before{
      content:"";position:absolute;inset:auto -20% -50% auto;
      width:180px;height:180px;background:rgba(255,255,255,.09);
      filter:blur(20px);border-radius:50%;
    }
    .plan:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.35)}
    .plan.featured{border-color:rgba(255,255,255,.5);box-shadow:0 20px 50px rgba(0,0,0,.25)}
    .tag{
      display:inline-block;font-size:.75rem;font-weight:800;
      color:#0e0e0e;background:var(--green);
      padding:6px 9px;border-radius:999px;margin-bottom:12px
    }
    .plan h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.35rem;margin:0 0 8px}
    .price{font-size:2.2rem;font-weight:800;margin:8px 0}
    .price small{font-size:.9rem;color:var(--muted);font-weight:600}
    .plan ul{padding:0;margin:18px 0 22px;list-style:none;color:#f3f3f3}
    .plan li{padding:7px 0}
    .plan li::before{content:"✓";color:var(--green);font-weight:900;margin-right:8px}

    .proof{
      display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:stretch
    }
    .proof-card,.form-card{
      border:1px solid var(--line);
      background:linear-gradient(180deg,var(--card),rgba(15,15,15,.9));
      border-radius:24px;padding:28px;
    }
    .metric{
      font-family:'Plus Jakarta Sans',sans-serif;
      font-size:clamp(3rem,7vw,5rem);font-weight:700;
      color:var(--green);letter-spacing:-.05em
    }
    .proof-card h3{font-size:1.45rem;margin:6px 0 10px}
    .proof-card p{color:var(--muted);line-height:1.7;margin:0}
    .proof-note{
      margin-top:18px;padding:14px;border-radius:14px;
      background:rgba(255,255,255,.035);
      color:#ececec;font-size:.92rem
    }

    form{display:grid;gap:14px}
    label{font-size:.88rem;font-weight:700;color:#e5e5e5}
    input,select{
      width:100%;padding:14px 15px;
      border-radius:12px;border:1px solid var(--line);
      background:#0e0e0e;color:var(--text);
      outline:none;font:inherit;
    }
    input:focus,select:focus{
      border-color:rgba(255,255,255,.55);
      box-shadow:0 0 0 3px rgba(255,255,255,.09)
    }
    .field{display:grid;gap:7px}
    .summary{
      margin:4px 0 2px;padding:14px 15px;border-radius:14px;
      background:rgba(255,255,255,.07);
      border:1px solid rgba(255,255,255,.2)
    }
    .summary small{display:block;color:#bdbdbd;margin-bottom:5px}
    .summary strong{font-size:1.05rem}
    .success{
      display:none;margin-top:12px;padding:13px 14px;border-radius:12px;
      background:rgba(255,255,255,.1);
      color:#d9d9d9;border:1px solid rgba(255,255,255,.25);
      font-weight:700
    }

    .responsible{
      margin-top:18px;color:#8a8a8a;font-size:.78rem;line-height:1.5
    }

    footer{
      padding:36px 0 48px;color:#c5c5c5;text-align:center;
      border-top:1px solid var(--line);margin-top:28px;font-size:.85rem
    }


    .activity-wrap{
      margin:26px auto 0;
      max-width:820px;
      position:relative;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.2);
      background:rgba(14,14,14,.78);
      border-radius:16px;
      box-shadow:0 12px 40px rgba(0,0,0,.22);
    }
    .activity-label{
      position:absolute;left:0;top:0;bottom:0;z-index:2;
      display:flex;align-items:center;
      padding:0 14px;
      background:linear-gradient(90deg,#171717 78%,rgba(23,23,23,0));
      color:#d2d2d2;
      font-size:.72rem;font-weight:800;letter-spacing:.08em;
      text-transform:uppercase;
      white-space:nowrap;
    }
    .activity-track{
      display:flex;
      width:max-content;
      gap:34px;
      padding:13px 0 13px 150px;
      animation:activityScroll 28s linear infinite;
      will-change:transform;
    }
    .activity-item{
      white-space:nowrap;
      color:#e4e4e4;
      font-size:.88rem;
      font-weight:600;
    }
    .activity-item strong{color:var(--green)}
    .demo-disclaimer{
      margin-top:7px;
      font-size:.68rem;
      color:#7b7b7b;
    }
    @keyframes activityScroll{
      from{transform:translateX(0)}
      to{transform:translateX(-50%)}
    }


    .purchase-toast{
      position:fixed;
      left:18px;
      bottom:18px;
      z-index:60;
      width:min(330px,calc(100vw - 36px));
      padding:14px 15px;
      border-radius:16px;
      background:rgba(17,17,17,.95);
      border:1px solid rgba(255,255,255,.26);
      box-shadow:0 18px 55px rgba(0,0,0,.45);
      backdrop-filter:blur(16px);
      opacity:0;
      transform:translateY(18px) scale(.98);
      pointer-events:none;
      transition:opacity .32s ease,transform .32s ease;
    }
    .purchase-toast.show{
      opacity:1;
      transform:translateY(0) scale(1);
    }
    .purchase-toast-top{
      display:flex;
      align-items:center;
      gap:9px;
      margin-bottom:5px;
    }
    .purchase-toast-dot{
      width:9px;height:9px;border-radius:50%;
      background:var(--green);
      box-shadow:0 0 16px rgba(255,255,255,.8);
      flex:0 0 auto;
    }
    .purchase-toast-name{
      font-weight:800;
      font-size:.93rem;
      color:#f7f7f7;
    }
    .purchase-toast-text{
      color:#d0d0d0;
      font-size:.82rem;
      line-height:1.45;
    }
    .purchase-toast-demo{
      color:#828282;
      font-size:.65rem;
      margin-top:5px;
      text-transform:uppercase;
      letter-spacing:.07em;
      font-weight:800;
    }


    .plans-intro{
      text-align:center;
      padding:42px 0 28px;
    }
    .plans-kicker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.3);
      background:rgba(255,255,255,.07);
      color:#d4d4d4;
      font-size:.72rem;
      font-weight:800;
      letter-spacing:.12em;
    }
    .plans-intro h1{
      margin:16px 0 8px;
      font-family:'Plus Jakarta Sans',sans-serif;
      font-size:clamp(3.4rem,9vw,6.8rem);
      line-height:.85;
      letter-spacing:.03em;
      color:#fff;
      text-shadow:0 10px 40px rgba(0,0,0,.5);
    }
    .plans-intro p{
      width:min(680px,100%);
      margin:0 auto;
      color:var(--muted);
      line-height:1.65;
      font-size:.98rem;
    }
    .plan{
      min-height:360px;
      display:flex;
      flex-direction:column;
      justify-content:flex-start;
      border-radius:24px;
      padding:26px;
      background:
        linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018)),
        radial-gradient(circle at 90% 10%,rgba(255,255,255,.10),transparent 32%);
    }
    .plan h3{
      font-family:'Plus Jakarta Sans',sans-serif;
      font-size:2.15rem;
      letter-spacing:.04em;
      margin-bottom:4px;
    }
    .price{
      font-family:'Plus Jakarta Sans',sans-serif;
      font-size:3rem;
      letter-spacing:.02em;
    }
    .plan .btn{margin-top:auto;width:100%}
    .form-card h2,
    .proof-card h3,
    .section-head h2{
      font-family:'Plus Jakarta Sans',sans-serif;
      letter-spacing:.035em;
    }


    .plan{
      min-height:330px;
      display:flex;
      flex-direction:column;
      justify-content:flex-start;
      align-items:stretch;
      text-align:center;
      padding:28px 24px 24px;
    }
    .plan-days{
      display:flex;
      justify-content:center;
      align-items:flex-end;
      gap:8px;
      margin-top:10px;
      line-height:.9;
    }
    .plan-days span{
      font-family:'Plus Jakarta Sans',sans-serif;
      font-size:clamp(4.5rem,8vw,6rem);
      font-weight:800;
      letter-spacing:-.055em;
      color:#fff;
      text-shadow:0 8px 28px rgba(0,0,0,.35);
    }
    .plan-days small{
      font-family:'Plus Jakarta Sans',sans-serif;
      font-size:.82rem;
      font-weight:800;
      letter-spacing:.18em;
      color:#a6a6a6;
      padding-bottom:10px;
    }
    .plan-price{
      margin-top:14px;
      font-family:'Plus Jakarta Sans',monospace;
      font-size:clamp(2.1rem,5vw,2.9rem);
      font-weight:700;
      letter-spacing:-.055em;
      color:var(--green);
      text-shadow:0 0 24px rgba(255,255,255,.16);
    }
    .plan-caption{
      margin-top:4px;
      margin-bottom:22px;
      font-size:.72rem;
      font-weight:800;
      letter-spacing:.16em;
      color:#838383;
    }
    .plan .btn{
      margin-top:auto;
      width:100%;
      min-height:52px;
      font-family:'Plus Jakarta Sans',sans-serif;
      font-weight:800;
      text-transform:none;
    }


    .summary{
      padding:16px 17px;
      border-radius:16px;
      background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.045));
      border:1px solid rgba(255,255,255,.24);
    }
    .summary small{
      display:block;
      color:#b4b4b4;
      font-family:'Plus Jakarta Sans',sans-serif;
      font-size:.68rem;
      font-weight:800;
      letter-spacing:.13em;
      margin-bottom:8px;
    }
    .summary-plan{
      font-family:'Plus Jakarta Sans',sans-serif;
      font-size:1.35rem;
      font-weight:800;
      color:#f5f7fa;
      line-height:1.1;
    }
    .summary-price{
      margin-top:4px;
      font-family:'Plus Jakarta Sans',monospace;
      font-size:1.18rem;
      font-weight:700;
      color:var(--green);
    }
    .plan.selected{
      border-color:rgba(255,255,255,.75);
      box-shadow:0 0 0 2px rgba(255,255,255,.12),0 24px 58px rgba(0,0,0,.32);
      transform:translateY(-5px);
    }

    @media (max-width:820px){

      .brand-name{display:block;font-size:1rem;letter-spacing:.055em}
      .nav-cta{padding:9px 12px;font-size:.76rem}
      .plans{gap:12px}
      .plan{min-height:300px}

      .plans,.proof{grid-template-columns:1fr}
      .hero{padding-top:70px}
    }
  
.presentation-1{max-width:760px}
.presentation-2{text-align:left;margin-bottom:18px}
.presentation-3{font-size:1.7rem}
.presentation-4{max-width:760px}
.presentation-5{display:block;color:inherit}
.success.is-visible{display:block}.success.is-error{background:#301515;color:#ffe0e0;border-color:#ac6262}
.purchase-toast-demo{color:#d5d5d5;font-size:14px;letter-spacing:0;line-height:1.5}
.privacy-note{font-size:15px;line-height:1.6;color:#ececec;margin:0}
.btn:disabled{opacity:.55;cursor:wait}.btn:disabled::after{animation:none}
/* Plan picker */
.plans-intro h1{margin-left:auto;margin-right:auto}
.brand-photo{display:block;object-fit:cover;padding:0;transform:none;border:2px solid rgba(255,255,255,.6)}
.plans-3{align-items:stretch;max-width:1040px;margin:0 auto}
.plans-3 .plan{min-height:0;padding:30px 24px 24px;gap:0}
.plans-3 .plan.featured{
  border:1px solid rgba(255,255,255,.7);
  background:
    linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.02) 60%),
    radial-gradient(circle at 50% 0%,rgba(255,255,255,.22),transparent 55%);
  box-shadow:0 0 0 1px rgba(255,255,255,.18),0 28px 70px rgba(255,255,255,.12),0 20px 50px rgba(0,0,0,.35);
  transform:scale(1.03);
}
.plans-3 .plan.featured:hover{transform:scale(1.03) translateY(-5px)}
.plan-badge{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  padding:6px 12px;border-radius:999px;white-space:nowrap;
  background:var(--green);color:#0e0e0e;
  font-size:.66rem;font-weight:800;letter-spacing:.12em;
}
.plan-name{
  margin-top:18px;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:1rem;font-weight:800;
  letter-spacing:.22em;color:#d4d4d4;
}
.plan-save{
  align-self:center;margin:-10px 0 18px;padding:5px 10px;border-radius:8px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);
  color:#d9d9d9;font-size:.78rem;font-weight:700;
}
.plan-list{list-style:none;margin:0 0 22px;padding:16px 0 0;border-top:1px solid var(--line);text-align:left;color:#f3f3f3;font-size:.9rem}
.plan-list li{padding:6px 0;display:flex;gap:9px}
.plan-list li::before{content:"✓";color:var(--green);font-weight:900}
.plan .btn-secondary{border-color:rgba(255,255,255,.35);color:var(--green)}
.plan .btn-secondary:hover{background:rgba(255,255,255,.1)}
.steps{
  list-style:none;padding:0;margin:40px auto 0;max-width:760px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
}
.steps li{
  display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;
  border:1px solid var(--line);background:rgba(255,255,255,.025);color:#e5e5e5;font-weight:700;font-size:.9rem;
}
.steps strong{
  width:30px;height:30px;flex:0 0 30px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.4);color:var(--green);
  font-family:'Plus Jakarta Sans',monospace;
}
.change-plan{display:inline-block;margin-top:10px;color:var(--green);font-size:.85rem;font-weight:700}
.change-plan:hover{text-decoration:underline}
@media (max-width:820px){
  .plans-3 .plan.featured,.plans-3 .plan.featured:hover{transform:none}
  .plans-3 .plan.featured{order:-1}
  .steps{grid-template-columns:1fr}
}
/* ===== Plan colour themes ===== */
:root,.plan-90,body[data-plan="90"],.cart-pop[data-plan="90"]{
  --accent:#e9a68f;--accent-hi:#fde4d8;--accent-lo:#b76e5d;--accent-glow:rgba(233,166,143,.36);--accent-soft:rgba(233,166,143,.10);
}
.plan-30,body[data-plan="30"],.cart-pop[data-plan="30"]{
  --accent:#d4d4d8;--accent-hi:#ffffff;--accent-lo:#71717a;--accent-glow:rgba(212,212,216,.28);--accent-soft:rgba(212,212,216,.08);
}
.plan-180,body[data-plan="180"],.cart-pop[data-plan="180"]{
  --accent:#fbbf24;--accent-hi:#fff1b8;--accent-lo:#d97706;--accent-glow:rgba(251,191,36,.34);--accent-soft:rgba(251,191,36,.10);
}

/* ===== Ambient background ===== */
body::before{
  content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle at 15% 25%,rgba(233,166,143,.05),transparent 28%),
    radial-gradient(circle at 85% 15%,rgba(255,255,255,.09),transparent 30%),
    radial-gradient(circle at 70% 85%,rgba(251,191,36,.06),transparent 30%);
  animation:drift 22s ease-in-out infinite alternate;
}
@keyframes drift{to{transform:translate3d(3%,-4%,0) rotate(6deg)}}

/* ===== Entrance animations ===== */
.reveal{animation:fadeUp .8s cubic-bezier(.2,.7,.2,1) backwards}
.plans-3 .plan:nth-child(1){animation-delay:.12s}
.plans-3 .plan:nth-child(2){animation-delay:.24s}
.plans-3 .plan:nth-child(3){animation-delay:.36s}
.steps.reveal{animation-delay:.5s}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}}

/* ===== Hero ===== */
.plans-intro h1{
  background:linear-gradient(90deg,#fff 0%,#fff 38%,#d4d4d4 50%,#fff 62%,#fff 100%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;filter:drop-shadow(0 10px 30px rgba(0,0,0,.55));
  animation:titleShine 7s linear infinite;
}
@keyframes titleShine{from{background-position:100% 0}to{background-position:-150% 0}}
.plans-kicker::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--green);
  animation:ping 1.8s ease-out infinite;
}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}100%{box-shadow:0 0 0 10px rgba(255,255,255,0)}}

/* ===== Plan cards ===== */
.plans-3 .plan{
  border:1px solid var(--accent-glow);
  background:
    radial-gradient(circle at 50% -10%,var(--accent-glow),transparent 55%),
    linear-gradient(180deg,var(--accent-soft),rgba(255,255,255,.015) 55%),#090e19;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s ease;
}
.plans-3 .plan::before{background:var(--accent-glow)}
.plans-3 .plan > *:not(.plan-badge){position:relative;z-index:1}
.plans-3 .plan:hover{transform:translateY(-8px);border-color:var(--accent);box-shadow:0 30px 70px var(--accent-glow),0 0 0 1px var(--accent-glow)}
.plans-3 .plan.featured{border-color:var(--accent)}
.plans-3 .plan.featured:hover{transform:scale(1.03) translateY(-8px)}
.plans-3 .plan-name{color:var(--accent)}
.plans-3 .plan-days span{
  background:linear-gradient(180deg,#fff 35%,var(--accent-hi));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.plans-3 .plan-price{color:var(--accent);text-shadow:0 0 28px var(--accent-glow)}
.plans-3 .plan-save{background:var(--accent-soft);border-color:var(--accent-glow);color:var(--accent-hi)}
.plans-3 .plan-list li::before{color:var(--accent)}
.plans-3 .plan-badge{z-index:2;background:linear-gradient(90deg,var(--accent-hi),var(--accent));color:#020a1a;box-shadow:0 6px 18px var(--accent-glow)}

/* 30: breathing glow */
.plan-30{animation:breathe 3.6s ease-in-out infinite}
.plan-30.reveal{animation:fadeUp .8s cubic-bezier(.2,.7,.2,1) .12s backwards,breathe 3.6s ease-in-out 1s infinite}
@keyframes breathe{50%{box-shadow:0 0 34px var(--accent-glow)}}
/* 90: rotating light border */
@property --spin{syntax:'<angle>';initial-value:0deg;inherits:false}
.plan-90::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;z-index:1;
  background:conic-gradient(from var(--spin),transparent 0 62%,var(--accent) 80%,var(--accent-hi) 88%,transparent 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:spin 4s linear infinite;
}
@keyframes spin{to{--spin:360deg}}
/* 180: gold sweep */
.plan-180::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(115deg,transparent 42%,rgba(255,236,170,.16) 50%,transparent 58%);
  background-size:260% 100%;animation:sweep 4.5s ease-in-out infinite;
}
@keyframes sweep{from{background-position:130% 0}to{background-position:-130% 0}}

/* Plan buttons */
.btn-plan{
  position:relative;overflow:hidden;
  border:1px solid var(--accent);color:var(--accent);background:var(--accent-soft);
}
.btn-plan:hover{transform:translateY(-2px);box-shadow:0 14px 36px var(--accent-glow)}
.btn-plan.btn-filled{
  border:0;color:#0e0e0e;
  background:linear-gradient(135deg,var(--accent-hi),var(--accent) 50%,var(--accent-lo));
  box-shadow:0 12px 34px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-plan::after{
  content:"";position:absolute;inset:-50% auto -50% -35%;width:28%;transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  animation:shine 3.6s ease-in-out infinite;
}
.steps li{cursor:default;user-select:none}
.proof-card{transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.proof-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.4);box-shadow:0 24px 60px rgba(255,255,255,.12)}
.brand-photo{animation:logoGlow 3s ease-in-out infinite}
@keyframes logoGlow{50%{box-shadow:0 0 0 1px rgba(255,255,255,.3),0 0 28px rgba(255,255,255,.45)}}

/* ===== Checkout funnel ===== */
.funnel{list-style:none;padding:0;margin:0 auto 24px;max-width:620px;display:grid;grid-template-columns:repeat(4,1fr)}
.funnel li{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;
  font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#7b7b7b;transition:color .4s;
}
.funnel li span{
  position:relative;z-index:1;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);background:#111111;color:#949494;font-family:'Plus Jakarta Sans',monospace;
  transition:background .4s,border-color .4s,color .4s,box-shadow .4s;
}
.funnel li:not(:first-child)::before{
  content:"";position:absolute;top:17px;right:50%;width:100%;height:2px;background:var(--line);transition:background .5s;
}
.funnel[data-step="2"] li:nth-child(1),.funnel[data-step="3"] li:nth-child(-n+2),.funnel[data-step="4"] li{color:var(--accent)}
.funnel[data-step="2"] li:nth-child(1) span,.funnel[data-step="3"] li:nth-child(-n+2) span,.funnel[data-step="4"] li span{
  background:var(--accent);border-color:var(--accent);color:#020a1a;
}
.funnel[data-step="2"] li:nth-child(2)::before,.funnel[data-step="3"] li:nth-child(-n+3)::before,.funnel[data-step="4"] li::before{
  background:linear-gradient(90deg,var(--accent),var(--accent-hi));
}
.funnel[data-step="2"] li:nth-child(2),.funnel[data-step="3"] li:nth-child(3),.funnel[data-step="4"] li:nth-child(4){color:#fff}
.funnel[data-step="2"] li:nth-child(2) span,.funnel[data-step="3"] li:nth-child(3) span,.funnel[data-step="4"] li:nth-child(4) span{
  border-color:var(--accent);color:#fff;background:var(--accent-soft);animation:current 1.8s ease-out infinite;
}
@keyframes current{0%{box-shadow:0 0 0 0 var(--accent-glow)}100%{box-shadow:0 0 0 12px transparent}}

/* ===== Checkout themed by the chosen plan ===== */
body[data-plan] .summary{background:linear-gradient(145deg,var(--accent-soft),rgba(255,255,255,.02));border-color:var(--accent-glow)}
body[data-plan] .summary small{color:var(--accent)}
body[data-plan] .summary-price{color:var(--accent);text-shadow:0 0 20px var(--accent-glow)}
body[data-plan] .change-plan{color:var(--accent)}
body[data-plan] .form-card{border-color:var(--accent-glow);box-shadow:0 30px 80px rgba(0,0,0,.35),0 0 60px var(--accent-soft)}
body[data-plan] input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
body[data-plan] #createPix,body[data-plan] #copyPix,body[data-plan] #vipLink{
  color:#020a1a;background:linear-gradient(135deg,var(--accent-hi),var(--accent) 50%,var(--accent-lo));
  box-shadow:0 12px 34px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.45);
}
#customerForm .privacy-note{
  display:block;text-align:center;text-wrap:balance;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:.9rem;font-weight:600;letter-spacing:.02em;color:#d9d9d9;
}
#customerForm .privacy-note::before{content:"🔒";margin-right:6px;font-size:.85rem;filter:grayscale(1) brightness(1.4)}
#paymentArea:not([hidden]){animation:fadeUp .6s cubic-bezier(.2,.7,.2,1) backwards}
#vipLink:not([hidden]){animation:fadeUp .5s ease backwards,breathe 2s ease-in-out infinite}

/* ===== Illustrative plan-selection popups ===== */
.cart-pop{
  position:fixed;left:18px;bottom:18px;z-index:60;width:min(320px,calc(100vw - 36px));
  display:flex;align-items:center;gap:12px;padding:13px 14px 15px;border-radius:16px;overflow:hidden;
  background:rgba(9,14,25,.96);border:1px solid var(--accent-glow);
  box-shadow:0 18px 55px rgba(0,0,0,.5),0 0 30px var(--accent-soft);backdrop-filter:blur(16px);
  opacity:0;transform:translateY(24px) scale(.96);pointer-events:none;
  transition:opacity .4s ease,transform .4s cubic-bezier(.2,.7,.2,1.3);
}
.cart-pop.show{opacity:1;transform:none}
.cart-pop::after{
  content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;transform-origin:left;
  background:linear-gradient(90deg,var(--accent-lo),var(--accent));
}
.cart-pop.show::after{animation:shrink 5s linear forwards}
@keyframes shrink{to{transform:scaleX(0)}}
.cart-pop-avatar{
  flex:0 0 42px;height:42px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:.85rem;color:#0e0e0e;
  background:linear-gradient(135deg,var(--accent-hi),var(--accent));box-shadow:0 0 18px var(--accent-glow);
}
.cart-pop-avatar{position:relative;border-radius:14px;color:#0e0e0e}
.cart-pop-avatar svg{display:block}
.cart-pop.show .cart-pop-avatar svg{animation:cartIn .7s cubic-bezier(.2,.7,.2,1.4) .15s backwards}
@keyframes cartIn{from{transform:translateX(-14px) rotate(-12deg);opacity:0}}
.cart-pop-badge{
  position:absolute;top:-6px;right:-7px;min-width:20px;height:20px;padding:0 4px;border-radius:999px;
  display:grid;place-items:center;font-style:normal;font-size:.62rem;font-weight:800;
  color:#fff;background:#ef4444;border:2px solid #151515;
}
.cart-pop.show .cart-pop-badge{animation:badgePop .45s cubic-bezier(.2,.7,.2,1.6) .5s backwards}
@keyframes badgePop{from{transform:scale(0)}}
.btn,button{font-family:inherit}
.plan .btn{font-family:'Plus Jakarta Sans',sans-serif}
.cart-pop strong{display:block;font-size:.92rem;color:#f7f7f7}
.cart-pop-text{display:block;font-size:.85rem;color:#ececec;line-height:1.4}
.cart-pop-text{font-family:'Unbounded',sans-serif;font-weight:500;font-size:.52rem;letter-spacing:.05em;text-transform:uppercase;margin-top:4px;color:#c9c9cf}
.cart-pop strong{font-size:.98rem}
.cart-pop-tag{display:block;margin-top:3px;font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#8b8b8b}

@media (max-width:820px){
  .plans-3 .plan.featured:hover{transform:translateY(-8px)}
  .funnel li{font-size:.62rem;letter-spacing:.06em}
  .cart-pop{left:12px;right:12px;bottom:12px;width:auto}
}
/* ===== Typography: Plus Jakarta Sans ===== */
body{font-weight:450;letter-spacing:-.005em}
h1,.plans-intro h1{font-weight:800;letter-spacing:-.035em;line-height:.95}
.plan-days span{font-weight:800;letter-spacing:-.05em}
.plan-price,.summary-price,.metric{font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.plan-name,.plans-kicker,.plan-badge,.plan-caption,.summary small{font-weight:700}
.btn{font-weight:700;letter-spacing:-.005em}
label{font-weight:600}

/* ===== Header ===== */
@font-face{font-family:'Unbounded';font-style:normal;font-weight:200 900;font-display:swap;src:url(fonts/unbounded.woff2) format('woff2')}
.topbar::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(212,212,216,.7),rgba(233,166,143,.75),rgba(251,191,36,.75),transparent);
  background-size:200% 100%;animation:sweep 8s linear infinite;
}
.brand{gap:14px}
.brand-text{display:flex;flex-direction:column;gap:5px;line-height:1}
.brand .brand-name{
  display:flex;align-items:center;gap:.4em;white-space:nowrap;line-height:1.4;margin:-6px 0 -4px;
  font-family:'Unbounded',sans-serif;font-weight:800;font-size:1.18rem;letter-spacing:.01em;
  background:linear-gradient(90deg,#fff 0%,#fff 38%,#8b8b95 50%,#fff 62%,#fff 100%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:titleShine 6s linear infinite;
}
.brand .brand-name em{
  font-style:normal;font-family:'Plus Jakarta Sans',sans-serif;font-size:.5em;font-weight:700;letter-spacing:.12em;
  padding:3px 6px;border:1px solid rgba(255,255,255,.3);border-radius:6px;-webkit-text-fill-color:#d4d4d8;
}
.brand-sub{
  display:flex;align-items:center;gap:6px;font-size:.6rem;font-weight:700;letter-spacing:.3em;color:#a1a1aa;
}
.brand-sub svg{filter:drop-shadow(0 0 5px rgba(255,255,255,.75))}
.nav-right{display:flex;align-items:center;gap:10px}
.nav-chips{display:flex;gap:8px}
.nav-chip{
  display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:999px;
  font-size:.78rem;font-weight:600;color:#d4d4d8;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
}
.nav-chip svg{color:#f4f4f5}
.nav-chip:last-child svg{color:#fbbf24}
.nav-cta{
  display:inline-flex;align-items:center;gap:7px;font-weight:700;
  color:#0a0a0a;background:#f4f4f5;border-color:transparent;box-shadow:0 8px 24px rgba(255,255,255,.08);
}
.nav-cta:hover{background:#fff;box-shadow:0 10px 30px rgba(255,255,255,.18)}
/* Brand effects */
.brand .brand-name{
  background:linear-gradient(90deg,#fff 0%,#fff 28%,#d4d4d8 40%,#e9a68f 50%,#fbbf24 60%,#fff 72%,#fff 100%);
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;
  animation:titleShine 5s linear infinite,brandGlow 3.2s ease-in-out infinite;
  transition:letter-spacing .4s ease;
}
@keyframes brandGlow{
  0%,100%{filter:drop-shadow(0 0 0 rgba(255,255,255,0))}
  50%{filter:drop-shadow(0 0 10px rgba(255,255,255,.35)) drop-shadow(0 0 22px rgba(251,191,36,.28))}
}
.brand-text{animation:brandIn .9s cubic-bezier(.2,.7,.2,1) backwards}
@keyframes brandIn{from{opacity:0;transform:translateX(-14px);filter:blur(6px)}}
.brand:hover .brand-name{letter-spacing:.05em}
.brand:hover .brand-name em{border-color:#fbbf24;-webkit-text-fill-color:#fbbf24}
.brand .brand-name em{transition:border-color .3s,-webkit-text-fill-color .3s}
.brand-sub svg{animation:diamond 2.6s ease-in-out infinite}
@keyframes diamond{0%,100%{transform:scale(1) rotate(0);filter:drop-shadow(0 0 4px rgba(255,255,255,.6))}50%{transform:scale(1.15) rotate(8deg);filter:drop-shadow(0 0 10px rgba(255,255,255,.95))}}
@keyframes crown{0%,100%{transform:translateY(0) rotate(0)}40%{transform:translateY(-2px) rotate(-8deg)}60%{transform:translateY(-2px) rotate(8deg)}}
.brand-ring{position:relative;display:grid;place-items:center;padding:3px;border-radius:17px;flex:0 0 auto}
.brand-ring::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;
  background:conic-gradient(from var(--spin),#fff1b8,#fbbf24,#b45309,#fde68a,#fff7d6,#d97706,#fff1b8);
  animation:spin 3.5s linear infinite;
}
.brand-ring::after{
  content:"";position:absolute;inset:-6px;border-radius:22px;z-index:-1;filter:blur(12px);opacity:.55;
  background:conic-gradient(from var(--spin),#fff1b8,#fbbf24,#b45309,#fde68a,#fff7d6,#d97706,#fff1b8);animation:spin 3.5s linear infinite;
}
.brand-ring .brand-photo{position:relative;z-index:1;border:2px solid #0a0a0a;animation:none;box-shadow:none}
.brand:hover .brand-ring{transform:scale(1.06) rotate(-3deg);transition:transform .35s cubic-bezier(.2,.7,.2,1.4)}
/* Luxury crown over the logo */
.brand{padding-top:12px}
.brand-crown{
  position:absolute;top:-22px;left:50%;z-index:2;transform:translateX(-50%) rotate(-6deg);
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6)) drop-shadow(0 0 8px rgba(251,191,36,.55));
  animation:crownFloat 3s ease-in-out infinite;
}
.brand-crown svg{display:block}
@keyframes crownFloat{0%,100%{transform:translateX(-50%) translateY(0) rotate(-6deg)}50%{transform:translateX(-50%) translateY(-2px) rotate(-3deg)}}
.brand-crown::after{
  content:"";position:absolute;inset:0;border-radius:4px;pointer-events:none;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.8) 50%,transparent 65%);background-size:250% 100%;
  mix-blend-mode:overlay;animation:sweep 2.8s ease-in-out infinite;
}
.brand-ring::after{opacity:.7}
.brand-ring .brand-photo{border-color:#1a1206}
/* "da" between the words: small gold italic, no box */
.brand .brand-name em{
  padding:0;border:0;border-radius:0;margin:0 -.08em;
  font-family:'Plus Jakarta Sans',sans-serif;font-style:italic;font-weight:500;font-size:.62em;letter-spacing:0;
  text-transform:lowercase;-webkit-text-fill-color:#fbbf24;
  filter:drop-shadow(0 0 6px rgba(251,191,36,.45));align-self:center;
}
.brand:hover .brand-name em{-webkit-text-fill-color:#fde68a}
/* ===== Header v2: announcement + floating glass capsule ===== */
.announce{
  position:relative;overflow:hidden;
  background:linear-gradient(90deg,#0d0902,#1f1606 50%,#0d0902);border-bottom:1px solid rgba(251,191,36,.18);
  font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#f5d68a;
}
.announce::before,.announce::after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:1;pointer-events:none}
.announce::before{left:0;background:linear-gradient(90deg,#0d0902,transparent)}
.announce::after{right:0;background:linear-gradient(-90deg,#0d0902,transparent)}
.announce-track{display:flex;gap:56px;width:max-content;padding:9px 0;animation:marquee 32s linear infinite}
.announce-track span{display:inline-flex;align-items:center;gap:12px;white-space:nowrap}
.announce-track span::before{content:"✦";color:#fbbf24;text-shadow:0 0 8px rgba(251,191,36,.7)}
@keyframes marquee{to{transform:translateX(-50%)}}

.topbar{background:transparent;border-bottom:0;backdrop-filter:none;padding:12px 0 0}
.topbar::after{display:none}
.topbar .nav{
  position:relative;padding:10px 12px 10px 16px;border-radius:22px;
  background:linear-gradient(180deg,rgba(28,28,31,.82),rgba(10,10,10,.78));
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 20px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.07);
}
.topbar .nav::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(115deg,rgba(251,191,36,.75),rgba(255,255,255,.1) 28%,rgba(255,255,255,.04) 60%,rgba(233,166,143,.6));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}
.topbar .nav::after{
  content:"";position:absolute;left:12%;right:12%;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,#fbbf24,transparent);opacity:.8;filter:blur(.3px);
}
.nav-links{display:flex;gap:2px;padding:4px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.nav-links a{
  position:relative;padding:8px 16px;border-radius:10px;font-size:.86rem;font-weight:600;color:#d4d4d8;
  transition:color .25s,background .25s;
}
.nav-links a::after{
  content:"";position:absolute;left:16px;right:16px;bottom:4px;height:1.5px;border-radius:2px;
  background:linear-gradient(90deg,#fbbf24,#e9a68f);transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-cta{
  position:relative;overflow:hidden;padding:11px 20px;border-radius:14px;
  color:#1a1206;background:linear-gradient(135deg,#fff1b8,#fbbf24 50%,#d97706);
  box-shadow:0 10px 30px rgba(251,191,36,.28),inset 0 1px 0 rgba(255,255,255,.6);
}
.nav-cta::after{
  content:"";position:absolute;inset:-50% auto -50% -35%;width:28%;transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:shine 3.6s ease-in-out infinite;
}
.nav-cta:hover{background:linear-gradient(135deg,#fff7d6,#fcd34d 50%,#f59e0b);box-shadow:0 14px 38px rgba(251,191,36,.42);transform:translateY(-1px)}
.nav-chip{background:rgba(255,255,255,.035)}
@media (max-width:1100px){.nav-links{display:none}}
@media (max-width:820px){
  .topbar{padding:8px 0 0}
  .topbar .nav{padding:8px 8px 8px 12px;border-radius:18px}
  .nav-cta{padding:9px 13px;font-size:.78rem}
  .announce{font-size:.6rem}
}
@media (max-width:900px){.nav-chips{display:none}}
@media (max-width:820px){
  .brand .brand-name{display:flex;font-size:.92rem}
  .brand-sub{font-size:.52rem;letter-spacing:.24em}
  .brand-mark{width:42px;height:42px}
}

/* ===== Funnel step 4: WhatsApp ===== */
.funnel li.step-wa span{color:#25d366;border-color:rgba(37,211,102,.45)}
.funnel[data-step="4"] li.step-wa span{background:#25d366;border-color:#25d366;color:#fff;box-shadow:0 0 18px rgba(37,211,102,.5)}

/* ===== Secure-access pill (checkout) ===== */
.kicker-secure{
  position:relative;gap:10px;padding:6px 16px 6px 6px;
  font-size:.82rem;font-weight:600;letter-spacing:0;text-transform:none;color:#f4f4f5;
  background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px);
  box-shadow:0 8px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08);
}
.kicker-secure::before{display:none}
.kicker-secure::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);background-size:200% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:sweep 3.5s linear infinite;
}
.kicker-icon{
  width:28px;height:28px;flex:0 0 28px;border-radius:50%;display:grid;place-items:center;
  color:#0a0a0a;background:linear-gradient(135deg,var(--accent-hi),var(--accent));
  box-shadow:0 0 16px var(--accent-glow);
}

.kicker-wa .kicker-icon{color:#fff;background:#25d366;box-shadow:0 0 16px rgba(37,211,102,.55)}
.kicker-wa::after{background:linear-gradient(90deg,transparent,#25d366,transparent);background-size:200% 100%}

/* ===== Selected plan summary (checkout) ===== */
.summary{display:grid;gap:14px;padding:18px 20px}
.summary-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.summary-top small{margin:0;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
.summary-top .change-plan{margin:0;font-size:.82rem;font-weight:600;opacity:.9}
.summary-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.summary-plan{font-size:1.35rem;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.summary-meta{margin-top:4px;font-size:.88rem;color:#d4d4d4;font-weight:500}
.summary-price{margin:0;font-size:1.6rem;line-height:1;white-space:nowrap}
.summary-price small{display:block;margin-top:5px;text-align:right;font-size:.66rem;letter-spacing:.12em;color:#b3b3b3;font-weight:600}
/* ===== Small phones: keep brand and CTA apart ===== */
.topbar .nav{gap:12px}
.nav-right{flex:0 0 auto}
@media (max-width:520px){
  .brand{gap:10px;min-width:0}
  .brand-ring{padding:2px;border-radius:14px}
  .brand-mark{width:38px;height:38px;border-radius:12px}
  .brand-crown{top:-18px}
  .brand-crown svg{width:28px;height:24px}
  .brand .brand-name{font-size:.78rem;gap:.3em}
  .brand-sub{font-size:.5rem;letter-spacing:.2em}
  .nav-cta{padding:8px 11px;font-size:.72rem;border-radius:12px;gap:5px}
}
@media (max-width:370px){
  .brand-sub{display:none}
  .brand .brand-name{font-size:.7rem}
  .nav-cta{padding:7px 9px;font-size:.68rem}
}

/* ===== Performance: keep only cheap (transform/opacity) or tiny animations ===== */
body::before{animation:none}
.plans-intro h1{
  animation:none;background:none;color:#fff;-webkit-text-fill-color:#fff;filter:none;
  text-shadow:0 10px 30px rgba(0,0,0,.55);
}
.brand .brand-name{animation:titleShine 6s linear infinite}
.plan-30,.plan-30.reveal{animation:none}
.plan-30.reveal{animation:fadeUp .8s cubic-bezier(.2,.7,.2,1) .12s backwards}
.plan-90::after{
  animation:none;
  background:linear-gradient(135deg,var(--accent-hi),transparent 32%,transparent 68%,var(--accent));
}
.plan-180::after{animation:none;background:none}
.kicker-secure::after{animation:none;background-position:50% 0}
.brand-ring::after{animation:none}
.brand-crown::after{display:none}
.brand-sub svg{animation:diamondT 2.6s ease-in-out infinite}
@keyframes diamondT{50%{transform:scale(1.15) rotate(8deg)}}
.topbar .nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:linear-gradient(180deg,rgba(24,24,27,.97),rgba(10,10,10,.97))}
.cart-pop{backdrop-filter:none;background:rgba(12,12,14,.98)}
/* Button shine via transform (compositor) instead of animating `left` (layout every frame) */
@keyframes shine{0%,72%{transform:translateX(0) rotate(18deg)}100%{transform:translateX(620%) rotate(18deg)}}

/* Reduced motion: keep decorative loops (marquee, shine, ring) but drop large movements. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.plan-30.reveal,.brand-text,#paymentArea:not([hidden]),#vipLink:not([hidden]){animation:none!important}
  .plans-3 .plan:hover,.plans-3 .plan.featured:hover{transform:none}
  body::before{animation:none}
}