:root{
  --primary:#f72578;
  --secondary:#b40a57;
  --bg:#fff6fa;
  --text:#66143d;
  --text2:#8e6078;
  --line:#f3c8da;
  --white:#ffffff;
  --panel:#fffafd;
  --pink-soft:#ffe9f2;
  --pink-soft2:#ffd7e8;
  --gold:#f4c55f;
  --black:#090b0e;
  --shadow:0 18px 42px rgba(174,17,86,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  font-family:Inter,Manrope,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(circle at 2% 14%,rgba(255,107,164,.18),transparent 21rem),
    radial-gradient(circle at 96% 16%,rgba(255,58,135,.16),transparent 23rem),
    linear-gradient(180deg,#fff9fc,#fff2f8 50%,#fffafd);
}
body::before{
  content:"♥   ♡   ♥   ♡   ♥";
  position:fixed;left:-3vw;right:-3vw;top:12vh;
  font-size:clamp(70px,11vw,150px);
  letter-spacing:6vw;color:rgba(247,37,120,.035);
  transform:rotate(-8deg);pointer-events:none;z-index:-1
}
body.nav-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
img{max-width:100%}
.app{width:min(100%,1460px);margin:auto;min-height:100vh;padding:86px 44px 104px}

/* Header */
.top{
  position:fixed;top:0;left:50%;transform:translateX(-50%);
  width:min(100%,1460px);height:74px;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 26px;
  background:rgba(255,252,254,.96);backdrop-filter:blur(18px);
  border-bottom:1px solid #f1cfdd;
  box-shadow:0 8px 28px rgba(159,26,81,.07)
}
.brand{display:flex;align-items:center;gap:12px;font-weight:950;font-size:24px;color:#b80a58;letter-spacing:-.5px}
.brandLogoTile{
  width:52px;height:52px;display:block;overflow:hidden;border-radius:50%;
  background:#fff;border:1px solid #f2bfd3;box-shadow:0 7px 20px rgba(247,37,120,.13)
}
.brandLogoTile img{width:100%;height:100%;object-fit:cover}
.topActions{display:flex;align-items:center;gap:14px}
.guestLogin{
  display:flex;align-items:center;gap:8px;padding:13px 22px;border-radius:15px;
  color:#fff;font-weight:900;background:linear-gradient(135deg,#f72578,#ff5c9b);
  box-shadow:0 10px 22px rgba(247,37,120,.20)
}
.loginUser{font-size:11px}
.navToggle,.profileBtn,.sidebarClose{
  width:48px;height:48px;border:1px solid #f2c5d7;border-radius:15px;background:#fff;color:#e71d6e;
  display:grid;place-items:center;cursor:pointer;font-size:22px;box-shadow:0 7px 20px rgba(164,19,80,.06)
}
.overlay{position:fixed;inset:0;z-index:55;background:rgba(72,12,42,.32);backdrop-filter:blur(5px);border:0;display:none}
.overlay.show{display:block}
.sidebar{
  position:fixed;top:0;left:0;z-index:60;width:min(350px,88vw);height:100vh;padding:18px;
  background:linear-gradient(170deg,#fffafd,#ffe8f2);border-right:1px solid #f1c3d6;
  transform:translateX(-103%);transition:transform .22s ease;overflow:auto;box-shadow:28px 0 60px rgba(92,9,47,.16)
}
.sidebar.open{transform:translateX(0)}
.sidebarHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sidebarLogo{font-size:22px;color:#b90b58;font-weight:950}
.sidebarFullLogo{display:block;width:100px;height:100px;object-fit:contain;margin:0 auto 15px}
.sidebar nav{display:grid;gap:7px}
.sidebar nav a{padding:13px 14px;border-radius:14px;color:#7f4562;display:flex;align-items:center;gap:12px;font-weight:800}
.sidebar nav a.active,.sidebar nav a:hover{background:#fff;border:1px solid #f1bfd3;color:#d51765;box-shadow:0 7px 18px rgba(156,20,77,.07)}
.sideIcon{width:26px;text-align:center;font-size:19px}
.sidebarArt{margin-top:18px;border-radius:22px;padding:20px;min-height:180px;color:#7c214c;background:linear-gradient(145deg,#fff,#ffe1ee);border:1px solid #f2bdd2}
.sidebarArt strong{font:500 30px/1.05 Georgia,serif}.sidebarArt span{color:#e81e6d}.sideHearts{font-size:35px;color:#f43783;margin-top:18px}

/* Common */
.flash{margin:14px 0;padding:12px 14px;border-radius:14px}.flash.success{background:#ebfff3;color:#178248;border:1px solid #b6efd0}.flash.error{background:#fff0f3;color:#be2c54;border:1px solid #ffc3d1}
.muted{color:var(--text2);font-size:13px;line-height:1.5}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:14px;padding:13px 17px;
  background:linear-gradient(90deg,#f41469,#ff5b98);color:#fff;font-weight:900;cursor:pointer;
  box-shadow:0 9px 20px rgba(238,23,105,.18)
}
.btn.full{width:100%;margin-top:14px}.btn.outline{background:#fff;color:#d81a66;border:1px solid #f2bcd1}.btn.gray{background:#90697a}.btn.danger{background:#b82a55}
.hero,.card,.formCard,.dashboardCard{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}
.hero{padding:24px;margin-bottom:16px}.hero h1{margin:8px 0;color:#6f163f}.hero small{color:#ed1f70;font-weight:900;letter-spacing:1.6px}

/* Exact requested guest UI */
.loveHero{
  position:relative;padding:42px 0 6px;text-align:center;overflow:hidden
}
.loveHero::before,.loveHero::after{
  content:"";position:absolute;z-index:-1;width:520px;height:270px;border-radius:50%;
  filter:blur(2px);opacity:.75
}
.loveHero::before{left:-220px;top:34px;background:radial-gradient(ellipse,rgba(255,138,181,.27),transparent 66%)}
.loveHero::after{right:-200px;top:8px;background:radial-gradient(ellipse,rgba(247,37,120,.20),transparent 65%)}
.loveEyebrow{
  display:flex;align-items:center;justify-content:center;gap:16px;color:#e52b72;font-weight:900;font-size:12px;letter-spacing:5px
}
.loveEyebrow span{display:block;width:68px;height:1px;background:#ee79a3}
.loveHero h1,.plansHero h1{
  font-size:clamp(40px,5vw,64px);line-height:1;margin:14px 0 10px;color:#70123d;letter-spacing:-2px
}
.loveHero h1 em,.plansHero h1 em{font-style:normal;color:#ef176b}
.loveHeartDivider{color:#ee176c;font-size:25px;line-height:1;margin:0 0 10px}
.loveHero>p,.plansHero>p{margin:0 auto;color:#8a6376;font-size:16px;max-width:800px}
.floatingHeart{position:absolute;color:rgba(244,36,119,.26);filter:drop-shadow(0 5px 9px rgba(255,74,141,.16));pointer-events:none}
.floatingHeart.h1{font-size:60px;left:2%;top:42px;transform:rotate(-18deg)}
.floatingHeart.h2{font-size:31px;left:17%;top:117px;transform:rotate(12deg)}
.floatingHeart.h3{font-size:49px;right:10%;top:94px}
.floatingHeart.h4{font-size:27px;right:24%;top:28px}
.featureShowcase{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px;text-align:left}
.showCard{
  display:grid;grid-template-columns:58px 1fr 42px;gap:10px;align-items:center;min-height:150px;padding:18px 18px;
  background:rgba(255,255,255,.87);border:1px solid #efbfd2;border-radius:22px;box-shadow:0 13px 30px rgba(158,28,83,.08)
}
.showIcon{
  width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:27px;color:#ed176c;
  background:linear-gradient(145deg,#fff2f7,#ffe2ee);border:1px solid #f2cade
}
.showCard strong{display:block;color:#7b1744;font-size:20px;margin-bottom:5px}
.showCard small{display:block;color:#9c6f83;font-size:13px;line-height:1.4}
.showCard>b{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:21px;
  color:#ed176c;background:#fff1f7;border:1px solid #f2c9d9
}
.showCard:hover{transform:translateY(-2px);box-shadow:0 18px 34px rgba(158,28,83,.12)}

/* Gold / black commission banner — pure CSS */
.teamCommission.premiumCommission{
  position:relative;max-width:1120px;margin:28px auto 6px;padding:20px 28px 26px;border-radius:28px;overflow:hidden;
  border:2px solid #e7b94b;background:
  radial-gradient(circle at 16% 15%,rgba(255,214,114,.17),transparent 12rem),
  radial-gradient(circle at 88% 80%,rgba(255,174,55,.12),transparent 12rem),
  linear-gradient(145deg,#16130c,#050607 58%,#171108);
  box-shadow:0 17px 37px rgba(77,44,5,.20),inset 0 0 0 2px rgba(255,239,181,.09)
}
.teamCommission.premiumCommission::before,.teamCommission.premiumCommission::after{
  content:"♥";position:absolute;bottom:6px;font-size:56px;color:#ff4b91;text-shadow:0 4px 0 #b70b57,0 8px 14px #0007
}
.teamCommission.premiumCommission::before{left:18px;transform:rotate(-10deg)}
.teamCommission.premiumCommission::after{right:18px;transform:rotate(10deg)}
.commissionCrown{
  position:absolute;left:50%;top:10px;transform:translateX(-50%);font-size:35px;color:#ffdb71;
  text-shadow:0 3px 8px #000
}
.teamCommissionTitle{text-align:center;color:#fff2cc;padding:23px 0 11px;font-size:31px;letter-spacing:.3px;text-shadow:0 2px 0 #6d4612}
.commissionRule{height:1px;max-width:770px;margin:0 auto 15px;background:linear-gradient(90deg,transparent,#d9a83f,#d9a83f,transparent)}
.teamCommissionGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative;z-index:2}
.teamCommissionRate{
  min-height:66px;display:flex;align-items:center;justify-content:center;border:2px solid #e9c866;border-radius:14px;
  background:linear-gradient(180deg,#111418,#050607);box-shadow:inset 0 0 18px rgba(255,199,73,.06)
}
.teamCommissionRate span{font-size:22px;font-weight:950;color:#f7cf73;margin-right:8px}
.teamCommissionRate b{font-size:25px;color:#fff}

/* Plan heading & cards */
.section{padding:30px 0 0}
.plansSection{padding-top:24px}
.sectionHead{text-align:center;max-width:820px;margin:0 auto 20px}
.sectionHead small{color:#e72870;font-weight:950;letter-spacing:5px}
.sectionHead h2{font-size:clamp(32px,4vw,48px);margin:8px 0;color:#681139;letter-spacing:-1px}
.sectionHead h2 span{color:#ec1c6c}.sectionHead p{margin:0;color:#90687b}
.homePlans{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.plan{
  position:relative;overflow:hidden;background:rgba(255,255,255,.92);border:1px solid #efbfd2;border-radius:24px;
  box-shadow:0 13px 30px rgba(158,28,83,.09)
}
.planHeartCorner{position:absolute;right:14px;top:13px;font-size:25px;color:#ff9cc2;z-index:4;text-shadow:0 4px 8px #f06a9b4a}
.planMedal{
  position:absolute;left:17px;top:17px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;z-index:4;
  color:#fff4e5;font-size:25px;background:linear-gradient(145deg,#d79a58,#9a4e20);border:3px solid #f7d7a5;
  box-shadow:0 6px 14px rgba(127,54,10,.18)
}
.homePlanCard:nth-child(2n) .planMedal{background:linear-gradient(145deg,#dce2ea,#7b8a9e);border-color:#edf2f7;color:#fff}
.homePlanCard:nth-child(3n) .planMedal{background:linear-gradient(145deg,#ffc343,#d57700);border-color:#ffe4a5}
.homePlanCard:nth-child(4n) .planMedal{background:linear-gradient(145deg,#ff5ea5,#ad0b67);border-color:#ffc3df}
.planTop{
  min-height:178px;padding:24px 18px 15px 82px;background:
  linear-gradient(145deg,rgba(255,255,255,.95),rgba(255,235,244,.94));
  border-bottom:1px solid #f2d4e1
}
.planTop h2{margin:0 0 4px;color:#7a1643;font-size:20px}
.planPrice{font-size:28px;font-weight:950;color:#d51662;margin:3px 0}
.homePlanReward{font-size:13px;color:#f21d70;font-weight:850}
.planDuration{margin-top:11px;padding-top:10px;border-top:1px solid #f0d4e0;color:#8d6277;font-size:12px}
.planBottom{padding:14px 18px 17px;background:#fff}
.miniCommission{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;margin-bottom:8px}
.miniCommission span{font-size:10px;padding:5px 7px;border-radius:8px;background:#fff0f6;color:#a84e75;text-align:center;border:1px solid #f3ccdc}
.emptyPretty{grid-column:1/-1;text-align:center;padding:34px;border:1px solid #f0bfd3;background:#fff;border-radius:22px}.emptyPretty div{font-size:40px;color:#f05291}.emptyPretty strong,.emptyPretty small{display:block}.emptyPretty small{color:#976b80;margin-top:5px}
.heartFooter{text-align:center;padding:36px 10px 8px;color:#8f6077}.heartFooter .footerHeart{font-size:30px;color:#ed1e6d}.heartFooter strong,.heartFooter span{display:block}.heartFooter span{font-size:12px;margin-top:5px}

/* Plans page */
.plansHero{text-align:center;padding:34px 10px 22px}.fullPlansGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fullPlanCard .planTop{padding:22px 18px 18px 80px}.fullPlanCard .planBottom{padding:15px 18px 18px}
.planRows{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.planRows>div{padding:10px;border-radius:12px;background:#fff4f8;border:1px solid #f1d1df}
.planRows span{display:block;font-size:10px;color:#966b7f}.planRows b{display:block;margin-top:3px;color:#76173f}
.badges{display:flex;gap:7px;flex-wrap:wrap}.badge{font-size:10px;font-weight:900;padding:6px 9px;border-radius:999px;background:#fff0f6;border:1px solid #f2c3d6;color:#d91766}
.levelRates{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:11px}.levelRate{padding:8px 4px;text-align:center;border-radius:11px;background:#fff5f9;border:1px solid #f2d1df}.levelRate small{display:block;font-size:9px;color:#9a7183}.levelRate b{display:block;color:#db1966;font-size:13px}

/* Logged-in dashboard */
.publicHero{padding:27px;border:1px solid #efbfd2;border-radius:26px;background:linear-gradient(145deg,#fff,#ffeaf3);box-shadow:var(--shadow)}
.publicHero h1{font-size:38px;margin:8px 0;color:#6f163f}.publicHero h1 span{color:#ec1b6a}
.trust{display:flex;gap:8px;align-items:center;color:#9e7083;font-size:11px}.trust b{color:#dd1a65}.dotSep{width:4px;height:4px;border-radius:50%;background:#f2a0c1}
.userWelcome{display:grid;grid-template-columns:92px 1fr;gap:15px;padding:18px;margin-top:14px}
.avatar{width:86px;height:86px;border-radius:50%;display:grid;place-items:center;font-size:37px;color:#ec1f6e;background:linear-gradient(145deg,#fff,#ffdce9);border:1px solid #f1bdd1}
.userWelcome h2{margin:3px 0}.ref{padding:10px;margin-top:8px;border:1px solid #f1c6d7;border-radius:12px;background:#fff6fa}.ref span{font-size:12px;color:#93677b}
.balance{margin-top:14px;padding:24px;border-radius:27px;text-align:center;color:#fff;background:radial-gradient(circle at 85% 10%,#ff91bb,transparent 10rem),linear-gradient(135deg,#d80861,#ff4c91);box-shadow:0 18px 38px rgba(211,16,99,.22)}
.balance b{display:block;font-size:42px;margin:5px 0}.balance .muted{color:#ffe8f0!important}
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:14px}.quick a{padding:16px 8px;text-align:center;border-radius:18px;background:#fff;border:1px solid #f0bfd2;color:#7b234c;font-weight:850}.quick span{display:block;font-size:26px;margin-bottom:6px}
.stats,.teamSummary{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.stat{padding:16px;min-height:105px;background:#fff;border:1px solid #efc4d5;border-radius:18px}.stat.red{background:linear-gradient(145deg,#fff1f7,#ffe6f0)}.stat b{display:block;font-size:21px;margin:7px 0;color:#6b173c}

/* Forms / payments / tables */
.formCard{padding:18px;margin-bottom:16px}.formCard label{display:block;font-size:13px;font-weight:850;margin:12px 0 7px}.formCard input,.formCard select,.formCard textarea{width:100%;padding:14px;border:1px solid #efbfd2;border-radius:13px;background:#fffafd;color:#5f1738;outline:none}
.formCard input:focus,.formCard select:focus,.formCard textarea:focus{border-color:#ef1b6c;box-shadow:0 0 0 3px #f7257810}.formCard textarea{min-height:90px;resize:vertical}
.paymentMethodGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:16px}.paymentMethodCard{padding:17px;border:1px solid #f0bfd2;border-radius:22px;background:#fff;box-shadow:var(--shadow)}.paymentMethodHead{display:flex;align-items:center;gap:12px}.paymentMethodHead h3{margin:0}.paymentMethodHead span{font-size:11px;color:#987087}.paymentBrandLogo{width:78px;height:78px;object-fit:contain;padding:6px;border:1px solid #f1d2df;border-radius:16px;background:#fff}.paymentBrandFallback{width:64px;height:64px;border-radius:16px;display:grid;place-items:center;background:#ffe3ef;color:#e61a69;font-size:26px}.paymentDetails{display:grid;gap:8px;margin-top:12px;padding:12px;border-radius:14px;background:#fff5f9;border:1px solid #f3d4e1}.paymentDetails div{display:flex;justify-content:space-between;gap:12px}.paymentDetails span{font-size:11px;color:#9a7084}.paymentDetails b{text-align:right;word-break:break-word}.paymentQrWrap{text-align:center}.qr{display:block;max-width:220px;max-height:220px;margin:12px auto;padding:8px;border-radius:16px;background:#fff;border:1px solid #efd0dc}
.tableWrap{overflow:auto;border:1px solid #efc4d5;border-radius:18px;background:#fff}.table{width:100%;border-collapse:collapse;min-width:600px}.table th,.table td{padding:12px;border-bottom:1px solid #f5dce6;font-size:13px;text-align:left}.table th{background:#fff0f6;color:#7a234a}.status{font-weight:900}.status.pending{color:#f09b0d}.status.approved,.status.active{color:#15975a}.status.rejected,.status.banned{color:#d72b61}
.notice{margin-top:14px;padding:13px;border:1px dashed #f0b7cc;border-radius:15px;background:#fff4f8;color:#91677a;font-size:12px;line-height:1.5}
.levelTabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}.levelTab{padding:11px;text-align:center;border-radius:13px;background:#fff;border:1px solid #efc2d4;color:#95677c;font-weight:850}.levelTab.active{color:#fff;background:linear-gradient(135deg,#f51d70,#ff5796);border-color:#f51d70}

/* Auth */
.authWrap{max-width:520px;margin:36px auto}.heroMini{text-align:center}.heroMini h1{font-size:34px;margin:8px 0}.heroMini small{color:#ec1c6c;font-weight:900;letter-spacing:2px}

/* Bottom navigation */
.bottom{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);z-index:45;width:min(100%,1460px);
  display:grid;grid-template-columns:repeat(5,1fr);gap:5px;padding:10px 20px 13px;
  background:rgba(255,252,254,.97);backdrop-filter:blur(17px);border-top:1px solid #f1c5d7;
  box-shadow:0 -10px 28px rgba(154,24,80,.08)
}
.bottom.guest{grid-template-columns:repeat(4,1fr);max-width:960px;border-radius:28px 28px 0 0}
.nav{padding:8px 5px;border-radius:15px;text-align:center;color:#946a7d;font-size:11px}.nav i{display:block;font-style:normal;font-size:21px;margin-bottom:3px}.nav.active,.nav:hover{background:linear-gradient(145deg,#ffe9f2,#ffd9e8);color:#df1765}

@media(max-width:1050px){
  .app{padding-left:22px;padding-right:22px}
  .featureShowcase,.homePlans{grid-template-columns:repeat(2,1fr)}
  .fullPlansGrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .app{padding:78px 13px 98px}
  .top{height:68px;padding:9px 13px}.brand{font-size:18px}.brandLogoTile{width:46px;height:46px}.guestLogin{padding:11px 14px}
  .loveHero{padding-top:27px}.loveEyebrow{font-size:9px;letter-spacing:2px;gap:8px}.loveEyebrow span{width:34px}
  .loveHero h1,.plansHero h1{font-size:39px;letter-spacing:-1px}.loveHero>p,.plansHero>p{font-size:14px}
  .featureShowcase{grid-template-columns:1fr 1fr;gap:10px}.showCard{grid-template-columns:46px 1fr;min-height:138px;padding:14px}.showCard>b{display:none}.showIcon{width:43px;height:43px;font-size:22px}.showCard strong{font-size:17px}.showCard small{font-size:11px}
  .teamCommission.premiumCommission{padding:17px 14px 20px}.teamCommissionTitle{font-size:23px}.commissionCrown{font-size:27px}.teamCommissionGrid{gap:7px}.teamCommissionRate{min-height:54px}.teamCommissionRate span{font-size:16px}.teamCommissionRate b{font-size:19px}
  .homePlans,.fullPlansGrid{grid-template-columns:repeat(2,1fr)}.planTop{padding-left:68px}.planMedal{width:44px;height:44px;left:14px}.planPrice{font-size:23px}
  .paymentMethodGrid{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}.teamSummary{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  .brandName{font-size:16px}.guestLogin{font-size:12px;padding:10px 12px}
  .featureShowcase,.homePlans,.fullPlansGrid{grid-template-columns:1fr}
  .teamCommissionGrid{grid-template-columns:repeat(2,1fr)}
  .teamCommission.premiumCommission::before,.teamCommission.premiumCommission::after{font-size:38px}
  .sectionHead h2{font-size:32px}.planTop{min-height:auto}
  .stats{grid-template-columns:1fr 1fr}.levelRates,.levelTabs{grid-template-columns:repeat(2,1fr)}
}


/* =========================================================
   HEART-PK.ONLINE — 3D + ANIMATED ICON SYSTEM
   ========================================================= */
@keyframes heartFloat3D {
  0%,100% { transform:translateY(0) rotateX(0deg) rotateY(0deg) scale(1); }
  50% { transform:translateY(-7px) rotateX(7deg) rotateY(-7deg) scale(1.035); }
}
@keyframes softPulse3D {
  0%,100% { transform:translateZ(0) scale(1); filter:drop-shadow(0 8px 10px rgba(230,24,105,.16)); }
  50% { transform:translateZ(12px) scale(1.065); filter:drop-shadow(0 13px 17px rgba(230,24,105,.28)); }
}
@keyframes iconBounce3D {
  0%,100% { transform:translateY(0) rotate(-1deg) scale(1); }
  45% { transform:translateY(-6px) rotate(2deg) scale(1.04); }
  60% { transform:translateY(-3px) rotate(-1deg) scale(1.02); }
}
@keyframes shineSweep {
  0% { transform:translateX(-170%) rotate(18deg); opacity:0; }
  18% { opacity:.55; }
  45%,100% { transform:translateX(220%) rotate(18deg); opacity:0; }
}
@keyframes crownFloat {
  0%,100% { transform:translateX(-50%) translateY(0) rotate(-2deg); }
  50% { transform:translateX(-50%) translateY(-6px) rotate(2deg); }
}
@keyframes floatingHeartDrift {
  0%,100% { transform:translateY(0) rotate(-8deg) scale(1); opacity:.22; }
  50% { transform:translateY(-13px) rotate(6deg) scale(1.08); opacity:.38; }
}

/* Logo becomes glossy / floating without replacing the user's real logo */
.brandLogoTile{
  perspective:700px;
  transform-style:preserve-3d;
  animation:softPulse3D 3.6s ease-in-out infinite;
  position:relative;
  isolation:isolate;
}
.brandLogoTile::after{
  content:"";
  position:absolute;
  inset:-20% auto -20% -42%;
  width:35%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);
  transform:rotate(18deg);
  animation:shineSweep 4.8s ease-in-out infinite;
  pointer-events:none;
}
.brandLogoTile img{
  transform:translateZ(14px);
}
.brand:hover .brandLogoTile{
  transform:rotateY(-10deg) rotateX(6deg) scale(1.06);
}

/* Hero hearts are now gently animated */
.floatingHeart{
  animation:floatingHeartDrift 4.2s ease-in-out infinite;
}
.floatingHeart.h2{animation-delay:.7s}
.floatingHeart.h3{animation-delay:1.3s}
.floatingHeart.h4{animation-delay:2s}

/* Feature icons: glossy 3D buttons */
.showIcon{
  position:relative;
  overflow:hidden;
  transform-style:preserve-3d;
  background:
    radial-gradient(circle at 30% 22%,#ffffff 0 12%,transparent 13%),
    linear-gradient(145deg,#fff8fb 4%,#ffb9d4 48%,#f71d70 100%);
  color:#fff;
  border:1px solid #ff8eb8;
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.9),
    inset 0 -7px 12px rgba(173,4,76,.19),
    0 9px 16px rgba(196,16,91,.18);
  text-shadow:0 2px 1px rgba(114,2,50,.3);
  animation:iconBounce3D 3.5s ease-in-out infinite;
}
.showCard:nth-child(2) .showIcon{animation-delay:.35s}
.showCard:nth-child(3) .showIcon{animation-delay:.7s}
.showCard:nth-child(4) .showIcon{animation-delay:1.05s}
.showIcon::after{
  content:"";
  position:absolute;
  top:-20%;bottom:-20%;left:-48%;
  width:35%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.88),transparent);
  transform:rotate(18deg);
  animation:shineSweep 4.2s ease-in-out infinite;
}
.showCard{
  transform-style:preserve-3d;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.showCard:hover{
  transform:perspective(900px) translateY(-6px) rotateX(2deg) rotateY(-2deg);
  border-color:#f47eaa;
  box-shadow:0 23px 42px rgba(158,28,83,.16);
}
.showCard:hover .showIcon{
  transform:translateZ(22px) scale(1.08) rotate(-4deg);
}

/* Commission crown and rate boxes */
.commissionCrown{
  animation:crownFloat 2.8s ease-in-out infinite;
  filter:drop-shadow(0 6px 8px rgba(255,201,77,.32));
}
.teamCommissionRate{
  transform-style:preserve-3d;
  transition:transform .2s ease,box-shadow .2s ease;
}
.teamCommissionRate:hover{
  transform:perspective(700px) translateY(-4px) rotateX(5deg);
  box-shadow:0 10px 21px rgba(234,184,66,.19),inset 0 0 21px rgba(255,199,73,.1);
}

/* Plan medals / heart accents */
.planMedal{
  overflow:hidden;
  transform-style:preserve-3d;
  animation:heartFloat3D 4s ease-in-out infinite;
}
.homePlanCard:nth-child(2n) .planMedal,
.fullPlanCard:nth-child(2n) .planMedal{animation-delay:.55s}
.homePlanCard:nth-child(3n) .planMedal,
.fullPlanCard:nth-child(3n) .planMedal{animation-delay:1.05s}
.planMedal::after{
  content:"";
  position:absolute;
  top:-20%;bottom:-20%;left:-58%;
  width:42%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  transform:rotate(20deg);
  animation:shineSweep 4s ease-in-out infinite;
}
.planHeartCorner{
  animation:softPulse3D 2.7s ease-in-out infinite;
}
.plan{
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
  transform-style:preserve-3d;
}
.plan:hover{
  transform:perspective(1000px) translateY(-7px) rotateX(1.7deg);
  border-color:#f49ab9;
  box-shadow:0 24px 44px rgba(158,28,83,.16);
}

/* Payment brand logos stay authentic but gain a floating 3D card treatment */
.paymentBrandLogo{
  transition:transform .22s ease,box-shadow .22s ease;
  animation:heartFloat3D 4.8s ease-in-out infinite;
  box-shadow:
    0 8px 18px rgba(121,39,74,.11),
    inset 0 1px 0 rgba(255,255,255,.8);
}
.paymentMethodCard:nth-child(2n) .paymentBrandLogo{animation-delay:.8s}
.paymentMethodCard:hover .paymentBrandLogo{
  transform:perspective(700px) rotateY(-8deg) rotateX(5deg) scale(1.05);
  box-shadow:0 14px 25px rgba(121,39,74,.16);
}

/* Logged-in avatar / quick icons */
.avatar{
  animation:softPulse3D 3.8s ease-in-out infinite;
  box-shadow:
    inset 0 4px 8px rgba(255,255,255,.85),
    0 12px 22px rgba(225,26,105,.12);
}
.quick a{
  transition:transform .2s ease,box-shadow .2s ease;
}
.quick a span{
  animation:iconBounce3D 3.7s ease-in-out infinite;
  filter:drop-shadow(0 6px 8px rgba(228,29,105,.12));
}
.quick a:nth-child(2) span{animation-delay:.45s}
.quick a:nth-child(3) span{animation-delay:.9s}
.quick a:hover{
  transform:translateY(-5px);
  box-shadow:0 15px 27px rgba(154,24,80,.12);
}

/* Bottom navigation icons */
.nav i{
  transition:transform .2s ease,filter .2s ease;
  transform-style:preserve-3d;
}
.nav:hover i,.nav.active i{
  transform:translateY(-3px) scale(1.18) rotateX(8deg);
  filter:drop-shadow(0 5px 7px rgba(231,23,101,.18));
}

/* Sidebar icons */
.sideIcon{
  display:inline-grid;
  place-items:center;
  transition:transform .2s ease;
}
.sidebar nav a:hover .sideIcon,
.sidebar nav a.active .sideIcon{
  transform:translateZ(12px) scale(1.18) rotate(-4deg);
}

/* Footer heart */
.footerHeart{
  animation:softPulse3D 2.9s ease-in-out infinite;
}

/* Accessibility: stop movement for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .brandLogoTile,.floatingHeart,.showIcon,.commissionCrown,.planMedal,.planHeartCorner,
  .paymentBrandLogo,.avatar,.quick a span,.footerHeart{
    animation:none!important;
  }
  .showCard,.plan,.teamCommissionRate,.quick a,.nav i,.sideIcon,.paymentBrandLogo{
    transition:none!important;
  }
}


/* V5 targeted fixes — preserve existing Heart-pk theme */
.planAssetMedal{padding:0;background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important;width:66px;height:66px}
.planIconImg{display:block;width:66px;height:66px;object-fit:contain;filter:drop-shadow(0 9px 12px rgba(139,18,68,.18));animation:heartFloat3D 4.6s ease-in-out infinite}
.homePlanCard:nth-child(2n) .planIconImg,.fullPlanCard:nth-child(2n) .planIconImg{animation-delay:.5s}
.homePlanCard:nth-child(3n) .planIconImg,.fullPlanCard:nth-child(3n) .planIconImg{animation-delay:1s}

.copyRow{display:flex!important;align-items:center;gap:10px}
.copyRow span{flex:1;min-width:0}
.copyBtn,.miniCopyBtn{
  border:1px solid #f0bad0;background:linear-gradient(145deg,#fff,#ffe5f0);color:#d71967;
  font-weight:900;border-radius:11px;padding:9px 13px;cursor:pointer;white-space:nowrap
}
.copyBtn:hover,.miniCopyBtn:hover,.copyBtn.copied,.miniCopyBtn.copied{background:#f31d70;color:#fff;border-color:#f31d70}
.miniCopyBtn{padding:6px 9px;font-size:11px;margin-left:8px}
.accountCopyLine{align-items:center!important}
.accountCopyLine b{margin-left:auto}

.whatsappFloat{
  position:fixed;right:24px;bottom:102px;z-index:80;width:62px;height:62px;border-radius:50%;
  display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#31e26f,#0ca84d);
  box-shadow:0 14px 30px rgba(12,168,77,.34),inset 0 2px 3px rgba(255,255,255,.45);
  touch-action:none;user-select:none;cursor:grab;animation:waPulse 2.4s ease-in-out infinite
}
.whatsappFloat:active{cursor:grabbing}
.whatsappFloat svg{width:35px;height:35px;filter:drop-shadow(0 3px 2px rgba(0,0,0,.16))}
.whatsappFloat::before{content:"";position:absolute;inset:-7px;border:2px solid rgba(36,211,102,.25);border-radius:50%;animation:waRing 2.4s ease-out infinite}
@keyframes waPulse{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.05)}}
@keyframes waRing{0%{transform:scale(.75);opacity:.8}75%,100%{transform:scale(1.35);opacity:0}}

.purchasedPlansSection{margin-top:8px}
.myPlansGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.myPlanCard{display:grid;grid-template-columns:72px 1fr auto;gap:12px;align-items:center;background:#fff;border:1px solid #efc4d6;border-radius:18px;padding:14px;box-shadow:0 10px 24px rgba(155,23,80,.07)}
.myPlanIcon{width:66px;height:66px;object-fit:contain;filter:drop-shadow(0 7px 9px rgba(139,18,68,.13))}
.myPlanInfo strong{display:block;color:#761940;font-size:17px;margin-bottom:4px}
.myPlanInfo span{display:block;color:#986d80;font-size:11px;line-height:1.55}

@media(max-width:700px){
  .planAssetMedal,.planIconImg{width:56px;height:56px}
  .myPlansGrid{grid-template-columns:1fr}
  .myPlanCard{grid-template-columns:58px 1fr auto}
  .myPlanIcon{width:54px;height:54px}
  .whatsappFloat{width:56px;height:56px;right:16px;bottom:92px}
  .whatsappFloat svg{width:31px;height:31px}
}