/* Evergreen FX components - standalone for legacy pages */
:root{--green:#4ade80;--green-d:#22c55e;--green-deep:#16a34a;--text:#f2f7f2;--muted-2:#7a917d;
--r-lg:16px;--ease:cubic-bezier(.4,0,.2,1);--shadow-lg:0 12px 24px -6px rgba(0,0,0,.5),0 4px 10px -4px rgba(0,0,0,.4)}
[data-stars]{position:relative;overflow:hidden}
[data-stars]>*{position:relative;z-index:1}
.fx-stars{z-index:0!important}
/* ---------- v2.2: 21st.dev-style component layer ---------- */
/* Lamp section header */
.lamp{position:relative;text-align:center;padding-top:64px;margin-bottom:8px}
.lamp .sec-label{display:inline-block}
.lamp::before{content:'';position:absolute;top:26px;left:50%;transform:translateX(-50%);width:min(480px,76%);height:5px;border-radius:999px;background:linear-gradient(90deg,transparent,#86efac 14%,#eafff2 50%,#86efac 86%,transparent);box-shadow:0 0 12px 3px rgba(214,255,228,.5),0 0 26px 7px rgba(74,222,128,.35),0 0 60px 16px rgba(34,197,94,.2)}
.lamp::after{content:'';position:absolute;top:28px;left:50%;transform:translateX(-50%);width:min(700px,96%);height:260px;pointer-events:none;background:conic-gradient(from 0deg at 50% 0%,transparent 36%,rgba(74,222,128,.17) 50%,transparent 64%),radial-gradient(52% 46% at 50% 8%,rgba(134,239,172,.12),transparent 70%);filter:blur(14px)}
.lamp h2{position:relative;z-index:1}
/* Hero spotlight beam */
.hero::before{content:'';position:absolute;z-index:1;top:-25%;left:-12%;width:65%;height:150%;pointer-events:none;transform:rotate(-18deg);filter:blur(34px);background:radial-gradient(48% 46% at 50% 42%,rgba(214,255,228,.11),rgba(74,222,128,.05) 55%,transparent 72%)}
/* Card spotlight (pointer-tracked via eef-fx.js) */
.fx-spot{position:relative;--mx:50%;--my:50%}
.fx-spot::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s var(--ease);background:radial-gradient(340px circle at var(--mx) var(--my),rgba(74,222,128,.13),transparent 62%)}
.fx-spot:hover::after{opacity:1}
/* Meteors */
.fx-meteors{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit}
.fx-meteor{position:absolute;width:2px;height:2px;border-radius:999px;background:#d6ffe4;box-shadow:0 0 6px 1px rgba(74,222,128,.7);transform:rotate(215deg);opacity:0}
.fx-meteor::before{content:'';position:absolute;top:50%;left:1px;width:120px;height:1px;transform:translateY(-50%);background:linear-gradient(90deg,rgba(186,245,205,.75),transparent)}
/* Pixel stars */
.fx-stars{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.fx-star{position:absolute;border-radius:1px;background:#cfeedd;opacity:0}
/* Logo cloud marquee */
.logocloud{overflow:hidden;position:relative;margin-top:30px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.fx-marquee-track{display:flex;align-items:center;gap:72px;width:max-content;padding:6px 0}
.logocloud:hover .fx-marquee-track{animation-play-state:paused}
.logomark{flex:none;display:flex;align-items:center;gap:10px;color:var(--muted-2);font-weight:800;letter-spacing:.14em;font-size:1.02rem;white-space:nowrap;filter:grayscale(1);opacity:.75;transition:opacity .25s var(--ease),color .25s var(--ease),filter .25s var(--ease)}
.logomark i{font-size:1.25rem;color:var(--green-deep)}
.logomark:hover{opacity:1;color:var(--text);filter:none}
.logomark small{display:block;font-weight:500;letter-spacing:.04em;font-size:.68rem;color:var(--muted-2)}
/* Glass fold panel (commercial band + chips get glass treatment) */
.glassfold{position:relative;background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.015) 45%,rgba(74,222,128,.05));backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),var(--shadow-lg)}
.glassfold::after{content:'';position:absolute;top:0;right:0;width:74px;height:74px;pointer-events:none;background:linear-gradient(225deg,rgba(255,255,255,.14),rgba(255,255,255,.02) 55%,transparent 60%);clip-path:polygon(100% 0,0 0,100% 100%);border-radius:0 var(--r-lg) 0 0}
/* Magic UI touches: shimmer sweep on primary buttons, slow gradient drift on h1 accent */
.btn.p{position:relative;overflow:hidden}
.btn.p::after{content:'';position:absolute;top:0;bottom:0;left:-80%;width:50%;pointer-events:none;background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg)}
h1 em{background-size:200% 100%}
@media (prefers-reduced-motion: no-preference){
.fx-meteor{animation:eefMeteor linear infinite}
.fx-star{animation:eefTwinkle ease-in-out infinite}
.btn.p::after{animation:eefSheen 4.5s var(--ease) infinite}
h1 em{animation:eefHue 9s ease-in-out infinite alternate}
.fx-marquee-track{animation:eefMarquee 30s linear infinite}
.hero::before{animation:eefSpotIn 1.8s var(--ease) both}
@keyframes eefMeteor{0%{opacity:0;transform:rotate(215deg) translateX(0)}8%{opacity:1}55%{opacity:1}70%{opacity:0;transform:rotate(215deg) translateX(-560px)}100%{opacity:0;transform:rotate(215deg) translateX(-560px)}}
@keyframes eefTwinkle{0%,100%{opacity:0}50%{opacity:.9}}
@keyframes eefSheen{0%{left:-80%}46%{left:130%}100%{left:130%}}
@keyframes eefHue{from{background-position:0% 0}to{background-position:100% 0}}
@keyframes eefMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes eefSpotIn{from{opacity:0;transform:rotate(-18deg) translateY(-14%)}to{opacity:1;transform:rotate(-18deg) translateY(0)}}
}
@keyframes eefFaqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: no-preference){.fx-marquee-track{will-change:transform}}

[data-meteors]{position:relative;overflow:hidden}
.price>*{position:relative;z-index:2}
.price .sub{position:relative;z-index:2}

/* scroll-down indicator */
.fx-sd{position:absolute;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:3;width:52px;height:52px;border-radius:999px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid rgba(74,222,128,.45);background:rgba(16,27,18,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#b8f5cd;box-shadow:0 0 18px rgba(34,197,94,.45),0 0 44px rgba(34,197,94,.2),inset 0 0 12px rgba(74,222,128,.14);transition:background .2s ease,box-shadow .2s ease,color .2s ease,transform .2s ease}
.fx-sd:hover{background:rgba(34,197,94,.32);color:#fff;transform:translateX(-50%) scale(1.07);box-shadow:0 0 28px rgba(74,222,128,.75),0 0 70px rgba(34,197,94,.35),inset 0 0 14px rgba(74,222,128,.25)}
.fx-sd::before{content:'';position:absolute;inset:-6px;border-radius:999px;border:1px solid rgba(74,222,128,.55);pointer-events:none}
.fx-sd svg{width:22px;height:22px;display:block}
@media (prefers-reduced-motion: no-preference){
.fx-sd::before{animation:eefSdPulse 2.2s ease-out infinite}
.fx-sd svg{animation:eefSdBob 1.8s ease-in-out infinite}
@keyframes eefSdPulse{0%{transform:scale(.78);opacity:.9}70%{transform:scale(1.4);opacity:0}100%{transform:scale(1.4);opacity:0}}
@keyframes eefSdBob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(4px)}}
}