/* FX layer: progress bar, 3D tilt, magnetic, cursor, spotlight (loaded after motion.css) */
.fx-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1000; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--leaf, #3d8b37), var(--lime, #b9dc55), #f2952b); pointer-events: none; }

/* 3D tilt cards */
.fx-tilt { position: relative; transform-style: preserve-3d; }
.fx-tilt.tilting { transform: perspective(900px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateY(-8px) scale(1.015) !important; transition: transform .12s ease-out, box-shadow .3s !important; box-shadow: 0 28px 60px rgba(14, 42, 26, .28); z-index: 2; }
.fx-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .28), transparent 55%); mix-blend-mode: soft-light; z-index: 3; }
.fx-tilt.tilting .fx-glare { opacity: 1; }
.p-card .thumb img { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.p-card:hover .thumb img { transform: scale(1.07); }

/* Magnetic */
.fx-magnet { transition: translate .25s cubic-bezier(.2, .8, .2, 1), background .3s, box-shadow .3s, transform .3s; }

/* Parallax targets get a smooth hand-off */
.why .pic { overflow: hidden; }
.why .pic img { scale: 1.12; will-change: translate; }

/* Spotlight */
.hero, .page-head, .dark-screen, .band { position: relative; }
.fx-spot { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; z-index: 0; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(185, 220, 85, .16), transparent 70%); }

/* Cursor */
.fx-dot, .fx-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 1001; opacity: 0; margin: -4px 0 0 -4px; }
.fx-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime, #b9dc55); mix-blend-mode: difference; }
.fx-ring { width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 1.5px solid rgba(185, 220, 85, .85); transition: width .25s, height .25s, margin .25s, background .25s, opacity .3s; }
.fx-ring.hover { width: 60px; height: 60px; margin: -30px 0 0 -30px; background: rgba(185, 220, 85, .16); }
.fx-ring.down { width: 24px; height: 24px; margin: -12px 0 0 -12px; }
html.fx-cursor input, html.fx-cursor textarea, html.fx-cursor select { cursor: text; }

/* Richer reveal: blocks rise with slight 3D rotation */
.rv { transform: translateY(40px) perspective(800px) rotateX(8deg); }
.rv.in { transform: none; }

/* Section heading underline sweep */
.screen-head h2 { position: relative; }

@media (hover: none), (pointer: coarse) { .fx-dot, .fx-ring, .fx-spot { display: none; } }
@media (prefers-reduced-motion: reduce) { .fx-progress, .fx-dot, .fx-ring { display: none; } .why .pic img { scale: 1; } }

/* About hero: floating particles, orbiting badges, 3D tilt image, stat line draw */
.about-hero { position: relative; overflow: hidden; }
.about-hero .container { position: relative; z-index: 1; }
.about-dots { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.about-dots i { position: absolute; left: var(--x); bottom: -20px; width: var(--s); height: var(--s); border-radius: 50%; background: rgba(185, 220, 85, .5); filter: blur(.5px); animation: rise var(--t) linear var(--dl) infinite; }
.about-dots i:nth-child(3n) { background: rgba(242, 149, 43, .45); }
@keyframes rise { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: .8; } 100% { transform: translateY(-110vh) translateX(40px); opacity: 0; } }

