/* Családi ház landing – kiegészítő elemek (a style.css tokenjeire épít) */

/* ===== 01 Előnyök: görgetésre lépkedő, animált jelenetek ===== */
.fx-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:72px;align-items:start}
.fx-texts{display:flex;flex-direction:column}
.fx-step{min-height:58vh;display:flex;align-items:center;opacity:.28;transition:opacity .45s}
.fx-step:first-child{min-height:46vh;align-items:flex-start;padding-top:40px}
.fx-step:last-child{min-height:64vh}
.fx-step.on{opacity:1}
.fx-copy{max-width:480px}
.fx-k{display:flex;align-items:center;gap:10px;font-family:Poppins,system-ui,sans-serif;font-weight:600;font-size:.95rem;color:#3b4268;margin-bottom:14px}
.fx-k b{display:inline-grid;place-items:center;min-width:38px;height:28px;padding:0 8px;border-radius:999px;background:#eaefff;color:#4169e1;font-weight:700;font-size:.82rem;transition:background .3s,color .3s}
.fx-step.on .fx-k b{background:#4169e1;color:#fff}
.fx-copy h3{font-family:Manrope,Poppins,system-ui,sans-serif;font-weight:800;font-size:clamp(1.9rem,3.1vw,2.8rem);line-height:1.05;letter-spacing:-.035em;color:#0b1030;text-wrap:balance;margin-bottom:16px}
.fx-copy p:last-child{font-family:Poppins,system-ui,sans-serif;font-size:1.05rem;line-height:1.65;color:#2a3157}
.fx-slot{display:none}

.fx-stage{position:sticky;top:calc(50vh - 220px);height:460px;border-radius:28px;overflow:hidden;background:radial-gradient(120% 90% at 20% 0%,#ffffff 0%,#eef2ff 55%,#e3eaff 100%);border:1px solid #dbe2fa;box-shadow:0 40px 70px -40px rgba(44,70,180,.6),0 0 0 6px rgba(65,105,225,.06)}
.fx-scene{position:absolute;inset:0;opacity:0;transform:translateY(14px) scale(.97);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.fx-scene.on{opacity:1;transform:none;pointer-events:auto}
.fx-scene svg{display:block;width:100%;height:100%}
.fx-dots{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;gap:8px;z-index:2}
.fx-dots i{width:8px;height:8px;border-radius:99px;background:#c3cff5;transition:width .35s,background .35s;cursor:pointer}
.fx-dots i.on{width:26px;background:#4169e1}

/* közös SVG-elemek */
.fx svg text{font-family:Poppins,system-ui,sans-serif}
.fx .s-cap{font-size:15px;font-weight:500;fill:#4a526e}
.fx .s-cap-b{font-weight:600;fill:#0b1030}
.fx .sh{fill:rgba(11,16,48,.08)}
.fx .gr{stroke:#c9d3f2;stroke-width:2;stroke-dasharray:8 8}
.fx .tag rect{fill:#ffc21a}
.fx .tag text{font-weight:700;font-size:15px;fill:#0b1030}
.fx .tag{opacity:0}
.fx-scene.on .tag{animation:fxTag .5s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes fxTag{from{opacity:0;transform:var(--tt,translate(0,0)) translateY(10px) scale(.8)}to{opacity:1;transform:var(--tt,translate(0,0))}}
@keyframes fxPop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
@keyframes fxDraw{to{stroke-dashoffset:0}}
@keyframes fxFade{to{opacity:1}}

/* S1 – 2000+ munka */
.s1 .s1-num{font-family:Manrope,Poppins,system-ui,sans-serif;font-weight:800;font-size:74px;letter-spacing:-3px;fill:#0b1030}
.s1 .hz{fill:#4169e1;opacity:0;transform-box:fill-box;transform-origin:50% 100%}
.s1 .hz:nth-of-type(4n+2){fill:#6d8bea}
.s1 .hz:nth-of-type(7n){fill:#2d4dff}
.fx-scene.s1.on .hz{animation:fxPop .45s cubic-bezier(.3,1.6,.5,1) forwards;animation-delay:calc(var(--i)*38ms + .15s)}
.s1 .hz-next path{fill:none;stroke:#ffc21a;stroke-width:2.6;stroke-dasharray:4 3}
.s1 .hz-next{opacity:0}
.fx-scene.s1.on .hz-next{animation:fxFade .6s 1.9s forwards}

/* S2 – sztreccsfólia */
.s2 .sf-b{fill:#3557c9}.s2 .sf-s{fill:#4169e1}.s2 .sf-a{fill:#2c48b0}.s2 .lg{fill:#0b1030}
.s2 .foil path{fill:none;stroke:rgba(235,242,255,.42);stroke-width:30;stroke-dasharray:420;stroke-dashoffset:420}
.fx-scene.s2.on .foil path{animation:fxDraw .36s linear forwards;animation-delay:calc(.3s + var(--i)*.408s)}
.s2 .sheen{fill:#fff;opacity:0;transform:skewX(-18deg)}
.fx-scene.s2.on .sheen{animation:fxSheen 1.1s 2.75s ease-in-out forwards}
@keyframes fxSheen{0%{opacity:.55;transform:translateX(0) skewX(-18deg)}100%{opacity:0;transform:translateX(440px) skewX(-18deg)}}
.s2 .roll rect{fill:#eef3ff;stroke:#a9bbf2;stroke-width:2}
.s2 .roll .roll-top{fill:#d6e0fb;stroke:#a9bbf2;stroke-width:2}
.s2 .roll{opacity:0}
.fx-scene.s2.on .roll{animation:fxRoll 2.45s .3s linear forwards}
@keyframes fxRoll{
0%{opacity:1;transform:translate(47px,159px)}15%{transform:translate(447px,103px)}17%{transform:translate(447px,133px)}32%{transform:translate(47px,189px)}
34%{transform:translate(47px,219px)}49%{transform:translate(447px,163px)}51%{transform:translate(447px,193px)}66%{transform:translate(47px,249px)}
68%{transform:translate(47px,279px)}83%{transform:translate(447px,223px)}85%{transform:translate(447px,253px)}97%{opacity:1;transform:translate(47px,309px)}100%{opacity:0;transform:translate(47px,309px)}}
.s2 .tag{--tt:translate(356px,64px)}
.fx-scene.s2.on .tag{animation-delay:2.7s}

/* S3 – emelőhátfal */
.s3 .tb{fill:#fff;stroke:#cdd2e0;stroke-width:2}
.s3 .ti{fill:#1d2a6e}
.s3 .tb-t{font-family:Manrope,Poppins,system-ui,sans-serif;font-weight:800;font-size:19px;fill:#4169e1;letter-spacing:.5px}
.fx .tk-ch{fill:#0b1030}
.fx .tk-wh{fill:#14172b;stroke:#cfd5e6;stroke-width:5}
.s3 .arm{stroke:#8d93a3;stroke-width:6;stroke-linecap:round;transform-box:fill-box;transform-origin:50% 0}
.s3 .pf{fill:#5a6070}
.s3 .lamp{fill:#ffc21a}
.s3 .fr-b{fill:#f3f5fb;stroke:#b9c3dd;stroke-width:2}
.s3 .fr-l{stroke:#b9c3dd;stroke-width:2}
.s3 .fr-h{fill:#8d93a3}
.s3 .fr{transform-box:fill-box;transform-origin:50% 100%}
.fx-scene.s3.on .lift{animation:fxLift 5s .3s ease-in-out infinite}
.fx-scene.s3.on .arm{animation:fxArm 5s .3s ease-in-out infinite}
.fx-scene.s3.on .fr{animation:fxFridge 5s .3s ease-in-out infinite}
.fx-scene.s3.on .lamp{animation:fxBlink .5s steps(2) infinite}
@keyframes fxLift{0%,12%{transform:translateY(0)}40%,74%{transform:translateY(-64px)}94%,100%{transform:translateY(0)}}
@keyframes fxArm{0%,12%{transform:scaleY(1)}40%,74%{transform:scaleY(0)}94%,100%{transform:scaleY(1)}}
@keyframes fxFridge{0%,44%{opacity:1;transform:none}62%{opacity:0;transform:translateY(-4px) scale(.74)}90%{opacity:0;transform:scale(.6)}100%{opacity:1;transform:none}}
@keyframes fxBlink{50%{opacity:.25}}
.s3 .tag{--tt:translate(392px,150px)}
.fx-scene.s3.on .tag{animation-delay:1.6s}

/* S4 – szét- és összeszerelés */
.s4 .p{fill:#d6a467;transform-box:fill-box;transform-origin:center}
.s4 .door{fill:#e8bf86;stroke:#c38f4f;stroke-width:1.5}
.s4 .hd{fill:#0b1030}
.s4 .sc{fill:#0b1030;transform-box:fill-box;transform-origin:center}
.s4 .ls{--x:-74px;--y:0px;--r:-8deg}.s4 .rs{--x:74px;--y:0px;--r:8deg}
.s4 .tp{--x:0px;--y:-48px;--r:-3deg}.s4 .bt{--x:0px;--y:30px;--r:2deg}
.s4 .sl{--x:0px;--y:-16px;--r:-4deg}
.s4 .dl{--x:-132px;--y:22px;--r:-12deg}.s4 .dr{--x:132px;--y:22px;--r:12deg}
.s4 .s-a{--x:-40px;--y:-40px;--r:0deg}.s4 .s-b{--x:40px;--y:-40px;--r:0deg}.s4 .s-c{--x:-40px;--y:34px;--r:0deg}.s4 .s-d{--x:40px;--y:34px;--r:0deg}
.fx-scene.s4.on .p,.fx-scene.s4.on .sc{animation:fxExp 5s .2s cubic-bezier(.6,0,.3,1) infinite}
@keyframes fxExp{0%,14%{transform:none}36%,60%{transform:translate(var(--x),var(--y)) rotate(var(--r))}82%,100%{transform:none}}
.s4 .s-c1,.s4 .s-c2{opacity:0}
.fx-scene.s4.on .s-c1{animation:fxCap1 5s .2s infinite}
.fx-scene.s4.on .s-c2{animation:fxCap2 5s .2s infinite}
@keyframes fxCap1{0%,16%{opacity:0}24%,58%{opacity:1}64%,100%{opacity:0}}
@keyframes fxCap2{0%,64%{opacity:0}70%,96%{opacity:1}100%{opacity:0}}
.s4 .tag{--tt:translate(380px,64px)}
.fx-scene.s4.on .tag{animation-delay:.6s}

/* S5 – rugalmas csapat (interaktív) */
.s5{display:flex;flex-direction:column;align-items:center;padding:22px 18px 40px}
.s5 svg{flex:1;min-height:0;height:auto}
.crew-sw{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:#fff;border:1px solid #dbe2fa;box-shadow:0 10px 24px -18px rgba(44,70,180,.7)}
.crew-sw button{font:600 .88rem/1 Poppins,system-ui,sans-serif;color:#3b4268;background:none;border:0;border-radius:999px;padding:10px 16px;cursor:pointer;transition:background .25s,color .25s}
.crew-sw button.on{background:#4169e1;color:#fff}
.crew-sw button:focus-visible{outline:2px solid #4169e1;outline-offset:2px}
.crew-out{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.crew-out b{font-family:Manrope,Poppins,system-ui,sans-serif;font-weight:800;font-size:1.7rem;letter-spacing:-.03em;color:#0b1030}
.crew-out span{font-family:Poppins,system-ui,sans-serif;font-size:.8rem;color:#4a526e}
.s5 .tk-box{fill:#4169e1}
.s5 .tk-t{font-weight:700;font-size:11px;fill:#fff;letter-spacing:.3px}
.s5 .tk-cab{fill:#f3f5fb;stroke:#cdd2e0;stroke-width:1.5}
.s5 .tk-win{fill:#1d2a6e}
.s5 .tk-wh{stroke-width:3}
.s5 .tk-in{opacity:0;transform:translateX(-46px);transition:opacity .45s,transform .55s cubic-bezier(.2,.8,.2,1)}
.s5 .tk.show .tk-in{opacity:1;transform:none}
.s5 .tk.ghost .tk-in{opacity:.32;transform:none}
.s5 .hs-w{fill:#fff;stroke:#cdd2e0;stroke-width:2}
.s5 .hs-r{fill:none;stroke:#4169e1;stroke-width:12;stroke-linecap:round;stroke-linejoin:round}
.s5 .hs-d{fill:#ffc21a}
.s5 .hs-win{fill:#f6e3a8}
.s5 .hs-in{transform-box:fill-box;transform-origin:50% 100%;transition:transform .6s cubic-bezier(.3,1.4,.5,1);transform:scale(var(--hs,1))}
.s5 .pp circle{fill:#0b1030}
.s5 .pp path{fill:#4169e1}
.s5 .pp{opacity:0;transition:opacity .35s}
.s5 .pp.show{opacity:1}
.s5 .pp-plus{font-weight:700;font-size:30px;fill:#4169e1;opacity:0;transition:opacity .3s}
.s5 .pp-plus.show{opacity:1}

@media (prefers-reduced-motion:reduce){
 .fx-scene *{animation:none!important;transition:none!important}
 .s1 .hz,.s1 .hz-next,.fx .tag{opacity:1}
 .s2 .foil path{stroke-dashoffset:0}
 .s2 .roll{opacity:0}
 .s4 .s-c1{opacity:1}
}

/* ===== telefon / tablet: minden előny saját jelenettel ===== */
@media (max-width:1000px){
 .fx-grid{display:block}
 .fx-stage{display:none}
 .fx-step,.fx-step:first-child,.fx-step:last-child{min-height:0;display:flex;flex-direction:column;align-items:stretch;gap:20px;opacity:1;padding:0;margin-bottom:44px}
 .fx-step:last-child{margin-bottom:0}
 .fx-slot{display:block;position:relative;aspect-ratio:520/420;max-width:100%;border-radius:22px;overflow:hidden;background:radial-gradient(120% 90% at 20% 0%,#ffffff 0%,#eef2ff 55%,#e3eaff 100%);border:1px solid #dbe2fa;box-shadow:0 30px 50px -36px rgba(44,70,180,.6)}
 .fx-step[data-i="4"] .fx-slot{aspect-ratio:auto;height:440px}
 .fx-k b,.fx-step.on .fx-k b{background:#4169e1;color:#fff}
 .fx-copy{max-width:none}
}
@media (max-width:640px){
 .fx-step[data-i="4"] .fx-slot{height:400px}
 .crew-sw button{padding:9px 11px;font-size:.8rem}
 .crew-out b{font-size:1.4rem}
}

/* ===== 03 Árak – a weboldal árkártyáival, két kártyára ===== */
.price-grid.two{grid-template-columns:repeat(2,1fr);max-width:900px}
@media (max-width:1000px){.price-grid.two{grid-template-columns:1fr;max-width:none}}

/* ===== Vélemények: fix magasság, középre igazított, nagyobb lapozó ===== */
.quotes .q-stage{display:grid!important;position:relative}
.quotes .q,.quotes .q.active{position:relative!important;grid-area:1/1;left:auto;top:auto}
.quotes .q-ctl{justify-content:center;gap:24px;margin-top:40px}
.quotes .q-ctl .btn{width:58px;height:58px;padding:0;font-size:1.25rem;border-radius:14px}
.quotes .q-count{font-size:1.1rem;min-width:3.6em}

/* sárga címkék – a weboldal .photo-tag / akciós címke stílusa */
.fx-tag{position:absolute;z-index:2;display:inline-block;padding:9px 16px;border-radius:12px;background:linear-gradient(100deg,#ffd34a 0,#ffb21a 100%);color:#fff;font:700 15px/1.2 Poppins,system-ui,sans-serif;box-shadow:0 14px 26px -14px rgba(255,140,0,.9);transform:rotate(-2deg);opacity:0;white-space:nowrap}
.fx-scene.on .fx-tag{animation:fxTagY .55s cubic-bezier(.3,1.6,.5,1) var(--d,.4s) forwards}
@keyframes fxTagY{from{opacity:0;transform:translateY(10px) rotate(-2deg) scale(.8)}to{opacity:1;transform:rotate(-2deg)}}
.badge-yel{position:absolute;top:-15px;left:26px;padding:7px 14px;border-radius:10px;background:linear-gradient(100deg,#ffd34a 0,#ffb21a 100%);color:#fff;font:700 13px/1.2 Poppins,system-ui,sans-serif;box-shadow:0 14px 26px -14px rgba(255,140,0,.9);transform:rotate(-2deg)}
@media (max-width:640px){.fx-tag{font-size:13px;padding:7px 12px}}
@media (prefers-reduced-motion:reduce){.fx-tag{opacity:1;animation:none!important}}