:root{--navy:#06151e;--teal:#2fd7c3;--gold:#c5a36a;--cream:#f4f1ea;--ink:#132a32;--muted:#607078;--line:#d9dedb}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:Tahoma,Arial,sans-serif}header{height:70px;background:var(--navy);color:#fff;padding:0 clamp(20px,6vw,90px);display:flex;align-items:center;justify-content:space-between}header a{color:#b9c9ce;text-decoration:none;font-size:13px}header b{font-size:18px}header small{display:block;color:var(--gold);font:8px Arial;text-align:left}main{width:min(1180px,calc(100% - 40px));margin:auto}.intro{padding:70px 0 35px;max-width:800px}.intro span,.sim-head span{color:#118879;font-weight:800;font-size:13px}.intro h1{font-size:clamp(42px,6vw,72px);margin:15px 0}.intro p{color:var(--muted);line-height:1.9}.progress{display:flex;align-items:center;margin:15px 0 30px}.progress i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#dce1de;color:#718087;font:700 12px Arial;font-style:normal}.progress i.active{background:var(--teal);color:#052128}.progress span{height:1px;background:#cbd3d0;flex:1}form{background:#fff;border:1px solid var(--line);padding:38px;box-shadow:0 24px 70px -50px #102d38}.step{display:none}.step.active{display:block}.step-head{display:flex;gap:20px;align-items:flex-start;margin-bottom:30px}.step-head em{color:var(--gold);font:700 12px Arial;font-style:normal;border-top:1px solid var(--gold);padding-top:7px}.step h2,.sim-head h2{font-size:34px;margin:0 0 8px}.step-head p{margin:0;color:var(--muted)}.fields{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.fields label{font-size:13px;font-weight:800;display:grid;gap:8px}.fields input,.fields select,.voice select{border:1px solid var(--line);background:#fbfcfa;padding:14px;color:var(--ink);font:inherit}.choices{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.choices button{border:1px solid var(--line);background:#fafbf9;padding:22px;text-align:right;color:var(--ink);cursor:pointer}.choices button.selected{border-color:#129b8b;background:#e8faf7;box-shadow:inset 0 0 0 1px #129b8b}.choices b,.choices span{display:block}.choices span{color:var(--muted);font-size:12px;margin-top:8px}.checks{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.checks label{border:1px solid var(--line);padding:15px;background:#fbfcfa}.checks input{accent-color:#118879;margin-left:8px}.nav{display:flex;justify-content:space-between;margin-top:35px}.nav button,.voice button,.home-stage aside button{border:0;padding:13px 22px;background:var(--navy);color:#fff;font:inherit;font-weight:800;cursor:pointer}.nav button:disabled{opacity:.3}.nav #next{background:var(--teal);color:#042128}.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:25px}.summary article{background:#f4f8f6;padding:18px}.summary small,.summary b{display:block}.summary small{color:var(--muted)}.summary b{font-size:25px;margin-top:8px}.bom{width:100%;border-collapse:collapse}.bom th,.bom td{text-align:right;border-bottom:1px solid var(--line);padding:13px}.bom th{color:var(--muted);font-size:12px}.build-sim{margin-top:25px;background:var(--teal);color:#042128;border:0;padding:15px 22px;font:inherit;font-weight:800;cursor:pointer}.simulator{margin:45px 0 80px;background:#fff;border:1px solid var(--line);padding:35px}.hidden{display:none}.sim-head{display:flex;justify-content:space-between;align-items:end;gap:25px}.voice{display:flex;gap:8px}.home-stage{display:grid;grid-template-columns:1fr 270px;gap:24px;margin-top:30px}.house{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:180px 180px;border:8px solid var(--navy);background:#ccd4d0;gap:4px;padding:4px}.room,.garage{background:#eef0eb;padding:18px;position:relative;display:flex;flex-direction:column;justify-content:space-between}.living{grid-column:1/3}.garage{grid-row:2;grid-column:3}.room span{font-size:22px}.lamp.on{color:#f4c94f;text-shadow:0 0 18px #f4c94f}.lamp{color:#899394}.water.alert{color:#ef4d4d;animation:pulse .8s infinite}.door{height:75px;background:repeating-linear-gradient(#66747a 0 10px,#78868b 10px 13px);transition:.5s}.garage.open .door{height:12px}.home-stage aside{background:var(--navy);color:#fff;padding:22px;display:flex;flex-direction:column;gap:10px}.home-stage aside button{background:#15333e;border:1px solid #31515b;text-align:right}.home-stage aside p{color:#aad2ca;line-height:1.7}.lock.open{filter:grayscale(1);opacity:.55}@keyframes pulse{50%{opacity:.25}}@media(max-width:850px){.fields,.choices,.checks{grid-template-columns:1fr 1fr}.sim-head,.home-stage{grid-template-columns:1fr;display:grid}.house{min-height:500px}.summary{grid-template-columns:1fr}.voice{flex-direction:column}}@media(max-width:560px){main{width:min(100% - 24px,1180px)}form,.simulator{padding:22px}.fields,.choices,.checks{grid-template-columns:1fr}.house{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,150px)}.living{grid-column:1/3}.garage{grid-row:auto;grid-column:auto}.intro{padding-top:45px}.step h2{font-size:28px}}

/* Interactive three-dimensional home model */
.model-shell{min-height:560px;position:relative;overflow:hidden;border:1px solid #24404a;background:radial-gradient(circle at 50% 18%,#264958 0,#102b36 42%,#06151e 76%);perspective:1200px;padding:24px}
.model-shell:after{content:"";position:absolute;inset:auto 5% 3% 5%;height:25%;border-radius:50%;background:#020a0e;filter:blur(30px);opacity:.7}
.model-sky{position:relative;z-index:4;display:flex;gap:10px;align-items:center;color:#dbe9eb;font-size:12px}.model-sky span{background:#0e695f;border:1px solid #2fd7c3;color:#d8fff9;padding:6px 10px;border-radius:99px}.model-sky b{font-weight:400;color:#9cb2ba}
.house-3d{width:640px;height:390px;position:absolute;z-index:2;left:50%;top:53%;display:grid;grid-template-columns:1.35fr 1fr 1.15fr;grid-template-rows:1fr 1fr;gap:8px;padding:10px;background:#263c43;border:10px solid #183039;box-shadow:-38px 52px 60px #0009;transform-style:preserve-3d;transform:translate(-50%,-50%) rotateX(54deg) rotateZ(-36deg)}
.space{position:relative;overflow:visible;padding:16px;background:linear-gradient(145deg,#e8e2d7,#cfc8bc);border:2px solid #7a746b;box-shadow:inset 0 0 24px #0002;display:flex;flex-direction:column;justify-content:space-between;transform-style:preserve-3d;transition:background .35s,box-shadow .35s}
.space:before,.space:after{content:"";position:absolute;background:#f1eee7;border:1px solid #9c978e;transform-origin:bottom;pointer-events:none}.space:before{height:62px;left:-2px;right:-2px;top:-62px;transform:rotateX(-90deg)}.space:after{width:62px;top:-2px;bottom:-2px;right:-62px;transform-origin:left;transform:rotateY(90deg)}
.space b,.space small,.space i,.space span{position:relative;z-index:3}.space b{font-size:14px}.space small{font-size:9px;color:#526168}.space i{font-style:normal;font-size:32px;color:#3f626b}.space .lamp{position:absolute;left:14px;top:12px;width:18px;height:18px;border-radius:50%;background:#66777a;color:transparent;box-shadow:0 0 0 5px #ffffff55;transition:.35s}.space .lamp.on{background:#ffe08a;box-shadow:0 0 12px 6px #ffd65a,0 0 65px 34px #ffeab799}.space:has(.lamp.on){background:linear-gradient(145deg,#fff4cf,#dbcfad)}
.living{grid-column:auto}.master{grid-column:1/3}.space .water{width:14px;height:14px;border-radius:50%;background:#2fd7c3;color:transparent;box-shadow:0 0 0 4px #2fd7c333}.space .camera{position:absolute;left:13px;bottom:12px;color:#1aa897}.space .lock{font-size:26px}.door{height:48px;background:repeating-linear-gradient(#607178 0 8px,#77888e 8px 11px);border:3px solid #43545a;transition:.5s}.garage.open .door{height:7px}.garage small:before{content:"SONOFF MINI‑D · "}.garage small{font-size:0}.garage small:after{content:"مغلق";font-size:9px}.garage.open small:after{content:"مفتوح"}.water.alert{background:#ff5252!important;box-shadow:0 0 12px 8px #ff525299!important;animation:pulse .8s infinite}.curtains-on .master:after,.curtains-on .living:after{background:#d9b878}.climate-on .space{border-color:#64cdea}
.home-stage aside{min-height:560px}.home-stage aside button{transition:.2s}.home-stage aside button.active{background:#176e65;border-color:#2fd7c3}.home-stage aside p{margin-top:auto;border-top:1px solid #31515b;padding-top:16px}
.connection-plan{margin-top:28px;padding:30px;background:#eef3f1;border:1px solid var(--line)}.plan-title span{color:#118879;font-size:12px;font-weight:800}.plan-title h3{font-size:28px;margin:8px 0 24px}.backbone{display:flex;align-items:center;justify-content:center;gap:10px}.backbone article,.branches article{background:#fff;border:1px solid #cfd9d6;padding:16px;text-align:center}.backbone article{width:190px;position:relative}.backbone article i{display:block;font-style:normal;font-size:28px;margin-bottom:7px}.backbone article b,.backbone article small,.branches article b,.branches article small,.branches article span{display:block}.backbone article small,.branches article small{color:#607078;margin-top:6px;font-size:11px}.backbone em{font-size:28px;color:#159889;font-style:normal}.backbone .core{border-color:#159889;box-shadow:0 8px 30px #15988918}.branches{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:34px;padding-top:32px}.branches:before{content:"";position:absolute;top:12px;left:8%;right:8%;height:2px;background:#159889}.branches article{position:relative;text-align:right}.branches article:before{content:"";position:absolute;width:2px;height:22px;top:-23px;left:50%;background:#159889}.branches article span{margin-top:12px;color:#118879;font-size:10px;font-weight:800}
@media(max-width:900px){.model-shell{min-height:490px}.house-3d{width:540px;height:330px}.connection-plan{padding:22px}.branches{grid-template-columns:repeat(2,1fr)}.branches:before{display:none}.branches article:before{display:none}}
@media(max-width:620px){.model-shell{min-height:440px;padding:15px}.house-3d{width:410px;height:290px;top:57%;transform:translate(-50%,-50%) rotateX(49deg) rotateZ(-32deg)}.space{padding:9px}.space b{font-size:10px}.space small{display:none}.space:before{height:40px;top:-40px}.space:after{width:40px;right:-40px}.backbone{display:grid;grid-template-columns:1fr}.backbone article{width:100%}.backbone em{transform:rotate(-90deg);line-height:20px}.branches{grid-template-columns:1fr}.plan-title h3{font-size:23px}}
.mini-checks{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.mini-checks label{background:#f4f8f6;border:1px solid var(--line);padding:10px 14px;font-size:12px}.mini-checks input{accent-color:#118879}.compact-choice{margin-top:22px}.sub-title{font-size:17px;margin:28px 0 0}.project-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.project-actions a,.project-actions button{padding:13px 18px;border:1px solid var(--navy);background:transparent;color:var(--navy);text-decoration:none;font:inherit;font-weight:800;cursor:pointer}.project-actions .primary-action{background:var(--teal);border-color:var(--teal);color:#042128}.recommendation-note{background:#eef8f6;border-right:4px solid #159889;padding:14px 16px;line-height:1.7}