@font-face { font-family: "Thmanyah"; src: url(/assets/fonts/thmanyah-regular.woff2) format("woff2"); font-display: swap; font-weight: 400; }
@font-face { font-family: "Thmanyah"; src: url(/assets/fonts/thmanyah-medium.woff2) format("woff2"); font-display: swap; font-weight: 500 600; }
@font-face { font-family: "Thmanyah"; src: url(/assets/fonts/thmanyah-bold.woff2) format("woff2"); font-display: swap; font-weight: 700 800; }
@font-face { font-family: "Thmanyah"; src: url(/assets/fonts/thmanyah-black.woff2) format("woff2"); font-display: swap; font-weight: 900; }
:root { --pink: #FE4668; --ice: #5CC8FF; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: #000; }
body { margin: 0 auto; max-width: 440px; background: #000; color: #fff; font-family: "Thmanyah", "SF Arabic", system-ui, sans-serif; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { color: transparent; }
.k { font-size: 12px; color: var(--pink); font-weight: 700; }
h2.t { font-size: 30px; font-weight: 900; margin: 8px 0 0; line-height: 1.2; }
h2.t em { font-style: normal; color: var(--pink); }
.sub { font-size: 14px; opacity: .6; margin: 10px 0 0; line-height: 1.7; }
.center { text-align: center; }
section { position: relative; }
.pad { padding: 0 22px; }
.reveal { opacity: 0; transform: translateY(22px); filter: blur(6px); transition: opacity .8s, transform .8s cubic-bezier(.2,.8,.2,1), filter .8s; }
.reveal.in { opacity: 1; transform: none; filter: none; }

/* header */
.hdr { position: fixed; z-index: 20; top: 12px; left: 50%; transform: translateX(-50%); width: min(416px, calc(100% - 24px)); height: 46px; border-radius: 999px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 18px; background: rgba(20,20,22,.55); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); }
.hdr .logo { font-weight: 900; font-size: 18px; }
.hdr .store { font-size: 12px; padding: 8px 12px; opacity: .45; }

/* floating cta */
.cta { position: fixed; z-index: 20; bottom: calc(22px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); white-space: nowrap; font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 26px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 30px rgba(254,70,104,.35); transition: opacity .4s, transform .4s; }
.cta.hide { opacity: 0; transform: translateX(-50%) translateY(20px); pointer-events: none; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); animation: pulse 1.8s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(254,70,104,.7); } 70% { box-shadow: 0 0 0 10px rgba(254,70,104,0); } 100% { box-shadow: 0 0 0 0 rgba(254,70,104,0); } }

/* 1 hero + unbox */
.hero { height: 330vh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-txt { position: absolute; top: 96px; left: 0; right: 0; text-align: center; z-index: 2; }
.hero-txt .kick { font-size: 13px; opacity: .65; }
.hero-txt h1 { font-size: 40px; line-height: 1.12; margin: 8px 0 0; font-weight: 900; }
.hero-txt h1 span { color: var(--pink); }
.teaser { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; background: rgba(254,70,104,.14); border: 1px solid rgba(254,70,104,.45); box-shadow: 0 0 24px rgba(254,70,104,.25); }
.teaser i { font-style: normal; display: inline-block; animation: wiggle 2.4s ease-in-out infinite; }
@keyframes wiggle { 0%, 70%, 100% { transform: none; } 76% { transform: rotate(-14deg) scale(1.15); } 84% { transform: rotate(12deg) scale(1.15); } 92% { transform: rotate(-6deg); } }
.hint { position: absolute; bottom: 96px; width: 100%; text-align: center; font-size: 12px; opacity: .55; z-index: 2; }
.hint i { display: block; font-style: normal; margin-top: 4px; animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(6px); } }
.end-txt { position: absolute; top: 96px; left: 0; right: 0; text-align: center; z-index: 2; opacity: 0; }
.end-txt b { font-size: 64px; font-weight: 900; color: var(--pink); line-height: 1; display: block; }
.end-txt span { font-size: 20px; font-weight: 800; }

