/* ============ THEME2 LANDING — hero, deal, marquee, cat-scroll, story, faq, testi ============ */

/* ============ HERO ============ */
.hero{padding-top:28px;min-height:min(680px,calc(88svh - var(--header-h)));display:flex;flex-direction:column;justify-content:center;position:relative}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center}
.kicker{display:flex;align-items:center;gap:14px;color:var(--ink2);font-weight:600;font-size:.9rem;margin-bottom:16px}
.kicker::before{content:'';width:44px;height:1.5px;background:var(--accent)}
.hero-title{font-size:clamp(2.2rem,5.6vw,4.2rem);font-weight:900;line-height:1.25}
.accent-u{position:relative;color:var(--accent)}
.accent-u svg{position:absolute;inset-inline:0;bottom:-.12em;width:100%;height:.32em;overflow:visible}
.u-path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--ease) 1.15s}
body.loaded .u-path{stroke-dashoffset:0}
.hero-sub{max-width:480px;color:var(--ink2);margin-top:16px;font-size:1.02rem}
.hero-cta{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap}
.hero-visual{position:relative;justify-self:center;width:min(460px,100%)}
.hv-deco{position:absolute;bottom:-44px;inset-inline-end:-44px;width:220px;height:220px;border-radius:50%;background:var(--bg2)}
.hv-main{position:relative;border-radius:200px 200px var(--r-lg) var(--r-lg);overflow:hidden;aspect-ratio:5/6;background:var(--bg2)}
.hv-main img{width:100%;height:100%;object-fit:cover}
.hv-card{position:absolute;bottom:-26px;inset-inline-start:-42px;width:172px;border-radius:var(--r-md);overflow:hidden;border:6px solid var(--bg);box-shadow:0 24px 50px rgba(30,32,37,.16)}
.hv-card-inner{animation:float 6s ease-in-out infinite}
.hv-card img{width:100%;aspect-ratio:4/5;object-fit:cover}
.hv-badge{position:absolute;top:24px;inset-inline-end:-30px;width:112px;height:112px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;box-shadow:0 18px 36px rgba(215,25,33,.35)}
.hv-badge .ic{width:44px;height:44px;stroke-width:2.4;animation:spin 11s linear infinite;color:#F7C948}
@keyframes float{50%{transform:translateY(-12px)}}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:clamp(40px,5vw,60px)}
.stat{padding:20px 8px;display:flex;flex-direction:column;gap:4px}
.stat+.stat{border-inline-start:1px solid var(--line)}
.stat-num{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:800;line-height:1.3}
.stat-num em{font-style:normal;color:var(--accent)}
.stat-label{color:var(--ink2);font-size:.88rem}
.scroll-hint{position:absolute;bottom:18px;left:50%;translate:-50% 0;width:1.5px;height:52px;background:var(--line2);overflow:hidden}
.scroll-hint::after{content:'';position:absolute;top:-40%;left:0;width:100%;height:40%;background:var(--accent);animation:sh 1.8s var(--ease) infinite}
@keyframes sh{to{top:110%}}

/* ============ CATEGORIES (drag scroller) ============ */
.cat-scroll{display:flex;gap:20px;overflow-x:auto;scrollbar-width:none;cursor:grab;padding-block:6px;margin-top:32px}
.cat-scroll::-webkit-scrollbar{display:none}
.cat-scroll.drag{cursor:grabbing}
.cat-scroll.drag .cat-card img{transform:scale(1)}
.cat-card{position:relative;flex:0 0 250px;height:300px;border-radius:var(--r-md);overflow:hidden;background:var(--bg2)}
.cat-card.wide{flex-basis:330px}
.cat-card img{width:100%;height:100%;object-fit:cover;pointer-events:none;transition:transform .7s var(--ease)}
.cat-card:hover img{transform:scale(1.07)}
.cat-bar{position:absolute;inset-inline:12px;bottom:12px;background:var(--paper);border-radius:var(--r-sm);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.cat-bar b{font-size:.98rem}
.cat-bar small{display:block;color:var(--ink2);font-size:.75rem}
.cat-bar .ic{color:var(--accent);transition:transform .35s var(--ease)}
.cat-card:hover .cat-bar .ic{transform:translateX(-5px)}
.cat-foot{display:flex;align-items:center;gap:20px;margin-top:20px}
.cat-btns{display:flex;gap:10px}
.cat-progress{flex:1;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.cat-progress span{display:block;height:100%;width:20%;background:var(--ink);transition:width .2s}

/* ============ STORY / SPLIT ============ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center}
.split-media{position:relative}
.split-frame{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;background:var(--bg2)}
.parallax{height:118%;position:relative;top:-9%}
.parallax img{width:100%;height:100%;object-fit:cover;will-change:transform}
.chip-float{position:absolute;bottom:30px;inset-inline-start:-20px;background:var(--ink);color:var(--bg);padding:15px 22px;border-radius:16px;display:flex;align-items:center;gap:12px;font-weight:700;font-size:.9rem;animation:float 5.5s ease-in-out infinite}
.chip-float .ic{color:var(--accent)}
.step{display:flex;gap:22px;padding-block:16px;border-bottom:1px solid var(--line);align-items:flex-start}
.step:first-of-type{margin-top:26px}
.step-num{font-size:1.5rem;font-weight:800;color:transparent;-webkit-text-stroke:1.2px var(--ink2);line-height:1.6}
.step b{display:block;font-size:1.05rem}
.step p{color:var(--ink2);font-size:.92rem}

/* ============ FAQ ============ */
.faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,4vw,56px);align-items:start}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:16px;font-weight:700;font-size:1.05rem;text-align:start}
.faq-q .ic{transition:transform .45s var(--ease);color:var(--accent)}
.faq-item.open .faq-q .ic{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .55s var(--ease)}
.faq-a p{padding-bottom:16px;color:var(--ink2);font-size:.95rem;max-width:56ch}

