/* ===== dynamic sections: room explorer, before/after, planner, savings, ribbon, motion ===== */
.dyn{background:linear-gradient(180deg,#fff,var(--bg))}
.dyn.alt{background:#fff}
/* illustrated room */
.sc{width:100%;height:100%;display:block}
.sc .wall{fill:#dfeaf6}.sc .floor{fill:#c9b79c}.sc .skirt{fill:#f4f8fc}.sc .wframe{fill:#f4f8fc}.sc .sky{fill:#bfe3fb}.sc .wdiv{stroke:#f4f8fc;stroke-width:5}
.sc .cord{stroke:#0A263F;stroke-width:3}.sc .shade{fill:#0A263F}.sc .bulb{fill:#fff3c9}
.sc .rod{fill:#0A263F}.sc .blades ellipse{fill:#0D2E4A}.sc .hub{fill:#FE6102}
.sc .plate{fill:#fff;stroke:#c7d6e6;stroke-width:1.5}.sc .key{fill:#0E8BD8}
.sc .npanel{fill:#0A263F}.sc .screen{fill:#123c60}.sc .ptime{fill:#fff;font:700 24px Inter,sans-serif}
.sc .door{fill:#8a5a3b}.sc .doorin{fill:#9c6a49}.sc .lock{fill:#0A263F}.sc .led{fill:#22c55e}
.sc .rug{fill:#e6dccb}.sc .sofaback{fill:#5f86a8}.sc .sofabase{fill:#4f7595}.sc .cush{fill:#7ba1c1}.sc .arm{fill:#456b8a}
.sc .table{fill:#8a6a4b}.sc .sens{fill:#fff}.sc .sensled{fill:#0E8BD8}.sc .socket{fill:#eef3f8;stroke:#c7d6e6;stroke-width:1.5}.sc .plugled{fill:#22c55e}
.sc .pot{fill:#b5651d}.sc .leaf{fill:#2f9e63}
.sc .beam{fill:rgba(255,236,190,.28)}
.sc.after .blades{transform-origin:640px 42px;animation:spin 6s linear infinite;animation-play-state:paused}
.scene:hover .sc.after .blades,.ba:hover .sc.after .blades{animation-play-state:running}
@keyframes spin{to{transform:rotate(360deg)}}
.sc.after .blades{transform-box:fill-box}
.sc.after .screen{fill:#1b6fb0}
.sc.before .wall{fill:#1a2836}.sc.before .floor{fill:#2b2620}.sc.before .skirt{fill:#26323f}.sc.before .wframe{fill:#2b3948}.sc.before .sky{fill:#152332}.sc.before .wdiv{stroke:#2b3948}
.sc.before .shade{fill:#101a24}.sc.before .bulb{fill:#39414a}.sc.before .blades ellipse{fill:#14202c}.sc.before .hub{fill:#3a4a5a}
.sc.before .plate{fill:#2c3948;stroke:#3a4a5a}.sc.before .key{fill:#3c4b5c}.sc.before .npanel{fill:#0d151d}.sc.before .screen{fill:#0d151d}.sc.before .ptime{fill:#0d151d}
.sc.before .door{fill:#3b2a1f}.sc.before .doorin{fill:#43301f}.sc.before .lock{fill:#0d151d}.sc.before .led{fill:#394654}
.sc.before .rug{fill:#2e2a25}.sc.before .sofaback{fill:#1f2c3a}.sc.before .sofabase{fill:#1a2632}.sc.before .cush{fill:#2a3a4b}.sc.before .arm{fill:#17222d}
.sc.before .table{fill:#3a2f25}.sc.before .sens{fill:#33404d}.sc.before .sensled{fill:#33404d}.sc.before .socket{fill:#26323f;stroke:#33404d}.sc.before .plugled{fill:#394654}
.sc.before .pot{fill:#3d2814}.sc.before .leaf{fill:#1d3b2b}
/* explorer */
.ex-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:1.6rem;align-items:start}
.scene{position:relative;aspect-ratio:8/5;border-radius:26px;overflow:hidden;box-shadow:0 24px 60px rgba(10,38,63,.25),0 0 0 1px rgba(14,139,216,.25);background:#0A263F}
.scene .sc{position:absolute;inset:0}
.hs{position:absolute;width:34px;height:34px;transform:translate(-50%,-50%);border-radius:50%;border:0;background:rgba(254,97,2,.28);cursor:pointer;padding:0;z-index:3}
.hs span{position:absolute;inset:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(255,255,255,.9),0 0 18px 4px rgba(254,97,2,.75)}
.hs::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(254,97,2,.7);animation:ring 2.2s ease-out infinite}
.hs.on span{background:#0E8BD8;box-shadow:0 0 0 3px #fff,0 0 20px 6px rgba(14,139,216,.85)}
.hs.on::after{border-color:rgba(14,139,216,.8)}
.hs:hover{background:rgba(254,97,2,.45)}
.hs:focus-visible{outline:3px solid #fff;outline-offset:3px}
@keyframes ring{0%{transform:scale(.7);opacity:1}100%{transform:scale(1.7);opacity:0}}
.hs-hint{position:absolute;inset-inline-start:14px;bottom:12px;z-index:3;background:rgba(10,38,63,.78);color:#fff;font-size:.82rem;font-weight:600;padding:.35rem .8rem;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ex-panel{background:#fff;border:1px solid var(--line);border-radius:22px;padding:1.5rem;box-shadow:var(--shadow);display:grid}
.ex-p{grid-area:1/1;display:flex;flex-direction:column;gap:.8rem;opacity:0;visibility:hidden;transition:opacity .22s ease,visibility 0s linear .22s}
.ex-p.on{opacity:1;visibility:visible;transition:opacity .22s ease}
.ex-p h3{color:var(--navy);font-size:1.25rem}
.ex-p>p{color:var(--muted);font-size:.95rem}
@keyframes pop{from{opacity:.4;transform:translateY(10px)}to{opacity:1;transform:none}}
.ex-items{display:grid;gap:.6rem}
.ex-item{display:grid;grid-template-columns:54px 1fr auto;gap:.8rem;align-items:center;border:1px solid var(--line);border-radius:14px;padding:.5rem .7rem;background:var(--bg)}
.ex-item img{width:54px;height:54px;object-fit:contain;background:#fff;border-radius:10px}
.ex-item b{display:block;color:var(--navy);font-size:.86rem;line-height:1.3}
.ex-item span{color:var(--green-d);font-weight:700;font-size:.9rem}
.ex-item .btn{padding:.55rem .8rem;width:auto}
.ex-more{color:var(--green-d);font-weight:700;margin-top:auto}
@media(max-width:900px){.ex-grid{grid-template-columns:1fr}}
/* before / after */
/* planner */
/* savings */
/* works-with ribbon */
.ribbon{background:#fff;border-block:1px solid var(--line);padding:1.4rem 0;overflow:hidden;position:relative}
.ribbon small{display:block;text-align:center;color:var(--muted);font-weight:700;letter-spacing:.08em;font-size:.78rem;margin-bottom:.9rem}
.rb-track{display:flex;gap:1rem;width:max-content;animation:marq 32s linear infinite}
.ribbon:hover .rb-track{animation-play-state:paused}
.rb-track span{display:inline-flex;align-items:center;gap:.6rem;padding:.6rem 1.3rem;border:1px solid var(--line);border-radius:999px;font-weight:800;letter-spacing:.04em;color:var(--navy);background:var(--bg);white-space:nowrap}
.rb-track span i{color:var(--accent)}
@keyframes marq{to{transform:translateX(-50%)}}
html[dir=rtl] .rb-track{animation-name:marqr}
@keyframes marqr{to{transform:translateX(50%)}}
.ribbon::before,.ribbon::after{content:'';position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}
.ribbon::before{left:0;background:linear-gradient(90deg,#fff,transparent)}.ribbon::after{right:0;background:linear-gradient(270deg,#fff,transparent)}
/* timeline (how it works) */
.steps{position:relative}
.step::before{box-shadow:0 8px 20px rgba(254,97,2,.35)}
@media(min-width:761px){.steps::before{content:'';position:absolute;top:2.8rem;inset-inline:16%;height:3px;background:linear-gradient(90deg,var(--accent),var(--green));opacity:.35;border-radius:3px}}
.step{transition:transform .25s,box-shadow .25s}
.step:hover{transform:translateY(-6px);box-shadow:0 0 0 1px rgba(14,139,216,.4),0 18px 40px rgba(14,139,216,.16)}
/* motion */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
.hero::after{content:'';position:absolute;inset:0;background:radial-gradient(420px 320px at var(--mx,70%) var(--my,30%),rgba(255,255,255,.09),transparent 70%);pointer-events:none}
.gl{transition:translate .35s ease-out}
header.sm{box-shadow:0 6px 24px rgba(10,38,63,.12)}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.rb-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;padding:0 1rem}.sc.after .blades{animation:none}.hs::after{animation:none}}

/* ===== hero carousel ===== */
.slides{display:grid;position:relative}
.slide{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility .7s;pointer-events:none}
.slide.on{opacity:1;visibility:visible;pointer-events:auto}
.hero-grid.rev{grid-template-columns:.95fr 1.05fr}
.slide.on .sv-vis img{transform:scale(1.08)}
.slide h2{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:800;line-height:1.1;letter-spacing:-.02em;color:#fff}
html[lang=ar] .slide h2{line-height:1.35;letter-spacing:0}
.slide h2 span{background:linear-gradient(90deg,#4cc0ff,#ff8a3d);-webkit-background-clip:text;background-clip:text;color:transparent}
.slide p.lead{margin:1.2rem 0 2rem;color:#b9d2e6;font-size:1.1rem;max-width:34rem}
.btn-accent{background:linear-gradient(135deg,#FE6102,#ff8a3d);color:#fff;box-shadow:0 10px 28px rgba(254,97,2,.45)}
.btn-accent:hover{background:linear-gradient(135deg,#ff7420,#ff9a4d)}
.btn-lg{padding:1rem 1.9rem;font-size:1.05rem}
.hero-nav{display:flex;justify-content:center;align-items:center;gap:.8rem;margin-top:1.6rem;position:relative;z-index:5}
.hd{height:6px;width:34px;border-radius:9px;background:rgba(255,255,255,.3);border:0;cursor:pointer;padding:0;transition:.3s}
.hd.on{background:var(--accent);width:56px;box-shadow:0 0 12px rgba(254,97,2,.7)}
.ha{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;display:grid;place-items:center}
.ha:hover{background:rgba(255,255,255,.2)}
@media(max-width:860px){.hero-grid.rev{grid-template-columns:1fr}.slide h2{font-size:2rem}}
/* ambient spotlight in the room */
.spot-ov{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .45s ease;background:radial-gradient(circle at var(--sx,50%) var(--sy,50%),rgba(255,222,160,.42) 0,rgba(255,222,160,.14) 60px,transparent 130px),radial-gradient(circle at var(--sx,50%) var(--sy,50%),transparent 0,transparent 70px,rgba(6,26,44,.46) 300px)}
.scene.spot .spot-ov{opacity:1}

/* ===== before / after: status cards + comparison ===== */