.about-pic { perspective: 1000px; }
.about-3d { position: relative; transform-style: preserve-3d; transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transition: transform .2s ease-out; animation: reveal-pic 1.4s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes reveal-pic { from { clip-path: circle(0% at 50% 50%); opacity: 0; scale: .8; } to { clip-path: circle(80% at 50% 50%); opacity: 1; scale: 1; } }
.about-3d::before { content: ''; position: absolute; inset: -9%; border: 1.5px dashed rgba(185, 220, 85, .45); border-radius: 50%; animation: spin 40s linear infinite; pointer-events: none; }
.about-3d::after { content: ''; position: absolute; inset: -18%; border: 1px solid rgba(255, 255, 255, .12); border-radius: 50%; animation: spin 70s linear infinite reverse; pointer-events: none; }
.about-3d img { translate: 0 0; transform: translateZ(30px); animation: morph 14s ease-in-out infinite alternate, bob 6s ease-in-out infinite; }
.orbit { position: absolute; inset: -9%; border-radius: 50%; pointer-events: none; z-index: 2; animation: spin 18s linear infinite; transform-style: preserve-3d; }
.orbit i { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); font: 700 .78rem var(--sans); font-style: normal; white-space: nowrap; color: var(--forest); background: var(--lime); padding: 7px 14px; border-radius: 999px; box-shadow: 0 10px 24px rgba(0, 0, 0, .35); animation: spin 18s linear infinite reverse; }
.orbit.o2 { animation-duration: 24s; animation-direction: reverse; rotate: 120deg; }
.orbit.o2 i { animation-duration: 24s; animation-direction: normal; background: #fff; }
.orbit.o3 { animation-duration: 30s; rotate: 240deg; }
.orbit.o3 i { animation-duration: 30s; background: var(--saffron, #f2952b); color: #fff; }

.about-hero .stat { position: relative; border-top: 0; }
.about-hero .stat::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--saffron, #f2952b); transform-origin: left; transform: scaleX(0); transition: transform 1.1s cubic-bezier(.2, .8, .2, 1) calc(.4s + var(--d, 0) * .15s); }
.about-hero .stat.in::before { transform: scaleX(1); }
.about-hero .stat b { background: linear-gradient(100deg, #fff 40%, var(--lime) 50%, #fff 60%) 200% 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: shine 4.5s ease-in-out 1.5s infinite; }
@keyframes shine { 0%, 40% { background-position: 200% 0; } 100% { background-position: -100% 0; } }
@media (max-width: 960px) { .orbit { display: none; } }
@media (prefers-reduced-motion: reduce) { .about-3d, .about-3d img { animation: none !important; } }

/* Modal popup (returns & refunds) */
.modal { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 20px; background: rgba(8, 24, 14, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: modal-fade .25s ease; }
.modal[hidden] { display: none; }
.modal-box { position: relative; width: min(480px, 100%); max-height: 90vh; overflow: auto; background: #fff; border-radius: 18px; padding: 28px; box-shadow: 0 40px 90px rgba(0, 0, 0, .4); animation: modal-pop .35s cubic-bezier(.2, .9, .3, 1.2); }
.modal-box h3 { margin-top: 0; }
.modal-x { position: absolute; top: 10px; right: 14px; border: 0; background: none; font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--muted, #667); }
.modal-ico { font-size: 2.4rem; margin-bottom: 6px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.link-btn.plain { color: var(--leaf, #3d8b37); }
@keyframes modal-fade { from { opacity: 0; } }
@keyframes modal-pop { from { opacity: 0; transform: translateY(24px) scale(.94); } }

/* Breadcrumbs */
.crumbs { margin: 0 0 14px; font-size: .84rem; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.crumbs li { display: inline-flex; align-items: center; color: rgba(255, 255, 255, .85); font-weight: 600; }
.crumbs li + li::before { content: ''; width: 6px; height: 6px; margin: 0 10px 0 8px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: .5; }
.crumbs a { color: var(--lime); font-weight: 500; text-decoration: none; transition: color .2s; }
.crumbs a:hover { color: #fff; }
.crumbs li[aria-current] { max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.section > .container > .crumbs li, .crumbs.on-light li { color: var(--forest); }
.section > .container > .crumbs a { color: var(--leaf); }
.page-head { padding: 34px 0 38px !important; }
.page-head h1 { margin-top: 2px; }
.page-head p { margin-top: 10px !important; font-size: 1.02rem !important; }
.page-head .crumbs { margin-bottom: 14px !important; }

/* Policy / content pages: calm, no motion on the text */
.static-page .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
.static-page .words .w > span { transform: none !important; transition: none !important; }
.static-page .fx-tilt, .static-page .fx-tilt.tilting { transform: none !important; box-shadow: none; }
.static-page .fx-glare { display: none; }

/* Order updates timeline */
.timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--line, #e3e8df); }
.timeline li { position: relative; padding: 0 0 14px 14px; font-size: .94rem; }
.timeline li::before { content: ''; position: absolute; left: -25px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--leaf, #3d8b37); box-shadow: 0 0 0 3px #fff; }
.timeline li:first-child::before { background: var(--saffron, #f2952b); }