/* ============ TESTIMONIALS ============ */
.testi{overflow:hidden;margin-top:36px;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.testi-track{display:flex;gap:22px;width:max-content;animation:mq 46s linear infinite}
.testi:hover .testi-track{animation-play-state:paused}
.t-card{width:370px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:22px;flex-shrink:0}
.t-stars{display:flex;gap:3px;color:var(--accent)}
.t-quote{margin-block:14px 20px;font-size:.98rem}
.t-person{display:flex;align-items:center;gap:12px}
.t-avatar{width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-weight:800}
.t-person b{display:block;font-size:.92rem;line-height:1.5}
.t-person small{color:var(--ink2)}

/* ============ DEAL BAND (home) ============ */
.deal-band{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:24px;align-items:center;background:linear-gradient(120deg,#EF394E 0%,#E02440 55%,#D71921 100%);border-radius:var(--r-lg);padding:clamp(20px,3vw,34px);color:#fff;overflow:hidden}
.deal-band::before{content:'';position:absolute;inset-inline-start:-90px;top:-90px;width:270px;height:270px;border-radius:50%;background:rgba(255,255,255,.09)}
.deal-band::after{content:'';position:absolute;bottom:-70px;inset-inline-end:26%;width:190px;height:190px;border-radius:50%;background:rgba(255,255,255,.07)}
.deal-info{position:relative;z-index:1}
.deal-label{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.18);padding:7px 16px;border-radius:999px;font-weight:800;font-size:.83rem}
.deal-label .ic{width:15px;height:15px;animation:flick 1.5s infinite}
@keyframes flick{50%{transform:scale(1.3) rotate(-8deg)}}
.deal-title{font-size:clamp(1.45rem,3vw,2.1rem);font-weight:900;margin-top:14px}
.deal-desc{opacity:.94;margin-top:8px;max-width:46ch;font-size:.95rem}
.ds-bar{height:9px;background:rgba(255,255,255,.26);border-radius:9px;overflow:hidden;margin-top:18px;position:relative;z-index:1}
.ds-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,#F7C948,#F58B00);border-radius:9px;transition:width 1.5s var(--ease)}
.deal-stock{display:block;margin-top:9px;font-size:.78rem;opacity:.92;position:relative;z-index:1}
.deal-cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:22px;position:relative;z-index:1}
.deal-price{display:flex;align-items:baseline;gap:10px}
.deal-price .dp-now{font-size:1.55rem;font-weight:900}
.deal-price .dp-now small{font-size:.8rem;font-weight:700}
.deal-price del{opacity:.75}
.btn-light{background:#fff;color:#D71921;--btn-fill:#1E2025;--btn-fg:#fff}
.deal-media{position:relative;justify-self:center;width:min(330px,100%);z-index:1}
.deal-media img{width:100%;border-radius:var(--r-md);aspect-ratio:4/3;object-fit:cover;transform:rotate(2deg);border:6px solid rgba(255,255,255,.5);box-shadow:0 26px 55px rgba(0,0,0,.3)}
.deal-count{position:absolute;bottom:-16px;inset-inline-end:-8px;background:#1E2025;color:#fff;display:flex;align-items:center;gap:9px;padding:10px 16px;border-radius:14px;font-weight:800;font-size:.86rem;box-shadow:0 14px 30px rgba(0,0,0,.32)}
.deal-count .ic{color:#F7C948;width:16px;height:16px}
.deal-count b{font-variant-numeric:tabular-nums;min-width:74px;text-align:center;background:rgba(255,255,255,.13);border-radius:8px;padding:2px 8px}
/* deal chip (product page) */
.deal-chip{display:inline-flex;align-items:center;gap:8px;background:rgba(239,57,78,.07);color:var(--accent);border:1px dashed rgba(239,57,78,.45);padding:8px 15px;border-radius:999px;font-weight:800;font-size:.8rem;margin-top:14px}
.deal-chip .ic{width:14px;height:14px;animation:flick 1.5s infinite}
.deal-chip b{font-variant-numeric:tabular-nums}

/* ============ RESPONSIVE ============ */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:56px}
  .hero-visual{width:min(420px,100%);margin-top:10px}
  .split,.faq-wrap{grid-template-columns:1fr}
}
@media (max-width:820px){.deal-band{grid-template-columns:1fr}.deal-media{order:-1;width:min(300px,86%)}}
@media (max-width:600px){
  .hero-stats{grid-template-columns:1fr}
  .stat+.stat{border-inline-start:none;border-top:1px solid var(--line)}
  .hv-card{width:130px;inset-inline-start:-14px}
  .hv-badge{width:92px;height:92px;inset-inline-end:-12px}
  .cat-card{flex-basis:210px;height:300px}.cat-card.wide{flex-basis:250px}
  .t-card{width:300px}
  .chip-float{inset-inline-start:10px}
  .scroll-hint{display:none}
  .deal-count{inset-inline-end:0;bottom:-14px;padding:8px 12px;font-size:.78rem}
}