/* 2 tools */
.tools { padding: 70px 0 40px; }
.rail { display: flex; gap: 14px; overflow-x: auto; padding: 26px calc(50% - 120px) 8px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.tcard { flex: 0 0 240px; border-radius: 28px; scroll-snap-align: center; position: relative; overflow: hidden; background: #0a0a0c; border: 1px solid rgba(255,255,255,.08); transition: transform .4s, opacity .4s; cursor: pointer; }
.tcard img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; }
.tcard .meta { padding: 14px 18px 18px; }
.tcard .n { font-size: 12px; color: var(--pink); font-weight: 700; }
.tcard.cold .n { color: var(--ice); }
.tcard h3 { margin: 3px 0 4px; font-size: 19px; }
.tcard p { margin: 0; font-size: 13px; opacity: .6; line-height: 1.55; }
.tcard .back { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; text-align: center; padding: 22px; background: radial-gradient(circle at 50% 40%, rgba(254,70,104,.35), #0a0a0c 70%); opacity: 0; transform: scale(.96); transition: opacity .35s, transform .35s; pointer-events: none; }
.tcard.cold .back { background: radial-gradient(circle at 50% 40%, rgba(92,200,255,.3), #0a0a0c 70%); }
.tcard .back b { font-size: 14px; opacity: .7; font-weight: 500; }
.tcard .back span { font-size: 21px; font-weight: 800; line-height: 1.5; }
.tcard.flip .back { opacity: 1; transform: none; }
.dots { display: flex; gap: 5px; justify-content: center; margin-top: 16px; }
.dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.22); transition: all .3s; }
.dots i.on { width: 18px; background: var(--pink); }
.tap { text-align: center; font-size: 12px; opacity: .45; margin-top: 12px; }

/* 3 gifts */
.gifts-intro { padding: 60px 22px 10px; }
.app { height: 190vh; }
.stick { position: sticky; top: 70px; padding-top: 10px; }
.gift { text-align: center; }
.tag { display: inline-block; font-size: 12px; padding: 5px 12px; border-radius: 999px; background: rgba(254,70,104,.15); color: var(--pink); font-weight: 700; }
.gift h3 { margin: 8px 0 0; font-size: 24px; font-weight: 900; }
.dev { position: relative; width: 200px; height: 416px; margin: 18px auto 0; border-radius: 34px; border: 6px solid #1c1c1f; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 24px 60px rgba(254,70,104,.25); max-height: 52vh; width: calc(min(52vh, 416px) * .48); }
.dev img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transform: scale(1.04); transition: opacity .5s, transform .6s cubic-bezier(.2,.8,.2,1); }
.dev img.on { opacity: 1; transform: none; }
.caps { position: relative; height: 84px; margin-top: 18px; }
.cap { position: absolute; inset: 0 30px; text-align: center; opacity: 0; transform: translateY(10px); transition: opacity .45s, transform .45s; }
.cap.on { opacity: 1; transform: none; }
.cap b { display: block; font-size: 19px; }
.cap span { font-size: 13.5px; opacity: .6; line-height: 1.6; }
.ticks { display: flex; gap: 5px; justify-content: center; margin-top: 6px; }
.ticks i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.2); transition: all .3s; }
.ticks i.on { width: 18px; background: var(--pink); }
.book { padding: 40px 0 30px; }
.cover { width: 180px; margin: 22px auto 0; perspective: 900px; }
.cover img { width: 100%; border-radius: 6px 14px 14px 6px; display: block; transform: rotateY(-28deg) rotateX(6deg); transition: transform 1.1s cubic-bezier(.2,.8,.2,1); box-shadow: -14px 18px 40px rgba(0,0,0,.6), 0 0 50px rgba(254,70,104,.18); }
.cover.flat img { transform: none; }
.stats { display: flex; gap: 10px; margin: 24px 22px 0; }
.stat { flex: 1; text-align: center; padding: 12px 0; border-radius: 18px; background: rgba(255,255,255,.05); }
.stat b { display: block; font-size: 30px; font-weight: 900; color: var(--pink); }
.stat span { font-size: 12px; opacity: .6; }
.pages { display: flex; gap: 12px; overflow-x: auto; padding: 22px calc(50% - 85px) 6px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pages::-webkit-scrollbar { display: none; }
.pages figure { flex: 0 0 170px; margin: 0; scroll-snap-align: center; text-align: center; font-size: 12px; opacity: .85; }
.pages img { width: 170px; border-radius: 12px; display: block; margin-bottom: 6px; }
.cal { margin: 22px 22px 0; padding: 16px; border-radius: 22px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.cal .tt { font-size: 15px; font-weight: 700; text-align: center; }
.chips { display: flex; gap: 8px; justify-content: center; margin: 12px 0; }
.chips span { font-size: 14px; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.07); cursor: pointer; transition: all .25s; }
.chips span.on { background: var(--pink); font-weight: 700; }
.pv { width: 150px; height: 267px; margin: 0 auto; position: relative; border-radius: 12px; overflow: hidden; background: #fff; }
.pv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s; }
.pv img.on { opacity: 1; }
.deliver { margin: 20px 22px 0; font-size: 13px; line-height: 1.7; text-align: center; opacity: .7; }

/* 4 calc */
.calc { padding: 80px 22px 40px; }
.q { text-align: center; font-size: 14px; opacity: .6; margin: 22px 0 6px; }
.months { text-align: center; font-size: 17px; font-weight: 700; }
.months b { font-size: 42px; font-weight: 900; color: var(--pink); }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; margin: 14px 0 4px; direction: ltr; transform: scaleX(-1); background: linear-gradient(90deg, var(--pink) var(--p, 50%), rgba(255,255,255,.12) var(--p, 50%)); outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 7px rgba(254,70,104,.25), 0 4px 12px rgba(0,0,0,.5); cursor: grab; }
input[type=range]::-moz-range-thumb { width: 30px; height: 30px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 7px rgba(254,70,104,.25); }
.ends { display: flex; justify-content: space-between; font-size: 11px; opacity: .4; }
.bars { display: flex; gap: 24px; align-items: flex-end; justify-content: center; height: 210px; margin-top: 18px; }
.bar { width: 110px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.bar .v { font-size: 18px; font-weight: 900; margin-bottom: 8px; white-space: nowrap; }
.bar .col { width: 100%; border-radius: 16px 16px 6px 6px; transition: height .45s cubic-bezier(.2,.8,.2,1); min-height: 10px; }
.bar.gym .col { background: repeating-linear-gradient(135deg, rgba(255,255,255,.16) 0 6px, rgba(255,255,255,.08) 6px 12px); }
.bar.gym .v { opacity: .7; }
.bar.box .col { background: linear-gradient(180deg, #FF6A86, var(--pink)); box-shadow: 0 0 30px rgba(254,70,104,.45); }
.bar .l { font-size: 12px; opacity: .65; margin-top: 8px; text-align: center; line-height: 1.4; }
.save { margin-top: 16px; text-align: center; padding: 14px; border-radius: 20px; background: linear-gradient(135deg, rgba(254,70,104,.18), rgba(254,70,104,.04)); border: 1px solid rgba(254,70,104,.3); }
.save .s1 { font-size: 13px; opacity: .7; }
.save .s2 { font-size: 28px; font-weight: 900; }
.save .s2 span { color: var(--pink); }
.save .s3 { font-size: 12px; opacity: .55; margin-top: 2px; }
.extra { display: flex; gap: 6px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.extra span { font-size: 12px; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.06); text-decoration: line-through; text-decoration-color: rgba(254,70,104,.8); opacity: .8; }
.extra-t { text-align: center; font-size: 12px; opacity: .55; margin-top: 6px; }
.foot { text-align: center; font-size: 10.5px; opacity: .35; margin-top: 10px; }

/* 5 reviews */
.reviews { padding: 80px 0 30px; }
.big { font-size: 72px; font-weight: 900; line-height: 1; margin-top: 10px; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.stars { display: inline-flex; gap: 4px; margin-top: 10px; direction: ltr; }
.stars i { width: 24px; height: 24px; position: relative; }
.stars i::before, .stars i::after { content: "★"; position: absolute; inset: 0; font-size: 24px; line-height: 24px; font-style: normal; }
.stars i::before { color: rgba(255,255,255,.15); }
.stars i::after { color: #FFC83D; clip-path: inset(0 calc(100% - var(--f, 0%)) 0 0); }
.rmeta { font-size: 13px; opacity: .65; margin-top: 8px; }
.marq { direction: ltr; transform: translateZ(0); overflow: hidden; margin-top: 14px; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marq:first-of-type { margin-top: 30px; }
.lane { display: flex; gap: 12px; width: max-content; will-change: transform; }
.m1 .lane { animation: goR 70s linear infinite; }
.m2 .lane { animation: goL 80s linear infinite; }
.marq:active .lane, .marq.hold .lane { animation-play-state: paused; }
@keyframes goR { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes goL { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.rv { direction: rtl; flex: 0 0 auto; max-width: 250px; padding: 14px 16px; border-radius: 20px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.09); cursor: pointer; }
.rv .s { color: #FFC83D; font-size: 11px; letter-spacing: 1px; }
.rv p { margin: 5px 0 0; font-size: 15px; line-height: 1.55; font-weight: 600; white-space: normal; }
.rv .v { font-size: 12.5px; opacity: .6; margin-top: 8px; font-weight: 700; }
.sheet { position: fixed; inset: 0; z-index: 30; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,0); pointer-events: none; transition: background .3s; }
.sheet.on { background: rgba(0,0,0,.65); pointer-events: auto; }
.panel { width: 100%; max-width: 440px; background: #111114; border-radius: 28px 28px 0 0; padding: 12px 18px calc(28px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform .4s cubic-bezier(.2,.8,.2,1); border-top: 1px solid rgba(255,255,255,.1); }
.sheet.on .panel { transform: none; }
.grab { width: 40px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.25); margin: 0 auto 14px; }
.panel .h { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.panel .h span { font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 999px; background: rgba(46,204,113,.15); color: #4ade80; }
.panel img { width: 100%; border-radius: 16px; margin-top: 12px; display: block; }
.panel .x { margin-top: 14px; text-align: center; font-size: 13px; opacity: .55; cursor: pointer; }


/* ELS code */
.els { margin-top: 30px; position: relative; border-radius: 26px; padding: 22px 18px 18px; background: radial-gradient(120% 80% at 50% 0%, rgba(254,70,104,.22), rgba(254,70,104,.03) 60%), #0b0b0e; border: 1px solid rgba(254,70,104,.35); overflow: hidden; }
.els::before, .els::after { content: ""; position: absolute; top: 118px; width: 22px; height: 22px; border-radius: 50%; background: #000; border: 1px solid rgba(254,70,104,.35); }
.els::before { right: -12px; } .els::after { left: -12px; }
.els .eh { text-align: center; font-size: 13px; opacity: .7; }
.els .eh b { color: var(--pink); opacity: 1; }
.code { margin: 12px auto 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 230px; height: 62px; padding: 0 8px 0 20px; border-radius: 18px; border: 2px dashed rgba(255,255,255,.35); cursor: pointer; transition: border-color .3s, background .3s; }
.code b { font-size: 32px; font-weight: 900; letter-spacing: 6px; direction: ltr; }
.code span { font-size: 13px; font-weight: 700; padding: 9px 14px; border-radius: 12px; background: var(--pink); transition: background .3s; white-space: nowrap; }
.code.ok { border-color: #4ade80; background: rgba(74,222,128,.06); }
.code.ok span { background: #22c55e; }
.cut { border-top: 1px dashed rgba(255,255,255,.18); margin: 22px -18px 16px; }
.eg { display: flex; align-items: center; gap: 12px; padding: 9px 0; opacity: 0; transform: translateX(-14px); transition: opacity .5s, transform .5s cubic-bezier(.2,.8,.2,1); }
.els.in .eg { opacity: 1; transform: none; }
.els.in .eg:nth-child(2) { transition-delay: .12s; } .els.in .eg:nth-child(3) { transition-delay: .24s; }
.eg .ic { width: 52px; height: 52px; border-radius: 14px; flex: 0 0 auto; display: grid; place-items: center; font-size: 22px; background: rgba(255,255,255,.06); overflow: hidden; }
.eg .ic img { width: 100%; height: 100%; object-fit: cover; }
.eg .tx b { display: block; font-size: 15px; }
.eg .tx small { font-size: 12px; opacity: .55; }
.eg .val { margin-inline-start: auto; font-size: 15px; font-weight: 800; color: var(--pink); white-space: nowrap; }
.etotal { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); font-size: 14px; font-weight: 700; }
.etotal b { font-size: 22px; font-weight: 900; color: var(--pink); }
.ehow { margin-top: 12px; font-size: 12px; opacity: .5; text-align: center; line-height: 1.7; }
/* 6 final */
.final { padding: 90px 22px 40px; }
.final .img { margin: 22px -22px 0; height: 460px; position: relative; overflow: hidden; }
.final .img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; -webkit-mask: linear-gradient(180deg, transparent, #000 14%, #000 80%, transparent); mask: linear-gradient(180deg, transparent, #000 14%, #000 80%, transparent); }
.list { margin: 6px 0 0; padding: 0; list-style: none; }
.list li { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 16px; font-weight: 600; }
.list li i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(254,70,104,.16); color: var(--pink); font-style: normal; font-size: 13px; flex: 0 0 auto; }
.list li small { margin-inline-start: auto; font-size: 12px; opacity: .5; font-weight: 500; }
.price { text-align: center; margin-top: 28px; }
.price .now { font-size: 54px; font-weight: 900; }
.price .now small { font-size: 20px; font-weight: 700; }
.price .was { font-size: 18px; opacity: .45; text-decoration: line-through; margin-inline-start: 8px; }
.price .off { display: inline-block; margin-top: 6px; font-size: 13px; padding: 5px 12px; border-radius: 999px; background: rgba(254,70,104,.15); color: var(--pink); font-weight: 700; }
.buy { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 22px; height: 58px; border-radius: 999px; font-size: 17px; font-weight: 800;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.24); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 10px 40px rgba(254,70,104,.45); }
.note { text-align: center; font-size: 12.5px; opacity: .55; margin-top: 12px; line-height: 1.7; }
.faq { margin-top: 44px; }
.faq h3 { font-size: 20px; margin: 0 0 8px; }
details { border-bottom: 1px solid rgba(255,255,255,.08); padding: 16px 0; }
summary { list-style: none; cursor: pointer; font-size: 15.5px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-size: 22px; color: var(--pink); transition: transform .3s; }
details[open] summary::after { transform: rotate(45deg); }
details p { margin: 10px 0 0; font-size: 14px; opacity: .65; line-height: 1.75; }
footer { padding: 34px 22px calc(110px + env(safe-area-inset-bottom)); text-align: center; border-top: 1px solid rgba(255,255,255,.07); margin-top: 30px; }
footer .logo { font-size: 26px; font-weight: 900; }
footer .tl { font-size: 12px; opacity: .45; margin-top: 4px; }
footer .browse { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 14px; padding: 11px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); opacity: .8; }
footer .copy { font-size: 11px; opacity: .3; margin-top: 22px; }