:root{
  --bg:#070811;--panel:#0e1120;--panel2:#12172a;--text:#f8f9ff;--muted:#9ca7bb;
  --line:rgba(255,255,255,.10);--purple:#7853ff;--purple2:#a26bff;--green:#46d8bc;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:
radial-gradient(circle at 80% 5%,rgba(109,65,255,.18),transparent 29%),
radial-gradient(circle at 15% 35%,rgba(42,192,178,.10),transparent 25%),var(--bg);
color:var(--text);font-family:Inter,system-ui,sans-serif}a{text-decoration:none;color:inherit}
.topbar{text-align:center;padding:9px 16px;background:#0d1020;border-bottom:1px solid var(--line);font-size:11px;color:#aeb7ca}
.navbar{height:78px;max-width:1200px;margin:auto;padding:0 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:20px}
.brand{display:flex;align-items:center;gap:10px}.brand-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-weight:900;font-family:"Space Grotesk";font-size:21px;color:#0d1020;background:linear-gradient(135deg,#fff,#c8b8ff);box-shadow:0 0 30px rgba(141,103,255,.28)}.brand-title{font-family:"Space Grotesk";font-size:18px;font-weight:700;letter-spacing:-.04em}.brand-title span{color:#a276ff}.brand-sub{font-size:9px;text-transform:uppercase;letter-spacing:.15em;color:#707c92;margin-top:2px}
nav{display:flex;gap:30px;font-size:12px;color:#a0a9bc}nav a:hover{color:#fff}.wa-btn{background:#48d7bc;color:#07100f;padding:11px 15px;border-radius:12px;font-size:11px;font-weight:800}
.hero{max-width:1200px;margin:auto;padding:92px 22px 85px;display:grid;grid-template-columns:1.05fr .95fr;gap:65px;align-items:center;position:relative;isolation:isolate;overflow:hidden;border-radius:30px}
.hero-video-wrapper{position:absolute;inset:0;z-index:-1;border-radius:30px;overflow:hidden}
.hero-video{width:100%;height:100%;object-fit:cover;display:block}
.hero-video-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,8,17,.82),rgba(7,8,17,.68));pointer-events:none}
.subscription-floats{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.float-logo{position:absolute;animation:float 8s ease-in-out infinite}
.float-logo:nth-child(1){top:15%;left:10%;animation-duration:9s}
.float-logo:nth-child(2){top:25%;right:15%;animation-duration:11s;animation-direction:reverse}
.float-logo:nth-child(3){top:60%;left:20%;animation-duration:10s}
.float-logo:nth-child(4){top:35%;right:10%;animation-duration:12s;animation-direction:reverse}
.float-logo:nth-child(5){bottom:20%;left:15%;animation-duration:10.5s}
@keyframes float{0%,100%{transform:translateY(0px) scale(1);opacity:.15}50%{transform:translateY(-30px) scale(1.1);opacity:.25}}
.hero::before{display:none}.pill,.eyebrow{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#8d9ab0;font-weight:800}.pill{display:inline-flex;gap:8px;align-items:center;padding:9px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.035)}.pill:first-letter{color:var(--green)}
h1,h2{font-family:"Space Grotesk";letter-spacing:-.06em}h1{font-size:clamp(47px,6.1vw,78px);line-height:.98;margin:20px 0 24px}h1 span{background:linear-gradient(90deg,#8e6bff,#4cd8c3);-webkit-background-clip:text;color:transparent}h2{font-size:clamp(34px,4.1vw,52px);line-height:1.02;margin:8px 0 13px}.hero-left>p{max-width:630px;color:var(--muted);font-size:15px;line-height:1.75}.hero-actions{display:flex;gap:10px;margin-top:28px}.btn{border:0;cursor:pointer;border-radius:12px;padding:13px 17px;font:800 12px Inter;display:inline-flex;justify-content:center;align-items:center;gap:9px}.primary{background:#f7f8ff;color:#0a0c16;box-shadow:0 12px 30px rgba(255,255,255,.08)}.secondary{background:rgba(255,255,255,.04);border:1px solid var(--line);color:#dfe4ee}.full{width:100%;margin-top:10px}
.trust-row{display:flex;gap:27px;margin-top:50px}.trust-row div{display:grid;gap:5px}.trust-row b{font-size:12px}.trust-row span{font-size:10px;color:#737f96}
.hero-card{border:1px solid var(--line);padding:18px;border-radius:24px;background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:0 30px 100px rgba(0,0,0,.35);transform:rotate(1.2deg)}.hero-card-top{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.15em;color:#737f95;padding:2px 3px 16px}.hero-product{display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;border:1px solid var(--line);background:rgba(255,255,255,.025);padding:15px;border-radius:17px;margin-top:9px}.hero-product h3{margin:5px 0 5px;font-size:15px}.hero-product p{margin:0;color:#7e899e;font-size:10px;line-height:1.5}.hero-product strong{font-size:12px;white-space:nowrap}.logo-badge{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;font-weight:900;font-family:"Space Grotesk";font-size:20px}.chatgpt{background:linear-gradient(135deg,#5f7aff,#59d7c4);color:#081018}.claude{background:#e6ddcf;color:#25201b}.adobe{background:linear-gradient(135deg,#ff4a68,#9d2bff);color:#fff}
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;justify-content:center;gap:22px;overflow:hidden;white-space:nowrap;padding:17px 12px;color:#727d91;font-size:9px;letter-spacing:.17em}.marquee i{color:#7d5cff}
.section{max-width:1200px;margin:auto;padding:96px 22px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:25px}.section-heading p{font-size:12px;color:#7b879d}.search{display:flex;align-items:center;gap:7px;width:230px;border:1px solid var(--line);background:rgba(255,255,255,.035);padding:0 11px;border-radius:12px}.search input{width:100%;background:transparent;border:0;outline:0;color:white;font:12px Inter;padding:11px 0}
.filters{display:flex;gap:7px;flex-wrap:wrap;margin:28px 0}.filter{background:transparent;color:#838ea3;border:1px solid var(--line);border-radius:999px;padding:8px 12px;font:11px Inter;cursor:pointer}.filter.active,.filter:hover{background:#fff;color:#0a0c16;border-color:#fff}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.product{min-height:255px;padding:17px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(150deg,rgba(255,255,255,.055),rgba(255,255,255,.018));display:flex;flex-direction:column;transition:.22s}.product:hover{transform:translateY(-5px);border-color:rgba(145,116,255,.45);box-shadow:0 20px 55px rgba(0,0,0,.27)}.product-logo{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;color:#fff;font-weight:900;font-family:"Space Grotesk";font-size:20px;margin-bottom:20px}.product small{font-size:9px;letter-spacing:.15em;color:#6f7d94}.product h3{font-size:16px;margin:6px 0}.product p{font-size:10px;color:#7c879b;line-height:1.6;margin:0}.price-row{display:flex;align-items:end;justify-content:space-between;margin-top:auto;padding-top:18px}.price{font-family:"Space Grotesk";font-size:21px;font-weight:700}.price small{font-size:9px;letter-spacing:0;color:#728099}.order-btn{border:0;border-radius:10px;padding:9px 11px;background:#f5f6fb;color:#0a0c12;font:800 10px Inter;cursor:pointer}.empty{grid-column:1/-1;border:1px dashed var(--line);border-radius:18px;text-align:center;padding:50px;color:#6f7a8f}
.how{padding-top:10px}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.steps article{border:1px solid var(--line);border-radius:18px;padding:21px;background:rgba(255,255,255,.022)}.steps span{color:#8570ff;font-size:10px}.steps h3{font-size:15px;margin:21px 0 7px}.steps p{font-size:11px;color:#7d899f;line-height:1.6;margin:0}
.highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.highlight{display:flex;gap:15px;align-items:start;border:1px solid var(--line);padding:20px;border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.015))}.h-icon{width:40px;height:40px;border-radius:13px;background:#171b2d;display:grid;place-items:center}.highlight h3{font-size:14px;margin:0 0 6px}.highlight p{font-size:10px;color:#7b879b;margin:0;line-height:1.5}
.faq details{border-top:1px solid var(--line);padding:18px 0}.faq details:last-child{border-bottom:1px solid var(--line)}.faq summary{cursor:pointer;font-size:13px;font-weight:700}.faq details p{color:#7c889c;font-size:11px;line-height:1.7;max-width:700px}.faq code{color:#a994ff}
footer{max-width:1200px;margin:auto;padding:32px 22px 40px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:10px;color:#66738a}.footer-brand .brand-title{font-size:16px}
.modal{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.7);backdrop-filter:blur(9px);display:grid;place-items:center;padding:20px}.modal.hidden{display:none}.modal-backdrop{position:absolute;inset:0}.modal-panel{position:relative;width:min(520px,100%);max-height:92vh;overflow:auto;background:#0d1120;border:1px solid var(--line);box-shadow:0 30px 100px rgba(0,0,0,.45);border-radius:24px;padding:26px}.modal-close{position:absolute;top:14px;right:14px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:#cfd6e4;width:35px;height:35px;border-radius:10px;font-size:19px;cursor:pointer}.modal-muted{color:#7f8ca2;font-size:11px;line-height:1.6}.plan-grid,.payment-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:18px}.plan-card,.payment-card{border:1px solid var(--line);background:rgba(255,255,255,.025);color:#fff;text-align:left;border-radius:14px;padding:16px;cursor:pointer}.plan-card:hover,.payment-card:hover{border-color:#8b72ff;background:rgba(125,90,255,.08)}.plan-card b{display:block;font-size:13px}.plan-card span{display:block;font-size:18px;font-family:"Space Grotesk";margin-top:8px}.payment-card b{display:block;font-size:12px}.payment-card span{display:block;margin-top:5px;font-size:9px;color:#7e8a9d}.payment-preview{margin-top:18px;border-top:1px solid var(--line);padding-top:18px;text-align:center}.payment-preview.hidden{display:none}.payment-head{display:flex;justify-content:space-between;align-items:center;text-align:left}.payment-head span{display:block;font-size:13px;font-weight:800}.payment-head small{color:#7e8a9d;font-size:10px}.tiny-btn{border:1px solid var(--line);background:rgba(255,255,255,.04);padding:8px 10px;border-radius:9px;font-size:9px}.payment-preview img{width:100%;max-width:320px;aspect-ratio:1;object-fit:contain;background:#fff;border-radius:14px;border:1px solid var(--line);margin:16px auto 10px;display:block}.secure-row{display:flex;justify-content:center;gap:25px;color:#6f7d94;font-size:9px;text-transform:uppercase;letter-spacing:.09em;margin-bottom:8px}.upload-box{margin-top:18px;border:1px dashed #5f6d84;border-radius:16px;padding:25px;text-align:center;display:grid;gap:7px;cursor:pointer;background:rgba(255,255,255,.025)}.upload-box input{display:none}.upload-icon{font-size:24px}.upload-box small{color:#717d91;font-size:9px}.preview-box{margin-top:12px;text-align:center}.preview-box.hidden{display:none}.preview-box img{max-width:100%;max-height:200px;border-radius:10px;border:1px solid var(--line)}.notice{font-size:9px;color:#657188;line-height:1.6;margin:14px 0 0}.disabled{opacity:.5;pointer-events:none}
@media(max-width:920px){nav{display:none}.hero{grid-template-columns:1fr;padding-top:65px}.product-grid{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.navbar{padding:0 15px}.wa-btn{padding:10px 11px}.hero,.section{padding-left:16px;padding-right:16px}.hero{padding-top:50px}.hero-card{transform:none}.product-grid,.highlights,.steps{grid-template-columns:1fr}.section-heading{align-items:start;flex-direction:column}.search{width:100%}.trust-row{flex-wrap:wrap}.plan-grid{grid-template-columns:1fr 1fr}.footer-brand{width:100%}footer{padding-left:16px;padding-right:16px;flex-wrap:wrap}}

.product-logo-wrap{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:20px}
.subscription-badge{font-size:7px;letter-spacing:.13em;font-weight:800;color:#a995ff;padding:6px 7px;border-radius:999px;border:1px solid rgba(148,118,255,.28);background:rgba(118,78,255,.08)}
.product-logo.chatgpt{background:radial-gradient(circle at 35% 30%,#8cf2df 0,#4fbfae 28%,#263344 70%,#171b29 100%);color:#eefefa;border:1px solid rgba(102,218,194,.25);font-size:24px}
.product-logo.chatgpt-pro{background:radial-gradient(circle at 40% 30%,#c6b7ff 0,#7d5cff 30%,#2b234d 72%,#151523 100%);color:#fff;font-size:24px;border:1px solid rgba(151,125,255,.35);box-shadow:0 0 26px rgba(123,87,255,.18)}
.product-logo.claude{background:linear-gradient(145deg,#efe6d8,#c9b7a0);color:#2b241d;font-family:"Space Grotesk";font-size:23px;border:1px solid rgba(255,255,255,.2)}
.logo-badge.spotify{background:linear-gradient(135deg,#1DB954,#191414);color:#fff;box-shadow:0 0 30px rgba(29,185,84,.3)}
.logo-badge.netflix{background:linear-gradient(135deg,#E50914,#221f1f);color:#fff;box-shadow:0 0 30px rgba(229,9,20,.3)}

/* Smooth Entrance Animations */
.hero-left{animation:slideInLeft .8s cubic-bezier(.34,.69,.77,1.04) forwards}
.hero-card{animation:slideInRight .8s cubic-bezier(.34,.69,.77,1.04) forwards;animation-delay:.2s}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
.pill{animation:fadeInUp .6s ease-out forwards}
h1{animation:fadeInUp .7s ease-out forwards;animation-delay:.1s}
.hero-left>p{animation:fadeInUp .7s ease-out forwards;animation-delay:.2s}
.hero-actions{animation:fadeInUp .7s ease-out forwards;animation-delay:.3s}
.trust-row{animation:fadeInUp .7s ease-out forwards;animation-delay:.4s}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.hero-product{transition:all .3s cubic-bezier(.34,.69,.77,1);transform:translateY(0)}
.hero-product:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 50px rgba(120,90,255,.25)}
.btn{transition:all .3s ease;position:relative;overflow:hidden}
.btn::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transform:translateX(-100%);animation:shimmer 3s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
.btn:hover{transform:translateY(-2px);box-shadow:0 15px 40px rgba(0,0,0,.3)}
.primary:hover{box-shadow:0 15px 40px rgba(247,248,255,.3)}
.secondary:hover{box-shadow:0 15px 40px rgba(100,120,180,.2)}

@media(max-width:600px){.hero-video-wrapper{display:block;border-radius:22px}.hero-video{height:100%;min-height:420px}.hero::before{background:linear-gradient(180deg,rgba(7,8,17,.80),rgba(7,8,17,.62)),url("assets/family-mobile.png") center/cover no-repeat;opacity:.55;position:absolute;inset:0;z-index:-2;border-radius:30px}}

/* Seamless premium hero image blend + subtle grid background */
body{
 background-image:
 linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
 linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px),
 radial-gradient(circle at 80% 5%,rgba(109,65,255,.18),transparent 29%),
 radial-gradient(circle at 15% 35%,rgba(42,192,178,.10),transparent 25%),
 var(--bg);
 background-size:48px 48px,48px 48px,auto,auto,auto;
}
.hero{
 overflow:visible;
}
.hero::before{
 inset:-80px;
 border-radius:60px;
 opacity:.65;
 filter:blur(2px);
 background:
 linear-gradient(90deg,rgba(7,8,17,.96) 0%,rgba(7,8,17,.62) 55%,rgba(7,8,17,.86) 100%),
 url("assets/family-desktop.png") center/cover no-repeat;
 -webkit-mask-image:radial-gradient(ellipse at center,black 45%,transparent 92%);
 mask-image:radial-gradient(ellipse at center,black 45%,transparent 92%);
}
@media(max-width:600px){
 .hero::before{
  inset:-70px;
  opacity:.7;
  filter:blur(2px);
  background:
  linear-gradient(180deg,rgba(7,8,17,.90),rgba(7,8,17,.82)),
  url("assets/family-mobile.png") center/cover no-repeat;
  -webkit-mask-image:radial-gradient(ellipse at center,black 40%,transparent 90%);
  mask-image:radial-gradient(ellipse at center,black 40%,transparent 90%);
 }
}


/* Added support improvements */
.hero::before{
  pointer-events:none;
}
.hero-card, .hero-left{
  position:relative;
  z-index:2;
}
.floating-chat{
  position:fixed;
  right:24px;
  bottom:105px;
  width:64px;
  height:64px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#25D366;
  color:white;
  font-size:30px;
  box-shadow:0 12px 35px rgba(0,0,0,.35);
  z-index:10000;
  border:3px solid white;
}
footer{
  position:relative;
  z-index:3;
}
.footer-payment,.footer-contact{
  margin-top:18px;
  line-height:1.8;
}
.payment-logos{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:8px;
}
.payment-logos span{
  padding:7px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  font-size:12px;
}

/* Plan selection + cart */
.plan-card.selected{
  border-color:#a985ff;
  box-shadow:0 0 0 1px #a985ff,0 0 18px rgba(139,103,255,.55),inset 0 0 22px rgba(139,103,255,.08);
  background:linear-gradient(145deg,rgba(139,103,255,.18),rgba(255,255,255,.035));
  transform:translateY(-1px);
}
.plan-card{transition:border-color .2s,box-shadow .2s,transform .2s,background .2s}
.selection-summary{margin-top:14px;padding:13px 14px;border:1px solid rgba(255,255,255,.11);border-radius:14px;background:rgba(255,255,255,.035);display:flex;justify-content:space-between;gap:14px;align-items:center}
.selection-summary span{display:block;color:#7e8a9d;font-size:9px;text-transform:uppercase;letter-spacing:.08em}
.selection-summary b{display:block;font-size:11px;margin-top:4px}
.selection-summary strong{display:block;font:800 19px "Space Grotesk";margin-top:3px}
.cart-button{position:fixed;left:22px;bottom:22px;z-index:90;border:1px solid rgba(167,137,255,.45);background:linear-gradient(135deg,#8b6bff,#55d8c3);color:#071018;border-radius:999px;padding:12px 15px;font:800 12px Inter;box-shadow:0 10px 35px rgba(0,0,0,.35),0 0 24px rgba(123,92,255,.3);cursor:pointer}
.cart-button b{display:inline-grid;place-items:center;min-width:21px;height:21px;padding:0 5px;border-radius:999px;background:#071018;color:#fff;margin-left:5px;font-size:10px}
.cart-drawer{position:fixed;inset:0;z-index:110;background:rgba(0,0,0,.68);backdrop-filter:blur(8px)}
.cart-drawer.hidden{display:none}
.cart-backdrop{position:absolute;inset:0}
.cart-panel{position:absolute;left:0;top:0;height:100%;width:min(430px,100%);overflow:auto;background:#0d1120;border-left:1px solid var(--line);box-shadow:25px 0 80px rgba(0,0,0,.4);padding:28px 22px}
.cart-items{display:grid;gap:9px;margin-top:18px}
.cart-item{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:13px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.025)}
.cart-item b{font-size:12px;display:block}.cart-item span{display:block;color:#7e8a9d;font-size:10px;margin-top:4px}.cart-item strong{font:800 14px "Space Grotesk";white-space:nowrap}
.remove-cart{border:0;background:transparent;color:#8792a7;cursor:pointer;font-size:11px;padding:4px}
.cart-total{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);margin-top:18px;padding-top:16px}
.cart-total span{color:#8b96aa;font-size:11px}.cart-total strong{font:800 24px "Space Grotesk"}
.pricing-index{margin-top:28px;padding:18px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018))}
.pricing-index-head{display:flex;justify-content:space-between;align-items:end;gap:15px}.pricing-index-head h3{margin:7px 0 0;font:700 19px "Space Grotesk"}.pricing-total-note{color:#78859b;font-size:10px}
.pricing-index-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.pricing-index-card{display:grid;gap:5px;padding:14px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025)}
.pricing-index-card b{font-size:12px}.pricing-index-card span{color:#9ba6b8;font-size:10px}.pricing-index-card strong{font:800 17px "Space Grotesk";margin-top:2px}
@media(max-width:700px){.pricing-index-grid{grid-template-columns:1fr}.pricing-index-head{align-items:start;flex-direction:column}.cart-button{left:14px;bottom:14px}}

.order-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.order-actions .btn{width:100%;margin-top:0}.order-actions .btn:disabled{opacity:.45;cursor:not-allowed}


/* Payment and checkout polish */
.payment-card.selected{border-color:#55d8c3;box-shadow:0 0 0 1px #55d8c3,0 0 24px rgba(85,216,195,.35);background:linear-gradient(145deg,rgba(85,216,195,.12),rgba(255,255,255,.035));}
.payment-card{transition:.2s ease;min-height:72px;}
.tiny-btn{color:#fff;text-decoration:none;font-weight:800;cursor:pointer;border-color:rgba(139,103,255,.65);box-shadow:0 0 18px rgba(139,103,255,.35),inset 0 0 12px rgba(139,103,255,.08);transition:.2s ease;}
.tiny-btn:hover{transform:translateY(-1px);border-color:#b39aff;box-shadow:0 0 26px rgba(139,103,255,.65),inset 0 0 16px rgba(139,103,255,.12);}
.payment-preview{background:linear-gradient(145deg,rgba(139,103,255,.05),rgba(85,216,195,.03));border-radius:16px;padding:18px;margin-top:14px;}
.cart-total strong{color:#fff;text-shadow:0 0 18px rgba(139,103,255,.35);}
@media(max-width:600px){.plan-grid,.payment-grid{grid-template-columns:1fr}.order-actions{grid-template-columns:1fr;}}

/* Cart + checkout summary polish */
.checkout-summary{margin-top:14px;padding:14px;border:1px solid rgba(255,255,255,.11);border-radius:16px;background:linear-gradient(145deg,rgba(139,103,255,.08),rgba(255,255,255,.025));}
.checkout-summary-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.checkout-summary-title span{font-size:9px;color:#8792a7;letter-spacing:.1em;font-weight:800}.checkout-summary-title strong{font-size:11px;color:#fff}
.checkout-summary-items{display:grid;gap:7px;max-height:190px;overflow:auto;padding-right:2px}
.checkout-summary-item{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:9px 10px;border:1px solid rgba(255,255,255,.07);border-radius:10px;background:rgba(255,255,255,.025)}
.checkout-summary-item b{display:block;font-size:11px}.checkout-summary-item span{display:block;color:#7e8a9d;font-size:9px;margin-top:3px}.checkout-summary-item strong{font-size:12px;white-space:nowrap}
.checkout-summary-total{display:flex;justify-content:space-between;align-items:center;margin-top:11px;padding-top:11px;border-top:1px solid rgba(255,255,255,.1)}
.checkout-summary-total span{font-size:10px;color:#9aa5b7}.checkout-summary-total strong{font:800 20px "Space Grotesk";color:#fff;text-shadow:0 0 18px rgba(139,103,255,.45)}
.cart-button{padding:9px 12px;font-size:11px;box-shadow:8px 10px 30px rgba(0,0,0,.35),0 0 22px rgba(123,92,255,.35)}
.cart-button b{min-width:19px;height:19px}

/* Enhanced Graphics & Effects */
.product-grid .product{animation:fadeInUp .6s ease-out forwards;opacity:0}
.product:nth-child(1){animation-delay:.1s}
.product:nth-child(2){animation-delay:.2s}
.product:nth-child(3){animation-delay:.3s}
.product:nth-child(4){animation-delay:.4s}

.section-heading{animation:fadeInUp .8s ease-out forwards}
.marquee{animation:slideInDown .8s cubic-bezier(.34,.69,.77,1) forwards}
@keyframes slideInDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}

/* Gradient Text Enhancement */
h1 span{background:linear-gradient(90deg,#a26bff,#5ed9c7);background-size:200% 100%;animation:gradientShift 4s ease infinite;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
@keyframes gradientShift{0%,100%{background-position:0% center}50%{background-position:100% center}}

/* Button Glow on Hover */
.btn.primary{box-shadow:0 0 20px rgba(120,90,255,0),0 12px 30px rgba(255,255,255,.08)}
.btn.primary:hover{box-shadow:0 0 30px rgba(120,90,255,.4),0 15px 40px rgba(255,255,255,.15)}

/* Product Hover Glow */
.product{box-shadow:0 0 0 rgba(145,116,255,0)}
.product:hover{box-shadow:0 20px 55px rgba(120,90,255,.25),0 0 30px rgba(120,90,255,.15)}

/* Icon Animations */
.trust-row div b{display:inline-block;animation:bounce 2s ease-in-out infinite}
.trust-row div:nth-child(1) b{animation-delay:0s}
.trust-row div:nth-child(2) b{animation-delay:.2s}
.trust-row div:nth-child(3) b{animation-delay:.4s}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* Smooth Scrolling Enhancement */
html{scroll-behavior:smooth;scroll-padding-top:100px}

/* Enhanced Card Shine Effect */
.hero-card{position:relative;overflow:hidden}
.hero-card::after{content:"";position:absolute;inset:0;background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,.1) 50%,transparent 70%);opacity:0;animation:cardShine 3s infinite}
@keyframes cardShine{0%{transform:translateX(-100%);opacity:0}50%{opacity:1}100%{transform:translateX(100%);opacity:0}}

/* Pulse Effect for CTA */
.btn.primary::after{content:"";position:absolute;inset:-2px;border-radius:12px;background:linear-gradient(90deg,#8e6bff,#4cd8c3);z-index:-1;opacity:0;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:0;transform:scale(1)}50%{opacity:.3;transform:scale(1.05)}}

/* Smooth Product Grid Animation */
.product-grid{animation:fadeInUp .8s ease-out forwards}

/* Enhanced Filter Button Animation */
.filter{transition:all .25s ease}
.filter:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.2)}

/* Smooth Step Animations */
.steps article{animation:fadeInUp .6s ease-out forwards;opacity:0}
.steps article:nth-child(1){animation-delay:.1s}
.steps article:nth-child(2){animation-delay:.2s}
.steps article:nth-child(3){animation-delay:.3s}
.steps article:nth-child(4){animation-delay:.4s}

/* Enhanced Highlights */
.highlight{transition:all .35s cubic-bezier(.34,.69,.77,1)}
.highlight:hover{transform:translateY(-8px);border-color:#a26bff;box-shadow:0 20px 50px rgba(120,90,255,.2)}

/* Smooth Modal Animation */
.modal{animation:fadeIn .3s ease-out}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* Cart Button Pulse */
.cart-button{animation:cartPulse 2s ease-in-out infinite}
@keyframes cartPulse{0%,100%{box-shadow:0 10px 35px rgba(0,0,0,.35),0 0 24px rgba(123,92,255,.3)}50%{box-shadow:0 10px 35px rgba(0,0,0,.35),0 0 40px rgba(123,92,255,.5)}}

/* Link Hover Effects */
a{transition:color .25s ease}
nav a:hover{color:#fff;text-shadow:0 0 10px rgba(120,90,255,.3)}

/* Smooth FAQ Toggle */
details{transition:all .3s ease}
details[open]{border-color:#a26bff}

/* Enhanced Loading State */
@media(prefers-reduced-motion:no-preference){*{scroll-behavior:smooth}}

/* Auth Navigation */
.auth-nav{display:flex;align-items:center;gap:12px}
.auth-btn{background:#7853ff;color:#fff;border:0;padding:11px 15px;border-radius:12px;font-size:11px;font-weight:800;cursor:pointer;transition:all .3s ease}
.auth-btn:hover{background:#8f6bff;box-shadow:0 8px 20px rgba(120,83,255,.3)}
.logout-btn{background:#e84c3d;color:#fff;border:0;padding:11px 15px;border-radius:12px;font-size:11px;font-weight:800;cursor:pointer;transition:all .3s ease}
.logout-btn:hover{background:#f05a4d;box-shadow:0 8px 20px rgba(224,76,61,.3)}
.logout-btn.hidden{display:none}

/* Auth Modal */
.auth-modal{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.8);backdrop-filter:blur(12px);display:grid;place-items:center;padding:20px}
.auth-modal.hidden{display:none}
.auth-backdrop{position:absolute;inset:0;cursor:pointer}
.auth-panel{position:relative;width:min(420px,100%);max-height:90vh;overflow:auto;background:linear-gradient(135deg,#0e1120,#12172a);border:1px solid rgba(255,255,255,.1);box-shadow:0 50px 150px rgba(0,0,0,.6);border-radius:28px;padding:40px 28px}
.auth-modal-close{position:absolute;top:16px;right:16px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:#cfd6e4;width:40px;height:40px;border-radius:12px;font-size:24px;cursor:pointer;transition:all .2s}
.auth-modal-close:hover{background:rgba(255,255,255,.08);border-color:#a26bff}

/* Auth Form */
.auth-form{animation:slideInUp .5s cubic-bezier(.34,.69,.77,1)}
.auth-form.hidden{display:none}
@keyframes slideInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

.auth-header{text-align:center;margin-bottom:30px}
.auth-header h2{font-size:28px;margin:0 0 8px;color:#fff;letter-spacing:-.05em}
.auth-header p{font-size:13px;color:#7e8a9d;margin:0}

/* Form Elements */
.form-group{margin-bottom:18px;display:flex;flex-direction:column}
.form-group label{font-size:12px;font-weight:600;color:#c0c8dd;margin-bottom:7px;letter-spacing:.02em}
.form-group input{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px 14px;color:#fff;font-size:13px;font-family:Inter;transition:all .2s}
.form-group input::placeholder{color:#5f6b82}
.form-group input:focus{outline:0;border-color:#a26bff;background:rgba(162,107,255,.08);box-shadow:0 0 0 2px rgba(162,107,255,.15)}

.form-group input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px rgba(255,255,255,.05) inset;-webkit-text-fill-color:#fff}
.form-group input:-webkit-autofill::first-line{font-family:Inter}

/* Auth Divider */
.auth-divider{text-align:center;color:#5f6b82;font-size:12px;margin:20px 0;position:relative}
.auth-divider::before,.auth-divider::after{content:"";position:absolute;top:50%;width:calc(50% - 16px);height:1px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.1))}
.auth-divider::before{left:0}
.auth-divider::after{right:0}

/* Brand Logos */
.brand-logo{width:80px;height:80px;filter:drop-shadow(0 8px 24px rgba(0,0,0,.3));transition:all .35s cubic-bezier(.34,.69,.77,1)}
.float-logo:hover .brand-logo{transform:scale(1.1);filter:drop-shadow(0 12px 32px rgba(120,83,255,.4))}

/* Responsive Auth */
@media(max-width:600px){
  .auth-panel{padding:28px 18px}
  .auth-header h2{font-size:22px}
  .form-group input{padding:10px 12px;font-size:12px}
}

/* Success Message */
.auth-success{position:fixed;top:20px;right:20px;background:#1DB954;color:white;padding:14px 18px;border-radius:12px;box-shadow:0 10px 30px rgba(29,185,84,.3);animation:slideInRight .4s ease-out;z-index:300;font-size:12px;font-weight:600}
@keyframes slideInRight{from{opacity:0;transform:translateX(400px)}to{opacity:1;transform:translateX(0)}}