:root{
    /* Modern premium palette: clean cool-neutral space, deep ink text,
       deep emerald accent (with a brighter emerald for gradients/highlights)
       in place of the old bright coral/gold. */
    --bg:#F6F8F7;
    --surface:#FFFFFF;
    --surface-2:#EDF3F0;
    --coral:#0E6E4F;
    --coral-dark:#0A4F38;
    --gold:#17A374;
    --text:#14181B;
    --muted:#667085;
    --line:#E3E8E6;
    --shadow-sm:0 2px 10px rgba(20,24,27,0.05);
    --shadow-md:0 10px 26px -10px rgba(20,24,27,0.16);
    --shadow-lg:0 20px 48px -16px rgba(20,24,27,0.22);
    --ease:cubic-bezier(.4,0,.2,1);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Manrope',sans-serif;
    overflow-x:hidden;
  }
  h1,h2,h3,.display{
    font-family:'Fraunces',serif;
    font-weight:900;
    letter-spacing:-0.01em;
    line-height:1.05;
  }
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 24px;}

  /* perforated film-strip motif */
  .perf{
    height:14px;
    width:100%;
    background-image: radial-gradient(circle, var(--bg) 4px, transparent 4.5px);
    background-size: 24px 14px;
    background-position: 0 0;
    background-color: var(--surface);
  }
  .perf.flip{transform:rotate(180deg);}

  /* NAV — glossy frosted-glass header (slim) */
  header{
    position:sticky; top:0; z-index:50;
    background:linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.80));
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    border-bottom:1px solid rgba(233,233,242,0.65);
    box-shadow:0 1px 0 rgba(255,255,255,0.7) inset, 0 8px 22px -18px rgba(20,24,27,0.16);
  }
  header::before{
    content:'';
    position:absolute; left:0; right:0; top:0; height:2px;
    background:linear-gradient(90deg, transparent, var(--coral) 22%, var(--gold) 50%, var(--coral) 78%, transparent);
    opacity:0.8;
  }
  nav{
    position:relative;
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 24px; max-width:1180px; margin:0 auto; gap:14px;
    min-height:52px;
  }
  .logo{font-family:'Fraunces',serif; font-weight:800; font-size:1.28rem; letter-spacing:-0.01em; color:var(--text); text-shadow:0 1px 0 rgba(255,255,255,0.6); transition:opacity .2s ease; white-space:nowrap; flex:0 0 auto;}
  .logo:hover{opacity:0.82;}
  .logo span{
    color:var(--coral);
  }
  .nav-links{display:flex; gap:26px; font-weight:600; font-size:0.86rem;}
  .nav-links a{position:relative; opacity:0.72; transition:opacity .2s ease; padding:4px 0;}
  .nav-links a::after{
    content:''; position:absolute; left:0; right:0; bottom:-3px; height:2px; border-radius:2px;
    background:linear-gradient(90deg, var(--coral), var(--gold));
    transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
  }
  .nav-links a:hover{opacity:1; color:var(--gold);}
  .nav-links a:hover::after{transform:scaleX(1);}
  .nav-cta{
    background:var(--coral); color:#fff; font-weight:800;
    padding:8px 18px; border-radius:100px; font-size:0.85rem;
    border:none; cursor:pointer; flex:0 0 auto;
  }
  .wallet-chip{
    display:none; align-items:center; gap:5px; flex:0 0 auto; white-space:nowrap;
    padding:7px 12px; border-radius:100px; color:#fff; font-weight:800; font-size:0.78rem;
    background:linear-gradient(135deg, var(--coral), var(--gold));
    box-shadow:0 4px 12px -4px rgba(14,110,79,0.42);
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .wallet-chip svg{flex:0 0 auto; width:14px; height:14px;}
  .wallet-chip:hover{box-shadow:0 6px 15px -4px rgba(14,110,79,0.5);}
  .wallet-chip:active{transform:scale(0.95);}
  .avatar-btn{
    position:relative;
    flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:var(--coral); color:#fff; font-weight:800; font-size:0.85rem; text-transform:uppercase;
    overflow:hidden;
    border:2px solid var(--surface);
    box-shadow:0 0 0 2px var(--coral), 0 3px 10px -2px rgba(14,110,79,0.32), inset 0 1px 1px rgba(255,255,255,0.4);
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .avatar-btn::after{
    content:'';
    position:absolute; inset:0; border-radius:50%; pointer-events:none;
    background:linear-gradient(140deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.12) 30%, transparent 55%);
  }
  .avatar-btn:active{transform:scale(0.93);}
  .avatar-btn.guest{background:var(--surface-2); color:var(--muted); border:1.5px solid var(--line); box-shadow:0 2px 6px rgba(20,24,27,0.08);}
  .avatar-btn svg.guest-icon{width:19px; height:19px;}
  .avatar-btn svg:not(.guest-icon){width:100%; height:100%; display:block;}
  .avatar-btn img{width:100%; height:100%; object-fit:cover; border-radius:50%; display:block;}

  /* HERO */
  .hero{
    padding:96px 24px 64px;
    display:grid; grid-template-columns:1.1fr 1fr; gap:64px; align-items:center;
    max-width:1180px; margin:0 auto;
  }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    color:var(--gold); font-weight:700; font-size:0.8rem;
    letter-spacing:0.14em; text-transform:uppercase; margin-bottom:18px;
  }
  .eyebrow::before{content:"●"; font-size:0.6rem;}
  .hero h1{font-size:clamp(2.4rem, 5vw, 3.6rem); margin-bottom:20px;}
  .hero h1 em{font-style:normal; color:var(--coral);}
  .hero p{color:var(--muted); font-size:1.1rem; max-width:480px; margin-bottom:32px; line-height:1.6;}
  .hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}
  .btn-primary{
    background:var(--coral); color:#fff; font-weight:800; padding:15px 28px;
    border-radius:100px; font-size:1rem; display:inline-block; transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  }
  .btn-primary:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}
  .btn-buynow{
    background:linear-gradient(135deg,var(--gold),var(--coral)); color:#fff; font-weight:800;
    padding:16px 28px; border-radius:100px; font-size:1.02rem;
    display:flex; align-items:center; justify-content:center; gap:9px;
    box-shadow:0 10px 22px rgba(14,110,79,0.28); transition:transform .15s, box-shadow .15s;
  }
  .btn-buynow svg{flex:0 0 auto;}
  .btn-buynow:hover{transform:translateY(-2px); box-shadow:0 14px 26px rgba(14,110,79,0.34);}
  .btn-ghost{
    border:1.5px solid var(--line); color:var(--text); font-weight:700; padding:14px 26px;
    border-radius:100px; font-size:1rem; display:inline-block; transition:border-color .3s var(--ease), color .3s var(--ease);
  }
  .btn-ghost:hover{border-color:var(--coral); color:var(--coral);}
  .hero-stats{display:flex; gap:32px; margin-top:44px;}
  .stat b{font-family:'Fraunces',serif; font-size:1.6rem; display:block; color:var(--gold);}
  .stat span{color:var(--muted); font-size:0.85rem;}

  /* Reel deck (signature element) */
  .deck{position:relative; height:460px; max-width:100%; transform-origin:top center;}
  .reel-card{
    position:absolute; width:190px; height:340px; border-radius:22px;
    background:linear-gradient(160deg, var(--surface-2), var(--surface));
    border:5px solid #fff; box-shadow:0 24px 48px rgba(20,24,27,0.18);
    overflow:hidden;
  }
  .reel-card .thumb{
    position:absolute; inset:0; opacity:0.9;
  }
  .reel-card .tag{
    position:absolute; top:12px; left:12px; background:rgba(23,16,24,0.7);
    padding:4px 10px; border-radius:100px; font-size:0.7rem; font-weight:700;
  }
  .reel-card .price{
    position:absolute; bottom:14px; left:14px; background:var(--coral); color:#fff;
    font-weight:800; padding:6px 12px; border-radius:100px; font-size:0.85rem;
  }
  .reel-card .play{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,0.18);
    display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px);
  }
  .play::before{content:""; border-left:14px solid white; border-top:9px solid transparent; border-bottom:9px solid transparent; margin-left:4px;}
  .c1{left:0; top:60px; transform:rotate(-9deg); background:linear-gradient(160deg,#1B2620,#0C1310);}
  .c2{left:130px; top:0; transform:rotate(3deg); z-index:2; background:linear-gradient(160deg,#16211D,#0A100D);}
  .c3{left:260px; top:70px; transform:rotate(11deg); background:linear-gradient(160deg,#122019,#08110D);}

  /* Category strip */
  .cats{
    display:flex; gap:14px; overflow-x:auto; padding:8px 24px 32px; max-width:1180px; margin:0 auto;
    scrollbar-width:none;
  }
  .cats::-webkit-scrollbar{display:none;}
  .cat-chip{
    flex:0 0 auto; padding:10px 22px; border-radius:100px; background:var(--surface);
    border:1px solid var(--line); font-weight:700; font-size:0.9rem; white-space:nowrap; cursor:pointer;
    transition:.15s;
  }
  .cat-chip.active, .cat-chip:hover{background:var(--coral); color:#fff; border-color:var(--coral);}

  section{padding:96px 0;}
  .section-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:44px; flex-wrap:wrap; gap:12px;}
  .section-head h2{font-size:clamp(1.7rem,3vw,2.4rem);}
  .section-head p{color:var(--muted); max-width:420px;}
  .see-all{font-weight:700; color:var(--gold); font-size:0.9rem; white-space:nowrap;}

  /* Promo video banner */
  .promo-wrap{padding:20px 16px 0;}
  .promo-card{
    position:relative; border-radius:20px; overflow:hidden; max-width:1180px; margin:0 auto;
    background:linear-gradient(135deg,#152420,#070E0C);
    aspect-ratio:16/9; box-shadow:0 14px 34px rgba(20,24,27,0.18);
  }
  .promo-top{position:absolute; top:16px; left:16px; right:16px; display:flex; align-items:center; gap:12px; z-index:3;}
  .promo-avatar{width:44px; height:44px; border-radius:50%; background:linear-gradient(140deg,var(--gold),var(--coral)); flex:0 0 auto; border:2px solid rgba(255,255,255,0.5);}
  .promo-top h4{color:#fff; font-size:1rem; font-weight:800;}
  .promo-top span{color:rgba(255,255,255,0.75); font-size:0.8rem;}
  .promo-play{
    position:absolute; top:44%; left:50%; transform:translate(-50%,-50%); z-index:3;
    width:64px; height:64px; border-radius:50%; background:var(--coral);
    display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(0,0,0,0.35); cursor:pointer;
  }
  .promo-play::before{content:""; border-left:20px solid #fff; border-top:12px solid transparent; border-bottom:12px solid transparent; margin-left:5px;}
  .promo-bg-text{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    opacity:0.14; font-family:'Fraunces',serif; font-weight:900; font-size:4.6rem; color:#fff;
    letter-spacing:-0.02em; white-space:nowrap;
  }
  .promo-bottom{
    position:absolute; left:0; right:0; bottom:0; z-index:3;
    background:linear-gradient(0deg, rgba(15,12,8,0.92), rgba(15,12,8,0));
    padding:34px 16px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px;
  }
  .promo-icons{display:flex; gap:10px;}
  .promo-icon-btn{
    width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.16);
    display:flex; align-items:center; justify-content:center; color:#fff; font-size:1rem; flex:0 0 auto;
  }
  .promo-yt{
    background:var(--coral); color:#fff; font-weight:800; padding:10px 18px; border-radius:100px;
    display:flex; align-items:center; gap:8px; font-size:0.85rem; white-space:nowrap; flex:0 0 auto;
  }
  .promo-unmute{
    position:absolute; bottom:14px; right:14px; z-index:4;
    width:38px; height:38px; border-radius:50%; background:rgba(0,0,0,0.55);
    display:flex; align-items:center; justify-content:center; color:#fff; cursor:pointer;
  }

  /* Notice ticker */
  .notice-bar{
    background:var(--coral); color:#fff; display:flex; align-items:center; gap:12px;
    padding:10px 16px; overflow:hidden; margin:14px 16px 0; border-radius:12px;
    max-width:1148px; margin-inline:auto;
  }
  .notice-icon{flex:0 0 auto; font-size:1.05rem;}
  .notice-track{overflow:hidden; flex:1; white-space:nowrap;}
  .notice-track span{display:inline-block; padding-left:100%; animation:noticeScroll 18s linear infinite; font-weight:600; font-size:0.9rem;}
  @keyframes noticeScroll{from{transform:translateX(0);} to{transform:translateX(-100%);}}

  /* Icon grid menu */
  .icon-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:24px 16px 4px;
    max-width:1180px; margin:0 auto;
  }
  .icon-tile{
    position:relative; background:var(--surface); border:1px solid var(--line); border-radius:16px;
    padding:22px 10px; text-align:center; box-shadow:0 6px 16px rgba(20,24,27,0.05);
    display:flex; flex-direction:column; align-items:center; gap:10px; cursor:pointer; transition:.15s;
    text-decoration:none; color:var(--text);
  }
  .icon-tile{transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);}
  .icon-tile:hover{transform:translateY(-4px); border-color:var(--coral); box-shadow:var(--shadow-md);}
  .icon-tile .ic{
    width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center;
    flex:0 0 auto;
  }
  .icon-tile .ic svg{width:22px; height:22px;}
  .icon-tile span{font-weight:700; font-size:0.85rem; color:var(--text);}
  .ic-live{background:rgba(14,110,79,0.08); color:var(--coral);}
  .ic-game{background:rgba(14,110,79,0.08); color:var(--coral);}
  .ic-videopack{background:rgba(14,110,79,0.08); color:var(--coral);}

  /* ---------- Video Packs page — plan-card style tiers ---------- */
  .vp-pack-block{margin-bottom:36px;}
  .vp-pack-header{display:flex; align-items:center; gap:12px; margin-bottom:16px;}
  .vp-pack-thumb{width:56px; height:56px; border-radius:12px; background-size:cover; background-position:center; flex-shrink:0; box-shadow:0 4px 10px rgba(20,24,27,0.1);}
  .vp-pack-title{font-size:1.05rem; font-weight:800;}
  .vp-pack-sub{font-size:0.78rem; color:var(--muted); margin-top:2px;}
  .vp-tier-cards{display:flex; flex-direction:column; gap:16px; max-width:420px;}
  .vp-tier-cards .plan-card.out-of-stock{opacity:0.55;}
  .vp-tier-cards .plan-subscribe-btn:disabled{opacity:0.5; cursor:not-allowed;}
  .delivered-link-row{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:9px 12px; border-radius:10px; background:var(--surface-2); font-size:0.82rem; font-weight:700;
  }
  .delivered-link-row a{color:var(--coral); text-decoration:none; font-weight:800; font-size:0.78rem;}
  .ic-premium{background:rgba(14,110,79,0.08); color:var(--coral);}
  .ic-course{background:rgba(14,110,79,0.08); color:var(--coral);}
  .ic-product{background:rgba(14,110,79,0.08); color:var(--coral);}
  .ic-support{background:rgba(14,110,79,0.08); color:var(--coral);}
  .ic-download{background:rgba(14,110,79,0.08); color:var(--coral);}
  .ic-notice{background:rgba(14,110,79,0.08); color:var(--coral);}
  .ic-more{background:rgba(14,110,79,0.08); color:var(--coral);}

  /* Section bar-head */
  .bar-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px;}
  .bar-head .left{display:flex; align-items:center; gap:10px;}
  .bar-head .bar{width:5px; height:26px; background:var(--coral); border-radius:4px; flex:0 0 auto;}
  .bar-head h2{font-size:1.4rem;}
  .bar-head h2 em{font-style:normal; color:var(--coral);}
  .bar-head a{color:var(--coral); font-weight:700; font-size:0.9rem; white-space:nowrap;}

  .course-section{padding:32px 0 8px;}
  .course-row{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}

  /* Mobile bottom tab bar */
  .tabbar{
    display:none; position:fixed; bottom:0; left:0; right:0; z-index:60;
    background:#fff; border-top:1px solid var(--line); padding:8px 4px 10px;
    justify-content:space-around; box-shadow:0 -6px 18px rgba(20,24,27,0.08);
  }
  .tabbar a{display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--muted); font-size:0.68rem; font-weight:700;}
  .tabbar a.active{color:var(--coral);}
  .tabbar .ic{display:flex; align-items:center; justify-content:center;}

  /* Page routing */
  .page-content{display:block;}

  /* Cart button in header */
  .cart-btn{
    position:relative; cursor:pointer; color:var(--text);
    display:flex; align-items:center; justify-content:center; flex:0 0 auto;
    width:34px; height:34px; border-radius:11px;
    background:linear-gradient(160deg, rgba(255,255,255,0.95), rgba(255,255,255,0.55));
    border:1px solid rgba(255,255,255,0.8);
    box-shadow:0 3px 10px -3px rgba(20,24,27,0.18), inset 0 1px 0 rgba(255,255,255,0.9);
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .cart-btn svg{width:19px; height:19px;}
  .cart-btn:hover{box-shadow:0 4px 12px -3px rgba(20,24,27,0.24), inset 0 1px 0 rgba(255,255,255,0.9);}
  .cart-btn:active{transform:scale(0.93);}
  .cart-badge{
    position:absolute; top:-4px; right:-4px; background:var(--coral); color:#fff;
    font-size:0.6rem; font-weight:800; border-radius:100px; min-width:15px; height:15px;
    display:none; align-items:center; justify-content:center; padding:0 3px;
    box-shadow:0 0 0 2px #fff, 0 2px 5px rgba(14,110,79,0.4);
  }

  /* Simple content pages */
  .simple-page{max-width:640px; margin:0 auto; padding:60px 24px 100px; text-align:center;}
  .page-profile .simple-page{padding-top:0;}
  .page-mydownloads .simple-page{padding-top:0;}
  .page-download .simple-page{padding-top:0;}

  /* ---------- My Downloads page ---------- */
  .dl-page h1{font-size:1.55rem; margin-bottom:6px;}
  .dl-subtitle{color:var(--muted); font-size:0.86rem; margin-bottom:20px;}
  .dl-list{display:flex; flex-direction:column; gap:12px;}
  .dl-item{
    display:flex; align-items:center; gap:14px;
    border:1px solid var(--line); border-radius:16px; padding:13px 14px;
    background:var(--surface);
    box-shadow:0 2px 10px rgba(20,24,27,0.04);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .dl-item:not(.dl-skel):hover{transform:translateY(-2px); box-shadow:0 10px 22px -8px rgba(20,24,27,0.14);}
  .dl-icon{
    width:44px; height:44px; border-radius:12px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, var(--coral), var(--gold));
    color:#fff; box-shadow:0 4px 10px -3px rgba(14,110,79,0.4);
  }
  .dl-icon svg{width:21px; height:21px;}
  .dl-icon.dl-has-img{position:relative; overflow:hidden; width:54px; height:54px; border-radius:14px;}
  .dl-icon.dl-has-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; background:var(--surface-2);}
  .dl-icon-skel{width:44px; height:44px; border-radius:12px; flex-shrink:0;}
  .dl-info{flex:1; min-width:0;}
  .dl-info b{display:block; font-size:0.94rem; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .dl-info span{font-size:0.76rem; color:var(--muted);}
  .dl-tag{display:inline-block; padding:3px 9px; border-radius:100px; background:var(--surface-2); color:var(--muted); font-size:0.68rem; font-weight:700; margin-top:3px;}
  .dl-btn{
    display:flex; align-items:center; gap:6px; flex-shrink:0;
    padding:9px 15px; border-radius:10px; font-size:0.8rem; font-weight:800;
    background:linear-gradient(135deg, var(--coral), var(--gold)); color:#fff;
    white-space:nowrap; text-decoration:none;
    box-shadow:0 4px 10px -3px rgba(14,110,79,0.35);
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .dl-btn:hover{transform:translateY(-2px); box-shadow:0 6px 14px -3px rgba(14,110,79,0.45);}
  .dl-btn:active{transform:scale(0.95);}
  .dl-btn svg{width:14px; height:14px;}
  .dl-btn-skel{width:88px; height:34px; border-radius:10px; flex-shrink:0;}
  .dl-empty{text-align:center; padding:54px 16px 30px; color:var(--muted);}
  .dl-empty svg{width:52px; height:52px; margin:0 auto 14px; opacity:0.35; display:block;}
  .dl-empty p{font-size:0.88rem; line-height:1.6;}
  .dl-error{color:var(--coral);}

  /* Grouped video-pack purchase card in My Downloads — one purchase = one card,
     each video inside numbered with a permanent serial + its own link button. */
  .dl-vp-group{
    border:1px solid var(--line); border-radius:16px; padding:14px 14px 12px;
    background:var(--surface); box-shadow:0 2px 10px rgba(20,24,27,0.04);
  }
  .dl-vp-head{display:flex; align-items:center; gap:12px; margin-bottom:12px;}
  .dl-vp-head-info{flex:1; min-width:0;}
  .dl-vp-head-info b{display:block; font-size:0.94rem; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .dl-vp-head-info span{font-size:0.74rem; color:var(--muted);}
  .dl-vp-rows{display:flex; flex-direction:column; gap:8px;}
  .dl-vp-row{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:9px 12px; border-radius:10px; background:var(--surface-2); font-size:0.82rem; font-weight:700;
  }
  .dl-vp-row a{color:var(--coral); text-decoration:none; font-weight:800; font-size:0.78rem; display:flex; align-items:center; gap:5px; white-space:nowrap;}
  .dl-vp-row a svg{width:13px; height:13px;}

  .plan-card{
    background:var(--surface); border:1.5px solid var(--line); border-radius:18px; overflow:hidden;
    padding:26px 22px; text-align:center; position:relative;
  }
  .plan-card.popular{border-color:#16A34A;}
  .plan-ribbon{
    position:absolute; top:0; left:0; right:0; background:#16A34A; color:#fff;
    font-size:0.7rem; font-weight:800; letter-spacing:0.06em; padding:6px; text-align:center;
  }
  .plan-card.popular .plan-body{padding-top:22px;}
  .plan-eyebrow{color:#16A34A; font-size:0.72rem; font-weight:800; letter-spacing:0.05em;}
  .plan-title-row{display:flex; align-items:center; justify-content:center; gap:8px; margin:6px 0 12px;}
  .plan-title-row h3{font-size:1.3rem;}
  .plan-discount{background:rgba(14,110,79,0.1); color:var(--coral); font-size:0.72rem; font-weight:800; padding:3px 9px; border-radius:8px;}
  .plan-price-row{margin-bottom:14px;}
  .plan-price{font-size:2rem; font-weight:900; color:var(--coral); font-family:'Fraunces',serif;}
  .plan-old-price{font-size:1.1rem; color:var(--muted); text-decoration:line-through; margin-left:8px;}
  .plan-tags{display:flex; gap:8px; justify-content:center; margin-bottom:16px; flex-wrap:wrap;}
  .plan-tag{font-size:0.72rem; font-weight:700; padding:5px 11px; border-radius:100px; border:1.5px solid var(--line); color:var(--muted);}
  .plan-tag.access{background:rgba(22,163,74,0.08); border-color:rgba(22,163,74,0.3); color:#16A34A;}
  .plan-features{list-style:none; text-align:left; margin-bottom:20px; display:flex; flex-direction:column; gap:10px;}
  .plan-features li{display:flex; align-items:flex-start; gap:8px; font-size:0.86rem; color:var(--text);}
  .plan-features li::before{content:''; width:7px; height:7px; border-radius:50%; background:#16A34A; margin-top:6px; flex-shrink:0;}
  .plan-subscribe-btn{
    width:100%; padding:14px; border-radius:12px; border:none; cursor:pointer;
    background:#16A34A; color:#fff; font-weight:800; font-size:0.95rem;
    box-shadow:0 10px 22px -8px rgba(22,163,74,0.45);
  }
  .plan-card.popular .plan-subscribe-btn{
    background:linear-gradient(135deg, var(--coral), var(--gold));
    box-shadow:0 10px 22px -8px rgba(14,110,79,0.5);
  }

  /* ---------- Games page — play/buy overlay button centered on the thumbnail
     (replaces a separate full-width button below the card) ---------- */
  .game-thumb{position:relative; cursor:pointer;}
  .game-play-overlay{
    position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
    display:flex; align-items:center; gap:6px;
    padding:8px 16px 8px 12px; border-radius:100px;
    background:rgba(20,18,30,0.6); backdrop-filter:blur(2px);
    box-shadow:0 4px 14px rgba(0,0,0,0.25);
    transition:transform .15s ease, background .15s ease;
    white-space:nowrap;
  }
  .game-play-overlay svg{flex-shrink:0; margin-left:1px;} /* optical centering for the play triangle */
  .game-play-overlay span{color:#fff; font-size:0.76rem; font-weight:800; letter-spacing:0.03em;}
  .game-thumb:hover .game-play-overlay{transform:translate(-50%, -50%) scale(1.06); background:rgba(14,110,79,0.85);}
  .game-thumb:active .game-play-overlay{transform:translate(-50%, -50%) scale(0.95);}

  .game-meta-row{margin-top:7px;}
  .game-meta-pill{
    display:inline-flex; align-items:center; gap:5px;
    font-size:0.7rem; font-weight:700; color:var(--muted);
    background:var(--surface-2); border:1px solid var(--line); border-radius:100px; padding:4px 10px;
  }
  .game-meta-pill svg{width:12px; height:12px; flex-shrink:0;}
  .game-status-pill{
    display:inline-flex; align-items:center; gap:5px; margin-top:8px;
    font-size:0.7rem; font-weight:800; color:#16A34A;
    background:rgba(22,163,74,0.1); border-radius:100px; padding:5px 11px;
  }
  .game-status-pill svg{width:12px; height:12px; flex-shrink:0;}

  /* Auth-check loading state (avoids a "please log in" flash while
     Firebase resolves the session on each fresh page load) — a skeleton
     that mirrors the real hero/wallet/dash-grid layout with a shimmer sweep. */
  .profile-loading{padding-top:20px;}
  .profile-skel-hero{
    background:var(--surface); border:1px solid var(--line); border-radius:20px;
    margin-bottom:20px; box-shadow:0 8px 22px rgba(20,24,27,0.06); overflow:hidden;
  }
  .profile-skel-banner{
    height:64px; background:linear-gradient(120deg,var(--line),var(--surface-2));
    position:relative; overflow:hidden;
  }
  .profile-skel-body{display:flex; align-items:flex-end; gap:14px; padding:0 20px 20px; margin-top:-30px; text-align:left;}
  .profile-skel-avatar{
    width:78px; height:78px; border-radius:50%; border:4px solid var(--surface);
    background:var(--surface-2); flex:0 0 auto; position:relative; overflow:hidden;
  }
  .profile-skel-lines{flex:1; padding-bottom:8px; display:flex; flex-direction:column; gap:9px;}
  .profile-skel-line{height:13px; border-radius:6px; background:var(--surface-2); position:relative; overflow:hidden;}
  .profile-skel-line.w1{width:135px; height:17px;}
  .profile-skel-line.w2{width:100px;}
  .profile-skel-wallet{
    height:92px; border-radius:16px; margin-bottom:20px; position:relative; overflow:hidden;
    background:linear-gradient(135deg,#26243b 0%,#332f4f 50%,var(--coral-dark) 135%);
  }
  .profile-skel-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
  .profile-skel-cell{
    height:98px; border-radius:14px; background:var(--surface); border:1px solid var(--line);
    position:relative; overflow:hidden;
  }
  .profile-skel-banner::after, .profile-skel-avatar::after, .profile-skel-line::after,
  .profile-skel-wallet::after, .profile-skel-cell::after{
    content:''; position:absolute; inset:0; transform:translateX(-100%);
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
    animation:profileSkelShimmer 1.5s ease-in-out infinite;
  }
  .profile-skel-wallet::after{background:linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);}
  .profile-skel-cell:nth-child(2)::after{animation-delay:.1s;}
  .profile-skel-cell:nth-child(3)::after{animation-delay:.2s;}
  .profile-skel-cell:nth-child(4)::after{animation-delay:.3s;}
  @keyframes profileSkelShimmer{ 100%{transform:translateX(100%);} }

  /* Profile page — signed-out state */
  .profile-guest{
    max-width:400px; margin:36px auto 0; background:var(--surface); border:1px solid var(--line);
    border-radius:22px; padding:40px 28px 32px; box-shadow:0 12px 28px rgba(20,24,27,0.08);
    position:relative; overflow:hidden;
  }
  .profile-guest::before{
    content:''; position:absolute; top:-60px; right:-60px; width:160px; height:160px; border-radius:50%;
    background:radial-gradient(circle, rgba(23,163,116,0.16), transparent 70%); pointer-events:none;
  }
  .profile-guest-icon{
    position:relative; z-index:1; width:72px; height:72px; border-radius:50%; margin:0 auto 20px;
    background:linear-gradient(140deg,var(--gold),var(--coral)); color:#fff;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 22px rgba(14,110,79,0.28);
  }
  .profile-guest h1{position:relative; z-index:1; font-size:1.4rem; margin-bottom:8px;}
  .profile-guest p{position:relative; z-index:1; font-size:0.92rem; margin-bottom:24px;}
  .profile-guest-btn{position:relative; z-index:1; width:100%; padding:15px; font-size:0.96rem;}
  .profile-guest-alt{position:relative; z-index:1; margin-bottom:0; font-size:0.85rem;}
  .profile-guest-alt a{color:var(--coral); font-weight:800;}
  .simple-page h1{font-size:1.9rem; margin-bottom:12px;}
  .simple-page p{color:var(--muted); margin-bottom:26px; line-height:1.6;}
  .form-field{margin-bottom:16px; text-align:left;}
  .form-field label{display:block; font-weight:700; font-size:0.85rem; margin-bottom:6px;}
  .form-field input, .form-field textarea{
    width:100%; padding:12px 14px; border-radius:10px; border:1.5px solid var(--line);
    font-family:inherit; font-size:0.95rem; background:var(--surface); color:var(--text); resize:vertical;
  }
  .form-field input:focus, .form-field textarea:focus{outline:none; border-color:var(--coral);}
  .form-msg{margin-top:14px; font-weight:700; font-size:0.9rem; min-height:1.2em;}
  .form-msg.ok{color:#16A34A;}
  .form-msg.err{color:var(--coral);}

  /* Cart page */
  .cart-item{
    display:flex; gap:14px; align-items:center; background:var(--surface); border:1px solid var(--line);
    border-radius:14px; padding:12px; margin-bottom:12px; text-align:left;
  }
  .cart-item .thumb{width:64px; height:64px; border-radius:10px; flex:0 0 auto;}
  .cart-item .info{flex:1; min-width:0;}
  .cart-item .info h4{font-size:0.95rem; margin-bottom:4px;}
  .cart-item .qty{display:flex; align-items:center; gap:10px; margin-top:6px;}
  .cart-item .qty button{
    width:26px; height:26px; border-radius:50%; border:1px solid var(--line); background:#fff;
    cursor:pointer; font-weight:800; color:var(--text);
  }
  .cart-item .remove{color:var(--coral); font-size:0.8rem; font-weight:700; cursor:pointer; background:none; border:none; flex:0 0 auto;}
  .cart-total-row{display:flex; justify-content:space-between; font-weight:800; font-size:1.1rem; padding:16px 0; border-top:2px solid var(--line); margin-top:8px; text-align:left;}

  /* Notice page */
  .page-notice .simple-page{padding-top:22px;}
  .notice-head{
    display:flex; align-items:center; gap:14px;
    padding:20px 24px; max-width:640px; margin:0 auto;
    border-bottom:1px solid var(--line);
    background:linear-gradient(135deg, rgba(14,110,79,0.07), rgba(23,163,116,0.05));
  }
  .notice-head-ic{
    flex:0 0 auto; width:44px; height:44px; border-radius:13px;
    background:linear-gradient(140deg,var(--coral),var(--gold)); color:#fff;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 16px -4px rgba(14,110,79,0.4);
  }
  .notice-head h1{font-size:1.3rem; font-weight:800; margin-bottom:3px; letter-spacing:-0.01em;}
  .notice-head p{color:var(--muted); font-size:0.83rem; margin:0; line-height:1.45;}
  .notice-item{
    background:var(--surface); border:1px solid var(--line); border-radius:16px;
    padding:18px 20px 18px 22px; margin-bottom:14px; text-align:left; position:relative;
    box-shadow:0 4px 14px -9px rgba(20,24,27,0.15);
    transition:box-shadow .2s ease, transform .2s ease;
  }
  .notice-item::before{
    content:''; position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:3px;
    background:linear-gradient(180deg, var(--coral), var(--gold));
  }
  .notice-item:hover{box-shadow:0 8px 20px -10px rgba(20,24,27,0.22); transform:translateY(-1px);}
  .notice-item .date{
    color:var(--coral); font-weight:800; font-size:0.68rem; letter-spacing:0.04em; text-transform:uppercase;
    margin-bottom:10px; display:block; width:fit-content; padding:3px 10px; border-radius:100px;
    background:rgba(14,110,79,0.09);
  }
  .notice-item{font-size:0.94rem; line-height:1.7; color:var(--text);}
  .notice-empty{text-align:center; padding:46px 20px 10px;}
  .notice-empty-ic{
    width:58px; height:58px; border-radius:50%; margin:0 auto 14px;
    background:var(--surface-2); display:flex; align-items:center; justify-content:center; color:var(--muted);
  }
  .notice-empty p{color:var(--muted); font-size:0.92rem; margin:0;}


  /* More grid page */
  .more-grid{
    display:grid; grid-template-columns:repeat(2,1fr); gap:14px; max-width:520px;
    margin:0 auto; padding:40px 20px 100px;
  }
  .more-grid .icon-tile{width:100%; font:inherit; text-decoration:none;}

  /* Store / download buttons */
  .store-btn{
    display:flex; align-items:center; gap:12px; background:var(--text); color:#fff;
    padding:14px 20px; border-radius:14px; margin-bottom:12px; border:none; width:100%;
    cursor:pointer; font-family:inherit; font-size:0.95rem; font-weight:700;
  }
  .store-btn svg{flex:0 0 auto;}

  /* Profile page */
  .profile-card{
    display:flex; align-items:center; gap:16px; background:var(--surface); border:1px solid var(--line);
    border-radius:16px; padding:20px; margin-bottom:20px; text-align:left;
  }
  .profile-avatar{width:64px; height:64px; border-radius:50%; background:linear-gradient(140deg,var(--gold),var(--coral)); flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:1.4rem; overflow:hidden;}
  .profile-avatar svg{width:100%; height:100%; display:block;}
  .profile-avatar img{width:100%; height:100%; object-fit:cover; border-radius:50%; display:block;}

  /* Profile page — commercial header card */
  .profile-hero{
    background:var(--surface); border:1px solid var(--line); border-radius:20px;
    margin-bottom:20px; box-shadow:0 8px 22px rgba(20,24,27,0.06);
  }
  .profile-hero-banner{
    height:64px; position:relative; border-radius:20px 20px 0 0; overflow:hidden;
    background:linear-gradient(120deg,var(--gold),var(--coral));
    background-image:
      radial-gradient(circle at 88% -20%, rgba(255,255,255,0.35), transparent 55%),
      linear-gradient(120deg,var(--gold),var(--coral));
  }
  .profile-edit-btn{
    position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%;
    background:rgba(255,255,255,0.22); color:#fff; display:flex; align-items:center; justify-content:center;
    backdrop-filter:blur(2px); transition:background .15s;
  }
  .profile-edit-btn:hover{background:rgba(255,255,255,0.34);}
  .profile-hero-body{display:flex; align-items:flex-end; gap:14px; padding:0 20px; margin-top:-30px;}
  .profile-hero-body .profile-avatar{
    width:78px; height:78px; font-size:1.6rem; border:4px solid var(--surface);
    background-image:
      linear-gradient(135deg, rgba(255,255,255,0.32), transparent 55%),
      linear-gradient(140deg,var(--gold),var(--coral));
    box-shadow:0 0 0 1px var(--line), 0 10px 22px rgba(20,24,27,0.22), 0 0 0 4px rgba(23,163,116,0.14);
    position:relative;
  }
  .profile-hero-info{padding-bottom:4px; min-width:0;}
  .profile-hero-info h3{font-size:1.15rem; margin-bottom:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .profile-handle{color:var(--muted); font-size:0.85rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block;}
  .profile-hero-foot{padding:14px 20px 18px;}
  .profile-chip{
    display:inline-flex; align-items:center; gap:6px; background:var(--bg); border:1px solid var(--line);
    color:var(--muted); font-size:0.76rem; font-weight:700; padding:6px 12px; border-radius:100px;
  }
  .profile-chip svg{flex:0 0 auto; color:var(--gold);}

  /* Wallet — featured card spanning the dashboard grid.
     Compound selector (.dash-card.wallet-feature-card) so this reliably beats
     the plain .dash-card rule below regardless of source order/specificity. */
  .dash-card.wallet-feature-card{
    grid-column:1 / -1; flex-direction:row; align-items:center; gap:16px;
    background:linear-gradient(135deg,#26243b 0%,#332f4f 50%,var(--coral-dark) 135%);
    border:none; padding:20px; position:relative; overflow:hidden;
    box-shadow:0 14px 30px rgba(20,24,27,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
  }
  .wallet-feature-card::before{
    content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
    background:linear-gradient(135deg, rgba(255,255,255,0.28), transparent 40%);
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
  }
  .wallet-feature-card::after{
    content:''; position:absolute; top:-45%; right:-12%; width:180px; height:180px; border-radius:50%;
    background:radial-gradient(circle, rgba(23,163,116,0.4), transparent 70%); pointer-events:none;
  }
  .dash-card.wallet-feature-card:hover{border-color:transparent; transform:translateY(-2px); box-shadow:0 18px 34px rgba(20,24,27,0.36);}
  .wallet-feature-icon{
    position:relative; z-index:1; width:48px; height:48px; border-radius:14px; flex:0 0 auto;
    background:linear-gradient(135deg, rgba(255,255,255,0.24), rgba(255,255,255,0.06));
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.28), 0 4px 10px rgba(0,0,0,0.18);
    color:#fff; display:flex; align-items:center; justify-content:center;
  }
  .wallet-feature-text{position:relative; z-index:1; display:flex; flex-direction:column; gap:3px; flex:1; min-width:0;}
  .wallet-feature-text em{font-style:normal; color:rgba(255,255,255,0.7); font-size:0.76rem; font-weight:700; letter-spacing:0.01em;}
  .wallet-feature-text strong{font-family:'Fraunces',serif; color:#fff; font-size:1.45rem; font-weight:700; letter-spacing:-0.01em;}
  .wallet-feature-chevron{position:relative; z-index:1; flex:0 0 auto; color:rgba(255,255,255,0.6);}

  .logout-btn{display:flex; align-items:center; justify-content:center; gap:8px;}

  /* Auth tabs (login/register) */
  .auth-tabs{display:flex; gap:8px; max-width:360px; margin:0 auto 24px; background:var(--surface); border-radius:100px; padding:5px; border:1px solid var(--line);}
  .auth-tab{flex:1; border:none; background:none; padding:10px; border-radius:100px; font-family:inherit; font-weight:700; font-size:0.88rem; color:var(--muted); cursor:pointer;}
  .auth-tab.active{background:var(--coral); color:#fff;}

  /* Dashboard grid */
  .dash-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:8px;}
  .dash-card{
    position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:10px;
    background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px;
    text-decoration:none; color:var(--text); font-weight:700; font-size:0.88rem; cursor:pointer;
    box-shadow:0 4px 12px rgba(20,24,27,0.04); transition:transform .15s, border-color .15s, box-shadow .15s;
  }
  .dash-card:hover{border-color:var(--coral); transform:translateY(-2px); box-shadow:0 8px 18px rgba(20,24,27,0.08);}
  .dash-icon{width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
  .dash-badge{
    position:absolute; top:12px; right:12px; background:var(--coral); color:#fff; font-size:0.72rem;
    font-weight:800; min-width:20px; height:20px; border-radius:100px; display:none;
    align-items:center; justify-content:center; padding:0 6px;
  }
  .tile-badge{
    position:absolute; top:8px; right:8px; background:var(--coral); color:#fff; font-size:0.68rem;
    font-weight:800; min-width:18px; height:18px; border-radius:100px; display:none;
    align-items:center; justify-content:center; padding:0 5px; z-index:2;
  }

  /* Search + category filter */
  .search-filter-bar{max-width:900px; margin:0 auto 22px; padding:0 20px;}
  .search-filter-bar input{
    width:100%; padding:13px 16px; border-radius:12px; border:1.5px solid var(--line);
    font-family:inherit; font-size:0.95rem; background:var(--surface); color:var(--text); margin-bottom:12px;
  }
  .search-filter-bar input:focus{outline:none; border-color:var(--coral);}
  .category-chips{display:flex; gap:8px; flex-wrap:wrap;}
  .chip{
    border:1.5px solid var(--line); background:var(--surface); color:var(--text); border-radius:100px;
    padding:7px 16px; font-family:inherit; font-size:0.82rem; font-weight:700; cursor:pointer;
  }
  .chip.active{background:var(--coral); border-color:var(--coral); color:#fff;}

  /* Support tickets */
  .ticket-card{border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:10px; background:var(--surface);}
  .ticket-status{font-size:0.72rem; font-weight:800; color:#fff; padding:3px 10px; border-radius:100px; white-space:nowrap;}

  /* ===== My Orders page — receipt-style redesign ===== */
  .page-orders .simple-page{padding-top:20px; max-width:600px;}

  .orders-head{margin-bottom:20px;}
  .orders-head h1{font-size:1.7rem; margin-bottom:5px;}
  .orders-head p{color:var(--muted); font-size:0.88rem; line-height:1.5;}

  .orders-stats{
    display:flex; background:var(--surface); border:1px solid var(--line); border-radius:14px;
    margin-bottom:16px; overflow:hidden;
  }
  .orders-stat{flex:1; padding:12px 10px; text-align:center;}
  .orders-stat + .orders-stat{border-left:1px solid var(--line);}
  .orders-stat .num{display:block; font-family:'Fraunces',serif; font-weight:800; font-size:1.2rem; color:var(--text);}
  .orders-stat .lbl{display:block; font-size:0.72rem; color:var(--muted); margin-top:2px;}

  .orders-filters{display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; margin-bottom:20px; scrollbar-width:none;}
  .orders-filters::-webkit-scrollbar{display:none;}
  .orders-filters .chip{flex:0 0 auto;}

  .receipt-card{
    background:var(--surface); border:1px solid var(--line); border-radius:14px;
    margin-bottom:16px; overflow:hidden;
  }
  .receipt-perf{
    height:12px; width:100%;
    background-image:radial-gradient(circle, var(--bg) 4px, transparent 4.3px);
    background-size:20px 12px; background-position:4px -6px;
    background-color:var(--surface);
    border-bottom:1px dashed var(--line);
  }
  .receipt-body{padding:16px 18px 18px;}
  .receipt-top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px;}
  .receipt-date{font-size:0.78rem; color:var(--muted); font-weight:600;}
  .receipt-status{display:inline-flex; align-items:center; gap:6px; font-size:0.8rem; font-weight:700; color:var(--text);}
  .receipt-status .dot{width:7px; height:7px; border-radius:50%; flex:0 0 auto;}
  .receipt-items{list-style:none; display:flex; flex-direction:column; gap:9px; margin-bottom:14px;}
  .receipt-item-row{display:flex; align-items:baseline; gap:8px; font-size:0.88rem;}
  .receipt-item-row .name{color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .receipt-item-row .leader{flex:1; min-width:12px; border-bottom:1.5px dotted var(--line); transform:translateY(-3px);}
  .receipt-item-row .qty{color:var(--muted); font-weight:600; flex:0 0 auto; font-variant-numeric:tabular-nums;}
  .receipt-divider{border-top:1px dashed var(--line); margin-bottom:12px;}
  .receipt-total-row{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:2px;}
  .receipt-total-row .lbl{font-size:0.88rem; color:var(--muted); font-weight:600;}
  .receipt-total-row .amount{font-family:'Fraunces',serif; font-weight:800; font-size:1.5rem; color:var(--coral);}
  .receipt-meta{font-size:0.78rem; color:var(--muted); line-height:1.6; margin-top:8px;}
  .receipt-links{margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); display:flex; flex-direction:column; gap:6px;}
  .receipt-links-label{font-size:0.76rem; color:var(--muted); font-weight:700;}
  .receipt-link-btn{
    display:inline-block; align-self:flex-start; padding:6px 12px; border-radius:8px;
    background:rgba(14,110,79,0.08); color:var(--coral); text-decoration:none; font-size:0.78rem; font-weight:800;
  }

  .orders-empty{text-align:center; padding:56px 20px; color:var(--muted);}
  .orders-empty svg{color:var(--line); margin-bottom:14px;}
  .orders-empty p{font-size:0.92rem; margin-bottom:18px;}
  .orders-empty a{
    display:inline-block; background:var(--coral); color:#fff; font-weight:700; font-size:0.86rem;
    padding:10px 22px; border-radius:100px;
  }

  /* Wallet page redesign */
  .wallet-page-wrap{max-width:460px; margin:0 auto; padding:0 20px 100px;}

  .wallet-hero{
    position:relative; overflow:hidden; background:linear-gradient(135deg,#0E1512,#12432F); color:#fff;
    border-radius:20px; padding:24px; margin-bottom:30px;
  }
  .wallet-hero::after{
    content:''; position:absolute; top:-36px; right:-30px; width:130px; height:130px; border-radius:50%;
    background:rgba(23,163,116,0.22);
  }
  .wallet-hero-top{display:flex; align-items:center; gap:9px; font-size:0.82rem; opacity:0.8; position:relative; z-index:1;}
  .wallet-hero-icon{width:30px; height:30px; border-radius:9px; background:rgba(255,255,255,0.14); display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
  .wallet-hero-amount{font-family:'Fraunces',serif; font-size:2.3rem; font-weight:800; margin:10px 0 4px; position:relative; z-index:1;}
  .wallet-hero-sub{font-size:0.78rem; opacity:0.7; position:relative; z-index:1;}

  .section-title-row{display:flex; align-items:center; gap:8px; margin-bottom:6px;}
  .section-title-row .dot{width:6px; height:6px; border-radius:50%; background:var(--coral); flex:0 0 auto;}
  .section-title-row h3{font-size:1.05rem;}
  .section-sub{color:var(--muted); font-size:0.85rem; margin-bottom:16px; line-height:1.6;}

  .field-label{display:block; font-weight:700; font-size:0.85rem; margin-bottom:8px;}

  /* ---------- Deposit "Add Money" flow (bKash/Nagad/Rocket method cards +
     a brand-colored instruction box) ---------- */
  .am-method-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px;}
  .am-card{
    position:relative; background:var(--surface); border:1.5px solid var(--line); border-radius:14px;
    padding:16px 8px; display:flex; flex-direction:column; align-items:center; gap:8px;
    cursor:pointer; transition:border-color .15s;
  }
  .am-card img{width:44px; height:44px; object-fit:contain;}
  .am-card span:last-child{font-weight:800; font-size:0.85rem;}
  .am-check{
    display:none; position:absolute; top:-8px; right:-8px; width:22px; height:22px; border-radius:50%;
    background:var(--coral); color:#fff; align-items:center; justify-content:center; font-size:0.7rem; font-weight:800;
  }
  .am-card.active{border-color:var(--coral); border-width:2px;}
  .am-card.active .am-check{display:flex;}
  .am-card[data-method="bKash"].active{border-color:#E2136E;}
  .am-card[data-method="bKash"].active .am-check{background:#E2136E;}
  .am-card[data-method="Nagad"].active{border-color:#F7941D;}
  .am-card[data-method="Nagad"].active .am-check{background:#F7941D;}
  .am-card[data-method="Rocket"].active{border-color:#8C3494;}
  .am-card[data-method="Rocket"].active .am-check{background:#8C3494;}

  .am-box{border-radius:18px; padding:22px 18px; color:#fff; transition:background .2s;}
  .am-field{margin-bottom:14px;}
  .am-field label{display:block; font-weight:700; font-size:0.82rem; margin-bottom:6px; color:#fff;}
  .am-input{
    width:100%; border:none; border-radius:12px; padding:13px 14px; font-family:inherit; font-size:0.95rem;
    font-weight:700; background:rgba(255,255,255,0.94); color:var(--text); box-sizing:border-box;
  }
  .am-input::placeholder{color:var(--muted); font-weight:600;}
  .am-list{list-style:none; display:flex; flex-direction:column; gap:8px; margin-bottom:14px;}
  .am-list li{font-size:0.85rem; line-height:1.5; padding-left:16px; position:relative;}
  .am-list li::before{content:'●'; position:absolute; left:0; top:0; font-size:0.6rem; opacity:0.85;}
  .am-num-row{
    display:flex; align-items:center; gap:10px; background:rgba(0,0,0,0.18); border-radius:12px; padding:13px 14px;
  }
  .am-num-value{font-family:'Fraunces',serif; font-size:1.15rem; font-weight:800; letter-spacing:0.02em; word-break:break-all; flex:1;}
  .am-num-hint{font-size:0.72rem; opacity:0.85; flex-shrink:0;}
  .am-copy-btn{
    flex:0 0 auto; border:none; background:rgba(255,255,255,0.92); color:var(--text); font-family:inherit; font-weight:800; font-size:0.78rem;
    padding:8px 14px; border-radius:9px; cursor:pointer; transition:background .15s, color .15s;
  }
  .am-copy-btn.copied{background:#16A34A; color:#fff;}
  .am-copy-btn:disabled{opacity:0.5; cursor:not-allowed;}
  .am-verify-btn{
    width:100%; border:none; border-radius:14px; padding:16px; margin-top:14px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:9px; position:relative;
    color:#fff; font-family:inherit; font-weight:900; font-size:1.05rem; letter-spacing:0.03em;
    box-shadow:0 10px 22px -8px rgba(0,0,0,0.35); transition:background .2s;
  }
  .am-verify-btn:disabled{opacity:0.75; cursor:not-allowed;}

  .amount-input-wrap{position:relative;}
  .amount-input-wrap .prefix{position:absolute; left:14px; top:50%; transform:translateY(-50%); font-weight:800; color:var(--coral); pointer-events:none;}
  .amount-input-wrap input{padding-left:30px !important;}

  .wallet-balance-card{
    background:linear-gradient(135deg,#0E1512,#12432F); color:#fff; border-radius:16px; padding:22px 24px;
    display:flex; flex-direction:column; gap:6px; max-width:420px;
  }
  .wallet-balance-card span{font-size:0.85rem; opacity:0.8;}
  .wallet-balance-card strong{font-size:2rem; font-weight:800;}
  .txn-row{display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:14px; padding:13px 14px; margin-bottom:10px; background:var(--surface);}
  .txn-icon{width:38px; height:38px; border-radius:11px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;}
  .txn-icon.deposit{background:#DCFCE7; color:#16A34A;}
  .txn-icon.purchase{background:#FEE2E2; color:var(--coral);}
  .txn-icon.refund{background:#EDE9FE; color:#7C3AED;}
  .txn-info{flex:1; min-width:0;}
  .txn-meta{color:var(--muted); font-size:0.76rem; margin-top:2px; display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
  .txn-status-pill{display:inline-block; font-size:0.66rem; font-weight:800; padding:2px 9px; border-radius:100px;}
  .txn-status-pill.pending{background:#FEF3C7; color:#92400E;}
  .txn-status-pill.approved, .txn-status-pill.completed{background:#DCFCE7; color:#166534;}
  .txn-status-pill.rejected{background:#FEE2E2; color:#991B1B;}
  .txn-row .txn-amt{flex:0 0 auto; font-weight:800;}
  .txn-row .txn-amt.credit{color:#16A34A;}
  .txn-row .txn-amt.debit{color:var(--coral);}

  .btn-spinner{
    width:18px; height:18px; border-radius:50%; flex:0 0 auto;
    border:2.5px solid rgba(255,255,255,0.4); border-top-color:#fff;
    animation:btn-spin 0.7s linear infinite;
  }
  @keyframes btn-spin{ to{ transform:rotate(360deg); } }

  /* Success popup modal */
  .modal-overlay{
    position:fixed; inset:0; background:rgba(20,18,30,0.55); display:flex; align-items:center; justify-content:center;
    padding:20px; z-index:200;
  }
  .modal-card{
    background:#fff; border-radius:20px; padding:30px 26px 26px; max-width:340px; width:100%; text-align:center;
    box-shadow:0 24px 60px rgba(20,18,30,0.3); animation:modal-pop 0.22s ease;
  }
  @keyframes modal-pop{ from{ transform:scale(0.88); opacity:0; } to{ transform:scale(1); opacity:1; } }
  .success-icon{
    width:62px; height:62px; border-radius:50%; background:#DCFCE7; color:#16A34A;
    display:flex; align-items:center; justify-content:center; margin:0 auto 16px;
  }
  .success-modal h3{font-size:1.15rem; margin-bottom:8px;}
  .success-modal p{color:var(--muted); font-size:0.87rem; line-height:1.65; margin-bottom:22px;}

  /* Broadcast announcement banner */
  .announcement-banner{
    background:linear-gradient(90deg,#0E1512,#12432F); color:#fff; padding:12px 18px;
    display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:0.85rem;
  }
  .announcement-text{display:flex; flex-direction:column; gap:2px; flex:1; min-width:0;}
  .announcement-text strong{font-size:0.9rem;}
  .announcement-text span{opacity:0.85; font-size:0.8rem;}
  #announcementDismiss{background:none; border:none; color:#fff; opacity:0.7; font-size:1rem; cursor:pointer; flex:0 0 auto; padding:4px 8px;}
  #announcementDismiss:hover{opacity:1;}


  .toast{
    position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(10px); background:var(--text); color:#fff;
    padding:13px 22px; border-radius:10px; font-size:0.9rem; font-weight:600; z-index:200; opacity:0;
    transition:.25s; pointer-events:none; white-space:nowrap;
  }
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

  /* Trending reels grid */
  .reel-grid{
    display:grid; grid-template-columns:repeat(5,1fr); gap:18px;
  }
  .grid-card{
    aspect-ratio:9/15; border-radius:18px; position:relative; overflow:hidden;
    background:linear-gradient(200deg, var(--surface-2), var(--surface));
    box-shadow:0 8px 22px rgba(20,24,27,0.1);
    cursor:pointer;
  }
  .grid-card::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(0deg, rgba(0,0,0,0.75) 0%, transparent 45%);
  }
  .grid-card .meta{position:absolute; bottom:12px; left:12px; right:12px; z-index:2;}
  .grid-card .meta b{font-size:0.9rem; display:block;}
  .grid-card .meta span{font-size:0.75rem; color:var(--gold); font-weight:700;}
  .grid-card .views{
    position:absolute; top:10px; right:10px; z-index:2; font-size:0.7rem; font-weight:700;
    background:rgba(0,0,0,0.5); padding:4px 9px; border-radius:100px;
  }
  .grid-card{transition:transform .35s var(--ease), box-shadow .35s var(--ease);}
  .grid-card:hover{transform:translateY(-5px); box-shadow:0 20px 40px -14px rgba(20,24,27,0.22);}

  /* Product showcase */
  .product-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
  .product-card{
    background:transparent; transition:.2s; cursor:pointer;
  }
  .product-card:hover{transform:translateY(-4px);}
  .product-card:hover .product-img{box-shadow:0 14px 30px rgba(20,24,27,0.14);}
  .product-img{
    aspect-ratio:4/5; background:linear-gradient(150deg,var(--surface-2),var(--bg));
    position:relative; border-radius:20px; overflow:hidden;
    box-shadow:0 6px 18px rgba(20,24,27,0.08); transition:.2s;
  }
  .badge-sale{
    position:absolute; top:10px; left:10px; background:var(--coral); color:#fff;
    font-size:0.7rem; font-weight:800; padding:4px 9px; border-radius:6px;
  }
  .fav-btn{
    position:absolute; top:10px; right:10px; z-index:2; width:32px; height:32px; border-radius:50%;
    background:rgba(255,255,255,0.9); backdrop-filter:blur(2px); border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center; color:var(--text);
    box-shadow:0 2px 10px rgba(20,24,27,0.16); transition:transform .15s, color .15s, background .15s;
  }
  .fav-btn:hover{transform:scale(1.1);}
  .fav-btn.active{color:#fff; background:var(--coral);}
  .product-body{padding:10px 2px 0;}
  .product-body h4{font-size:0.9rem; font-weight:600; margin-bottom:4px; line-height:1.3;}
  .price-row{display:flex; align-items:center; gap:7px; margin-top:5px;}
  .price-now{font-weight:800; color:var(--coral); font-size:1.02rem;}
  .price-old{color:var(--muted); text-decoration:line-through; font-size:0.84rem;}

  /* How it works */
  .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
  .step{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:32px; box-shadow:0 6px 20px rgba(20,24,27,0.05);}
  .step .num{
    font-family:'Fraunces',serif; font-size:2.4rem; color:var(--coral); display:block; margin-bottom:14px;
  }
  .step h3{font-size:1.15rem; margin-bottom:10px;}
  .step p{color:var(--muted); font-size:0.92rem; line-height:1.6;}

  /* Testimonial marquee */
  .marquee-wrap{overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:36px 0;}
  .marquee{display:flex; gap:22px; width:max-content; animation:scroll 34s linear infinite;}
  .marquee-wrap:hover .marquee{animation-play-state:paused;}
  @keyframes scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
  .quote{
    flex:0 0 auto; width:340px; background:var(--surface); border:1px solid var(--line);
    border-radius:16px; padding:22px; box-shadow:0 6px 20px rgba(20,24,27,0.05);
  }
  .quote p{color:var(--text); font-size:0.95rem; line-height:1.6; margin-bottom:14px;}
  .quote .who{display:flex; align-items:center; gap:10px;}
    .avatar{width:34px; height:34px; border-radius:50%; background:linear-gradient(140deg,var(--coral),var(--coral-dark)); background-size:cover; background-position:center; flex:0 0 auto; overflow:hidden;}
  .avatar svg{width:100%; height:100%; display:block;}
  .who b{font-size:0.85rem; display:block;}
  .who span{font-size:0.75rem; color:var(--muted);}

  /* CTA band */
  .cta-band{
    background:linear-gradient(120deg, #FFF1EF, #FFFFFF);
    border-radius:28px; padding:56px; text-align:center; margin:0 24px;
    max-width:1132px; margin-inline:auto;
    border:1px solid var(--line);
  }
  .cta-band h2{font-size:clamp(1.8rem,3.4vw,2.6rem); margin-bottom:14px;}
  .cta-band p{color:var(--muted); margin-bottom:28px;}

  /* ---------- Footer (redesigned) ---------- */
  footer{margin-top:40px;}
  .foot-main{background:var(--text); color:rgba(255,255,255,0.72); padding:52px 0 26px;}
  .foot-simple{padding:22px 0 16px;}
  .foot-simple-wrap{display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px;}
  .foot-simple .logo{font-size:1rem; opacity:0.9;}
  .foot-simple .foot-socials{margin-top:0; gap:8px;}
  .foot-simple-links{display:flex; align-items:center; gap:10px; font-size:0.8rem;}
  .foot-simple-links a{color:#5B9DFF; transition:.15s;}
  .foot-simple-links a:hover{color:#8FBCFF;}
  .foot-simple-links span{color:rgba(255,255,255,0.25);}
  .foot-bottom-simple{width:100%; max-width:280px; margin:0 auto; padding-top:10px; border-top:1px solid rgba(255,255,255,0.08); font-size:0.72rem; color:rgba(255,255,255,0.4);}
  .foot-top{display:grid; grid-template-columns:1.3fr 1.6fr 1fr; gap:40px; padding-bottom:36px;}
  .foot-brand .logo{color:#fff;}
  .foot-tagline{max-width:280px; font-size:0.9rem; line-height:1.7; margin-top:2px;}
  .foot-socials{display:flex; gap:10px; margin-top:20px;}
  .foot-socials a{
    width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.85); transition:.15s;
  }
  .foot-socials a:hover{background:var(--coral); color:#fff; transform:translateY(-2px);}
  .foot-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .foot-cols h5, .foot-news h5{font-size:0.8rem; text-transform:uppercase; letter-spacing:0.08em; color:rgba(255,255,255,0.45); margin-bottom:16px; font-weight:700;}
  .foot-cols ul{list-style:none;}
  .foot-cols li{margin-bottom:11px; font-size:0.92rem;}
  .foot-cols li a{color:rgba(255,255,255,0.75); transition:.15s;}
  .foot-cols li a:hover{color:var(--gold); padding-left:3px;}
  .foot-news p{font-size:0.85rem; line-height:1.6; margin-bottom:16px; color:rgba(255,255,255,0.6);}
  .foot-news-form{display:flex; gap:8px;}
  .foot-news-form input{
    flex:1; min-width:0; padding:11px 14px; border-radius:100px; border:1px solid rgba(255,255,255,0.16);
    background:rgba(255,255,255,0.06); color:#fff; font-family:inherit; font-size:0.88rem;
  }
  .foot-news-form input::placeholder{color:rgba(255,255,255,0.4);}
  .foot-news-form input:focus{outline:none; border-color:var(--coral);}
  .foot-news-form button{
    flex:0 0 auto; width:42px; height:42px; border-radius:50%; border:none; cursor:pointer;
    background:var(--coral); color:#fff; display:flex; align-items:center; justify-content:center; transition:.15s;
  }
  .foot-news-form button:hover{background:var(--coral-dark);}
  .foot-news-msg{margin-top:10px; font-size:0.82rem; font-weight:700; min-height:1.2em; color:#4ADE80;}
  .foot-news-msg.err{color:var(--coral);}
  .foot-pay{
    display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:24px 0;
    border-top:1px solid rgba(255,255,255,0.1);
  }
  .foot-pay-label{font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; color:rgba(255,255,255,0.4); flex:0 0 auto;}
  .foot-pay-badges{display:flex; gap:8px; flex-wrap:wrap;}
  .pay-badge{
    background:rgba(255,255,255,0.9); font-weight:800; font-size:0.72rem; padding:6px 12px;
    border-radius:6px; letter-spacing:0.01em;
  }
  .foot-bottom{
    display:flex; justify-content:space-between; padding-top:20px; border-top:1px solid rgba(255,255,255,0.1);
    color:rgba(255,255,255,0.45); font-size:0.82rem; flex-wrap:wrap; gap:10px;
  }
  .foot-legal{display:flex; gap:8px; align-items:center;}
  .foot-legal a{color:rgba(255,255,255,0.45); transition:.15s;}
  .foot-legal a:hover{color:#fff;}

  @media(max-width:920px){
    nav{padding:9px 20px; min-height:48px;}
    section{padding:56px 0;}
    .reel-grid{grid-template-columns:repeat(3,1fr); gap:12px;}
    .product-grid{grid-template-columns:repeat(2,1fr); gap:16px;}
    .steps{grid-template-columns:1fr;}
    .foot-top{grid-template-columns:1fr 1fr; gap:28px 20px;}
    .foot-news{grid-column:span 2;}
    .nav-links{display:none;}
    .section-head{align-items:flex-start;}
    .course-row{grid-template-columns:repeat(2,1fr);}
    .promo-bg-text{font-size:2.8rem;}
  }
  @media(max-width:760px){
    .tabbar{display:flex;}
    body{padding-bottom:64px;}
    .toast{bottom:78px;}
  }
  @media(max-width:640px){
    .wrap{padding:0 12px;}
    .cats{padding:8px 12px 26px;}
    .reel-grid{grid-template-columns:repeat(2,1fr);}
    .product-grid{grid-template-columns:repeat(2,1fr); gap:12px;}
    .course-row{gap:12px;}
    .product-body{padding:9px 2px 0;}
    .cta-band{padding:32px 20px; border-radius:20px; margin:0 12px;}
    .foot-top{grid-template-columns:1fr; gap:28px;}
    .foot-news{grid-column:auto;}
    .foot-cols{grid-template-columns:1fr 1fr; gap:20px;}
    .foot-bottom{flex-direction:column; align-items:flex-start;}
    .foot-pay{padding:20px 0;}
    .quote{width:270px;}
    .nav-cta{padding:7px 14px; font-size:0.78rem;}
    .logo{font-size:1.15rem;}
    .wallet-chip{padding:6px 10px; font-size:0.72rem; gap:4px;}
    .wallet-chip svg{width:13px; height:13px;}
    .icon-grid{grid-template-columns:repeat(4,1fr); gap:10px;}
    .icon-tile{padding:16px 6px;}
    .icon-tile .ic{width:38px; height:38px;}
    .icon-tile .ic svg{width:18px; height:18px;}
    .icon-tile span{font-size:0.7rem;}
    .promo-bg-text{font-size:1.8rem;}
    .promo-yt span{display:none;}
  }
  @media(max-width:400px){
    .hero-stats{gap:16px;}
    .stat b{font-size:1.3rem;}
    .reel-card{width:150px; height:270px;}
    .product-grid{grid-template-columns:1fr 1fr;}
    .course-row{grid-template-columns:1fr 1fr;}
  }
  /* ---------- Skeleton / shimmer loading states ---------- */
  @keyframes shimmer{
    0%{ background-position:-400px 0; }
    100%{ background-position:400px 0; }
  }
  .skeleton{
    position:relative; overflow:hidden; background:var(--surface-2);
    background-image:linear-gradient(90deg, var(--surface-2) 0px, var(--line) 40px, var(--surface-2) 80px);
    background-size:600px 100%;
    animation:shimmer 1.4s ease-in-out infinite;
    border-radius:10px;
  }
  .skel-card{ background:transparent; }
  .skel-card .skel-img{ aspect-ratio:4/5; border-radius:20px; }
  .skel-card .skel-line{ height:12px; border-radius:6px; margin-top:10px; }
  .skel-card .skel-line.w-70{ width:70%; }
  .skel-card .skel-line.w-40{ width:40%; }
  .skel-list-row{
    border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:10px;
    background:var(--surface); display:flex; flex-direction:column; gap:8px;
  }
  .skel-list-row .skel-line{ height:12px; border-radius:6px; }
  .skel-list-row .skel-line.w-30{ width:30%; }
  .skel-list-row .skel-line.w-60{ width:60%; }
  .skel-list-row .skel-line.w-90{ width:90%; }
  .skel-detail-img{ aspect-ratio:16/9; border-radius:18px; margin-bottom:18px; }
  .skel-detail-line{ height:14px; border-radius:7px; margin-bottom:12px; }
  .skel-detail-line.w-80{ width:80%; height:24px; }

  /* Shimmer on a dark background (wallet balance hero) */
  .skeleton-dark{
    position:relative; overflow:hidden; background:rgba(255,255,255,0.08);
    background-image:linear-gradient(90deg, rgba(255,255,255,0.08) 0px, rgba(255,255,255,0.22) 40px, rgba(255,255,255,0.08) 80px);
    background-size:600px 100%;
    animation:shimmer 1.4s ease-in-out infinite;
    border-radius:8px;
  }
  .skel-amount{ display:inline-block; width:130px; height:32px; vertical-align:middle; }
  .skel-merchant-number{ display:inline-block; width:150px; height:21px; }
  .skel-merchant-hint{ display:inline-block; width:110px; height:12px; margin-top:4px; }
  .skel-detail-line.w-50{ width:50%; }
  .skel-detail-line.w-100{ width:100%; }
  .skel-detail-line.w-30{ width:30%; height:30px; margin-top:18px; }

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .marquee{animation:none;}
    .hero-reveal{animation:none !important; opacity:1 !important; transform:none !important;}
  }

  /* ---------- One orchestrated entrance moment: the hero on first paint.
     Deliberately not repeated as a scroll-reveal on every section below —
     see the design note in the hero markup for why. ---------- */
  @keyframes heroReveal{
    from{opacity:0; transform:translateY(14px);}
    to{opacity:1; transform:translateY(0);}
  }
  .hero-reveal{
    opacity:0;
    animation:heroReveal .7s var(--ease) forwards;
  }
  /* The real "hero" on this mobile-first storefront is the promo card at
     the very top of the homepage, not a desktop-style .hero block — so
     the one entrance moment plays across it and the tiles just below. */
  .promo-wrap.hero-reveal{animation-delay:.05s;}
  .notice-bar.hero-reveal{animation-delay:.16s;}
  .icon-grid.hero-reveal{animation-delay:.24s;}

  /* ---------- Checkout payment-method modal (bottom sheet) ---------- */
  /* .modal-overlay's base rule (centered popup, used by wallet.html's
     success modal too) lives earlier in this file — this just overrides
     the alignment/padding for the checkout sheet specifically. */
  #checkoutOverlay{ align-items:flex-end; padding:0; }
  #depositOverlay{ align-items:flex-end; padding:0; }
  .wallet-deposit-btn{
    display:flex; align-items:center; justify-content:center; gap:8px; width:100%; max-width:420px;
    margin-top:20px; padding:15px; border-radius:14px; border:none; cursor:pointer;
    background:linear-gradient(135deg, var(--coral), var(--gold)); color:#fff; font-family:inherit;
    font-weight:800; font-size:0.98rem; box-shadow:0 10px 22px -8px rgba(14,110,79,0.45);
  }
  .modal-box{
    background:var(--surface); width:100%; max-width:480px; max-height:88vh; overflow-y:auto;
    border-radius:26px 26px 0 0; padding:26px 22px 30px; box-shadow:0 -10px 30px rgba(0,0,0,0.2);
  }
  .modal-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:20px;}
  .modal-eyebrow{display:block; font-size:0.72rem; font-weight:800; letter-spacing:0.12em; color:var(--coral); margin-bottom:6px;}
  .modal-head h3{font-family:'Manrope',sans-serif; font-size:1.5rem; font-weight:800; letter-spacing:-0.01em;}
  .modal-close{
    flex:0 0 auto; width:36px; height:36px; border-radius:50%; border:none; background:var(--surface-2);
    color:var(--text); font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
  .order-summary-box{
    background:linear-gradient(135deg,#E9F5F0,#F6F8F7); border:1px solid rgba(14,110,79,0.18);
    border-radius:18px; padding:16px 18px; margin-bottom:22px;
  }
  .order-summary-box > span{font-size:0.76rem; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:0.06em;}
  .order-summary-row{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:10px; font-size:1.02rem; font-weight:700;}
  .order-summary-row strong{color:var(--coral); font-size:1.35rem; font-weight:800; white-space:nowrap;}
  .pm-section-label{font-weight:700; font-size:0.92rem; margin-bottom:12px;}
  .pm-list{display:flex; flex-direction:column; gap:12px; margin-bottom:20px;}
  .pm-row{
    display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:14px 16px;
    border:1.5px solid var(--line); border-radius:18px; background:var(--surface); cursor:pointer; transition:.15s;
    font-family:inherit;
  }
  .pm-row:hover{border-color:var(--coral); box-shadow:0 4px 16px rgba(20,24,27,0.06);}
  .pm-row.selected{border-color:var(--coral); background:#FFF1EF;}
  .pm-icon{
    flex:0 0 auto; width:46px; height:46px; border-radius:14px; font-weight:800; font-size:1.05rem;
    display:flex; align-items:center; justify-content:center;
  }
  .pm-icon svg{flex:0 0 auto;}
  .pm-info{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
  .pm-info strong{font-size:1rem; font-weight:800;}
  .pm-info span{font-size:0.8rem; color:var(--muted);}
  .pm-chev{
    flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:var(--surface-2); color:var(--muted);
    display:flex; align-items:center; justify-content:center;
  }
  .pm-terms{display:flex; align-items:flex-start; gap:10px; font-size:0.82rem; color:var(--muted); line-height:1.5; margin-bottom:18px; cursor:pointer;}
  .pm-terms input{flex:0 0 auto; margin-top:3px; width:16px; height:16px; accent-color:var(--coral);}
  .pm-terms a{color:var(--coral); font-weight:700;}
  .pm-back{background:none; border:none; color:var(--muted); font-weight:700; font-size:0.85rem; cursor:pointer; padding:0; margin-bottom:16px;}
  .pm-back:hover{color:var(--coral);}
  .manual-pay-box{background:var(--bg); border:1px dashed var(--line); border-radius:14px; padding:16px; margin-bottom:18px; text-align:center;}
  .manual-pay-box p{font-size:0.88rem; color:var(--muted); margin-bottom:10px; line-height:1.6;}
  .manual-pay-number{font-family:'Fraunces',serif; font-size:1.5rem; font-weight:700; color:var(--coral); letter-spacing:0.02em;}
  .manual-pay-number-row{display:flex; align-items:center; justify-content:center; gap:10px;}
  .manual-pay-copy-btn{
    flex:0 0 auto; width:34px; height:34px; border-radius:10px; border:1px solid var(--line); background:var(--surface);
    color:var(--muted); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .15s ease;
  }
  .manual-pay-copy-btn:hover{border-color:var(--coral); color:var(--coral);}
  .manual-pay-copy-btn.copied{border-color:var(--coral); background:var(--coral); color:#fff;}


  @media (max-width:640px){
    .modal-box{max-height:92vh;}
  }

/* ---------- Product order page (physical product + delivery details) ---------- */
.detail-price-row{display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap;}
#detailPriceSub{display:contents;}

body.pz-page{background:linear-gradient(180deg,#E9F2F7 0%,#E9F2F7 60%,#EFF4FA 100%); background-attachment:fixed;}
.pz-card{
  background:#fff; border:1.5px solid #C9E7DD; border-radius:22px; padding:14px 12px 14px;
  font-family:'Inter','Manrope',sans-serif;
}
.pz-card #detailDesc{color:#4B5563 !important; font-size:0.95rem; line-height:1.7; margin-bottom:14px !important;}
.pz-card #detailFeatures:empty{display:none !important;}
.pz-card #detailTitle{color:#111827;}

.pz-badges{flex-wrap:wrap; gap:10px; margin-bottom:18px;}
.pz-badge{font-size:0.8rem; font-weight:700; padding:7px 14px; border-radius:10px; border:1px solid; line-height:1.25;}
.pz-physical{background:#FFFBEB; border-color:#FDE68A; color:#B45309;}
.pz-stock{background:#ECFDF5; border-color:#A7F3D0; color:#047857;}
.pz-out{background:#FEF2F2; border-color:#FECACA; color:#B91C1C;}

.pz-card .detail-price-row{flex-direction:column; align-items:flex-start; gap:6px; margin-bottom:20px;}
.pz-card #detailPriceNow{font-size:2rem !important; font-weight:800 !important; color:#111827 !important; line-height:1.1;}
.pz-card #detailPriceSub{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.pz-card #detailPriceOld{color:#9CA3AF !important; font-size:0.95rem !important;}
.pz-card #detailDiscountBadge{background:#F00 !important; color:#fff; font-size:0.8rem !important; font-weight:800 !important; padding:4px 10px !important; border-radius:6px !important;}

.pz-delivery{background:#F3FDF9; border:1.5px solid #C9E7DD; border-radius:18px; padding:14px 13px; margin-bottom:16px; font-family:'Inter','Manrope',sans-serif;}
.pz-delivery h3{font-family:'Inter','Manrope',sans-serif; font-size:1.05rem; font-weight:700; color:#111827; margin:0 0 10px;}
.pz-est{font-size:0.86rem; color:#4B5563; line-height:1.55; margin:0 0 14px;}
.pz-est strong{color:#374151; font-weight:700;}
.pz-field{margin-bottom:12px; text-align:left;}
.pz-field label{display:block; font-size:0.86rem; font-weight:500; color:#4B5563; margin-bottom:6px;}
.pz-field label i{color:#DC2626; font-style:normal; margin-left:3px;}
.pz-field input, .pz-field select, .pz-field textarea{
  width:100%; padding:11px 14px; border-radius:12px; border:1px solid #D9EAE5; background:#fff;
  font-family:inherit; font-size:0.92rem; color:#111827;
}
.pz-field input::placeholder, .pz-field textarea::placeholder{color:#9CA3AF;}
.pz-field select{
  appearance:none; -webkit-appearance:none; padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
.pz-field textarea{min-height:88px; resize:vertical;}
.pz-field input:focus, .pz-field select:focus, .pz-field textarea:focus{outline:none; border-color:#059669;}
.pz-err{color:#DC2626; font-size:0.8rem; font-weight:600; margin:10px 0 0;}
.pz-err:empty{display:none;}
.pz-buy{
  align-items:center; justify-content:center; width:100%; border:none; cursor:pointer;
  background:#059669; color:#fff; font-family:'Inter','Manrope',sans-serif; font-weight:700; font-size:1.05rem;
  height:52px; border-radius:14px;
}
.pz-buy:disabled{background:#9CA3AF; cursor:not-allowed;}

body.pz-page .bar-head h2, body.pz-page .bar-head a{font-family:'Inter','Manrope',sans-serif;}
body.pz-page .bar-head .bar{background:#F00;}
body.pz-page .bar-head h2{font-weight:800; color:#111827;}
body.pz-page .bar-head h2 em{color:#F00;}
body.pz-page .bar-head a{color:#F00; font-weight:700; font-size:0.98rem;}

/* WhatsApp button (under Buy / কিনুন on product pages) */
.wa-btn{
  display:none; align-items:center; justify-content:center; gap:9px; width:100%; margin-top:12px;
  border:none; cursor:pointer; background:#25D366; color:#fff; font-family:inherit; font-weight:700; font-size:1.02rem;
  padding:15px; border-radius:100px;
}
.wa-btn:hover{background:#1FBE5A;}
.wa-btn svg{flex:0 0 auto;}
.pz-card .wa-btn{height:52px; padding:0; border-radius:14px; font-family:'Inter','Manrope',sans-serif; font-size:1.05rem; margin-top:10px;}

/* ---------- Video notices (notice page) ---------- */
.vn-section{margin-top:26px;}
.vn-section .bar-head{margin-bottom:14px;}
.vn-card{margin-bottom:22px;}
.vn-thumb{
  position:relative; aspect-ratio:16/9; border-radius:20px; overflow:hidden; background:#000; cursor:pointer;
  box-shadow:0 8px 20px -10px rgba(20,24,27,0.4); -webkit-tap-highlight-color:transparent;
}
.vn-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.vn-thumb iframe{position:absolute; top:0; left:0; width:100%; height:100%; border:0;}
.vn-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:54px; height:54px; border-radius:50%; background:#F00; color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,0.35);
}
.vn-play svg{width:24px; height:24px; margin-left:2px;}
.vn-thumb.playing{cursor:default;}
.vn-card .vn-title, .simple-page .vn-title{margin:10px 2px 0; font-size:1.02rem; font-weight:500; color:var(--text); line-height:1.5;}

/* ---------- Video pack detail page ---------- */
.vpd-card{background:var(--surface); border:1.5px solid var(--line); border-radius:20px; overflow:hidden; margin-bottom:8px;}
.vpd-body{padding:18px 16px 20px;}
.vpd-title-row{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px;}
.vpd-title-row h1{font-size:1.35rem; font-weight:800; color:var(--text); line-height:1.35; margin:0;}
.vpd-share-btn{
  display:flex; align-items:center; gap:6px; flex:0 0 auto; background:var(--bg); border:1.5px solid var(--line);
  border-radius:10px; padding:7px 12px; font-size:0.8rem; font-weight:700; color:var(--text); cursor:pointer;
}
.vpd-desc{color:var(--muted); font-size:0.92rem; line-height:1.7; margin:0 0 20px;}
.vpd-section-label{font-size:0.9rem; font-weight:700; color:var(--text); margin:0 0 10px;}
.vpd-qty-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px;}
.vpd-qty-chip{
  position:relative; flex:1 1 96px; display:flex; flex-direction:column; align-items:center; gap:3px;
  border:1.5px solid var(--line); background:var(--surface); border-radius:14px; padding:12px 8px; cursor:pointer;
  font-family:inherit;
}
.vpd-qty-chip.active{border-color:var(--coral); background:rgba(14,110,79,0.06);}
.vpd-qty-chip.oos{opacity:0.45; cursor:not-allowed;}
.vpd-qty-tag{position:absolute; top:-9px; left:50%; transform:translateX(-50%); background:var(--coral); color:#fff; font-size:0.62rem; font-weight:800; padding:2px 8px; border-radius:999px; white-space:nowrap;}
.vpd-qty-num{font-size:0.95rem; font-weight:800; color:var(--text);}
.vpd-qty-price{font-size:0.8rem; font-weight:700; color:var(--coral);}
.vpd-price-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:4px;}
.vpd-price{font-size:1.6rem; font-weight:800; color:var(--coral);}
.vpd-old-price{color:var(--muted); text-decoration:line-through; font-size:1.05rem;}
.vpd-discount{background:var(--coral); color:#fff; font-size:0.76rem; font-weight:800; padding:4px 10px; border-radius:6px;}
.vpd-stock{font-size:0.85rem; font-weight:700; margin:0 0 16px;}
.vpd-features{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:8px;}
.vpd-features li{font-size:0.84rem; color:var(--muted); padding-left:22px; position:relative;}
.vpd-features li::before{content:'✓'; position:absolute; left:0; color:#16A34A; font-weight:800;}

/* ---------- Games / Live Stream — list page ("Choose Live Stream") ---------- */
.gs-head{padding:4px 0 18px;}
.gs-head .left{display:flex; align-items:center; gap:10px; margin-bottom:6px;}
.gs-head .bar{width:5px; height:26px; background:var(--coral); border-radius:4px; flex:0 0 auto;}
.gs-head h2{font-size:1.4rem; margin:0;}
.gs-head h2 em{font-style:normal; color:var(--coral);}
.gs-subtitle{color:var(--muted); font-size:0.88rem; margin:0 0 0 15px;}

.gs-list{display:flex; flex-direction:column; gap:14px;}
.gs-item{
  display:flex; gap:14px; text-decoration:none; color:inherit;
  background:var(--surface); border:1.5px solid var(--line); border-radius:16px; padding:12px;
}
.gs-item-thumb{
  position:relative; flex:0 0 108px; width:108px; height:108px; border-radius:12px; background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center;
}
.gs-live-badge{
  position:absolute; top:6px; left:6px; display:flex; align-items:center; gap:4px;
  background:rgba(220,38,38,0.92); color:#fff; font-size:0.6rem; font-weight:800; letter-spacing:0.03em;
  padding:2px 7px 2px 5px; border-radius:5px;
}
.gs-live-badge i{width:5px; height:5px; border-radius:50%; background:#fff; display:inline-block;}
.gs-play-icon{
  width:38px; height:38px; border-radius:50%; background:rgba(220,38,38,0.85);
  display:flex; align-items:center; justify-content:center;
}
.gs-item-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:4px;}
.gs-item-body h4{font-size:0.98rem; font-weight:800; margin:0; color:var(--text);}
.gs-item-body p{
  color:var(--muted); font-size:0.8rem; line-height:1.5; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.gs-item-foot{display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:4px;}
.gs-from-price{color:var(--coral); font-weight:800; font-size:0.92rem;}
.gs-subscribe-link{color:var(--muted); font-weight:700; font-size:0.82rem;}
.gs-active-wrap{display:inline-flex; align-items:center; gap:7px;}
.gs-active-tag{
  display:inline-flex; align-items:center; gap:5px; color:#16A34A; font-weight:800; font-size:0.78rem;
  background:#EAFBF1; border:1px solid #BFEBD3; padding:3px 9px 3px 7px; border-radius:100px;
}
.gs-active-tag i{width:6px; height:6px; border-radius:50%; background:#16A34A; display:inline-block; animation:gsPulse 1.6s ease-in-out infinite;}
@keyframes gsPulse{0%,100%{opacity:1; transform:scale(1);} 50%{opacity:0.45; transform:scale(0.75);}}
.gs-countdown{
  display:inline-flex; align-items:center; gap:5px; color:#DC2626; font-weight:800; font-size:0.8rem;
  background:#FEF2F2; border:1px solid #FBD5D5; padding:3px 9px; border-radius:100px;
  font-variant-numeric:tabular-nums; letter-spacing:0.02em; font-family:'Courier New',monospace;
}
.gs-countdown svg{flex:0 0 auto;}

.gs-paywith{margin-top:32px; background:var(--surface); border:1.5px solid var(--line); border-radius:18px; padding:20px 16px; text-align:center;}
.gs-paywith-label{color:var(--muted); font-size:0.68rem; font-weight:800; letter-spacing:0.12em;}
.gs-paywith-title{color:var(--coral); font-weight:800; font-size:1.05rem; margin:6px 0 16px;}
.gs-paywith-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
.gs-pay-badge{
  display:flex; align-items:center; justify-content:center; height:40px; border-radius:10px; border:1px solid var(--line);
  background:var(--bg); font-size:0.68rem; font-weight:800; color:var(--text); padding:0 4px; text-align:center;
}
.gs-pay-visa{color:#1A1F71;}
.gs-pay-mc{color:#EB001B;}
.gs-pay-amex{color:#006FCF;}
.gs-pay-union{color:#E21836;}
.gs-pay-bkash{color:#E2136E;}
.gs-pay-nagad{color:#F7941D;}
.gs-pay-rocket{color:#8C3494;}
.gs-pay-taka{color:#16A34A;}

/* ---------- Games / Live Stream — detail page (game-detail.html) ---------- */
.gd-tag-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px;}
.gd-tag{font-size:0.72rem; font-weight:700; padding:5px 12px; border-radius:999px; border:1.3px solid;}
.gd-tag-live{color:#DC2626; background:rgba(220,38,38,0.07); border-color:rgba(220,38,38,0.35);}
.gd-tag-sub{color:#B45309; background:rgba(217,119,6,0.08); border-color:rgba(217,119,6,0.35);}

.gd-price-row{display:flex; align-items:baseline; gap:10px; margin-bottom:4px;}
.gd-price{font-size:2rem; font-weight:900; color:var(--text); font-family:'Fraunces',serif;}
.gd-period-label{color:var(--muted); font-size:0.92rem; font-weight:600;}

.gd-period-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:22px;}
.gd-period-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left;
  border:none; border-radius:14px; padding:16px 18px; cursor:pointer; font-family:inherit;
  background:rgba(22,163,74,0.09);
}
.gd-period-name{font-size:1rem; font-weight:800; color:var(--text);}
.gd-period-price{font-size:0.82rem; font-weight:600; color:var(--muted);}
.gd-period-card.active{background:#EF3B3B;}
.gd-period-card.active .gd-period-name,
.gd-period-card.active .gd-period-price{color:#fff;}

.gd-subscribe-btn{
  width:100%; border:none; cursor:pointer; padding:16px; border-radius:100px; font-family:inherit;
  font-size:1.02rem; font-weight:800; color:#fff; background:linear-gradient(135deg,#16A34A,#15803D);
}