:root{
  --yellow-1:#FECB00;
  --yellow-2:#FFBE0B;
  --yellow-3:#F8D52C;
  --yellow-gradient:linear-gradient(135deg,var(--yellow-1),var(--yellow-2) 50%,var(--yellow-3));
  --ink:#292929;
  --muted:#8c8c8c;
  --light:#f7f8fa;
  --line:#e9ebef;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--ink);background:#fff}
a{text-decoration:none;color:inherit}
.container{width:min(1110px,calc(100% - 48px));margin:auto}
.header{height:74px;background:#fff}
.nav{height:74px;display:flex;align-items:center;justify-content:space-between}
.logo{font-size:12px;font-weight:700;letter-spacing:.05em;white-space:nowrap}
.logo span{color:var(--yellow-2)}
.nav-links{display:flex;gap:32px;font-size:9px;color:#555}
.nav-links a:hover,.login:hover{color:#e0a900}
.nav-actions{display:flex;align-items:center;gap:16px;font-size:9px}
.signup{padding:7px 13px;border-radius:4px;color:#fff;background:#303030}
.menu-toggle{display:none;border:0;background:none;font-size:22px}
.hero{padding:54px 0 40px}
.hero-grid{display:grid;grid-template-columns:1fr 1.15fr;align-items:center;min-height:300px}
.eyebrow{font-size:8px;letter-spacing:.18em;font-weight:700;color:#999;margin:0 0 15px}
.hero h1{font-size:30px;line-height:1.22;margin:0 0 13px;font-weight:700}
.hero h1 span,.intro h2 span,.arrival h2,.future h2,.reviews h2 span{background:var(--yellow-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:9px;line-height:1.7;color:#9b9b9b;max-width:390px}
.hero-buttons{display:flex;align-items:center;gap:27px;margin-top:22px}
.btn{font-size:8px;font-weight:600;padding:12px 20px;border-radius:4px;display:inline-block}
.primary{color:#fff;background:#333}
.primary:hover{background:#111}
.text-btn{font-size:8px;font-weight:600}
.text-btn span{margin-left:7px}
.hero-visual{height:310px;position:relative;overflow:hidden}
.orbit{position:absolute;border:1px solid #d9dde2;border-radius:50%;left:80px;top:20px}
.orbit-1{width:390px;height:210px;transform:rotate(-7deg)}
.orbit-2{width:310px;height:165px;left:120px;top:44px}
.orbit-icon{position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 8px #ccd1d5;display:grid;place-items:center;font-size:9px;color:#9da3aa;z-index:3}
.icon-a{top:18px;left:162px}.icon-b{top:75px;left:97px}.icon-c{top:42px;right:68px}.icon-d{top:135px;right:32px}
.house{position:absolute;right:28px;bottom:18px;width:310px;height:170px;filter:drop-shadow(0 12px 13px rgba(0,0,0,.12))}
.house-body{position:absolute;right:10px;bottom:0;width:275px;height:116px;background:linear-gradient(145deg,#fdfdfd,#d8dce0);clip-path:polygon(0 17%,80% 0,100% 28%,100% 100%,0 100%)}
.house-roof{position:absolute;right:35px;top:15px;width:240px;height:74px;background:linear-gradient(150deg,#eef1f4,#c7ccd1);clip-path:polygon(7% 45%,58% 0,100% 42%,89% 100%,0 100%)}
.house-glass{position:absolute;left:28px;bottom:26px;width:150px;height:100px;background:linear-gradient(135deg,rgba(55,75,90,.2),rgba(230,244,250,.65));border:3px solid #c5cbd0;z-index:2}
.house-window{position:absolute;background:#b9d4de;opacity:.85;z-index:3}
.w1{left:42px;bottom:42px;width:45px;height:65px}.w2{left:95px;bottom:42px;width:45px;height:65px}.w3{right:56px;bottom:28px;width:45px;height:46px}
.house-door{position:absolute;left:75px;bottom:15px;width:40px;height:62px;background:#b6c7cd;border:2px solid #9da9ae;z-index:4}
.trusted{padding-top:14px}
.trusted>span{display:block;color:#999;font-size:8px;margin-bottom:12px}
.trusted-logos{display:flex;align-items:center;justify-content:space-between;gap:22px;color:#1d4d88;font-size:13px}
.trusted-logos span{color:#e84b55}.trusted-logos .nest{color:#6d777f;font-size:12px}.trusted-logos .smart{color:#4f989b;font-size:8px;text-align:center}.trusted-logos .philips{font-size:15px}.homekit{color:#444!important;font-size:8px;border:1px solid #ddd;padding:4px 7px;border-radius:3px}
.intro{padding:58px 0 20px}
.center{text-align:center}
.intro h2{font-size:18px;line-height:1.35;margin:0 0 34px}
.product-strip{width:100%;overflow:hidden}
.strip-track{display:flex;gap:20px;width:max-content;transform:translateX(-20px);animation:slide 18s linear infinite}
@keyframes slide{50%{transform:translateX(-130px)}100%{transform:translateX(-20px)}}
.mini-card{width:145px;height:135px;border-radius:7px;background:#f2f3f4;display:grid;place-items:center;flex:none;overflow:hidden}
.mini-card.wide{width:250px}
.mini-device{width:92px;height:92px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px #e2e4e6,0 8px 18px #d9dce0}
.small-round{width:68px;height:68px}
.thermo{width:74px;height:74px;border-radius:18px;background:#080808;color:#fff;display:grid;place-items:center;font-size:23px;box-shadow:0 10px 18px #d2d2d2}.thermo span{font-size:10px}
.wall-controller{width:170px;height:72px;border-radius:8px;background:#152431;box-shadow:0 8px 15px #bfc3c5;color:#53d6ff;display:flex;align-items:center;gap:12px;padding:12px}.wall-controller i{width:26px;height:26px;border-radius:50%;border:2px solid #d8f6ff}.wall-controller strong{font-size:27px;font-weight:400}.wall-controller small{font-size:5px;color:#a6bac7}
.lock{width:42px;height:92px;border-radius:20px;background:linear-gradient(90deg,#30353a,#121416);box-shadow:5px 8px 15px #d0d2d4}
.arrival{padding:75px 0 50px}
.arrival-grid{display:grid;grid-template-columns:1.15fr .85fr;align-items:center}
.camera-pair{height:360px;display:flex;align-items:center;gap:15px}
.camera{width:165px;height:260px;border-radius:36px;background:linear-gradient(120deg,#fafafa,#d7d9da);box-shadow:8px 18px 25px rgba(0,0,0,.16);position:relative;border:1px solid #eee}
.camera .lens{position:absolute;width:82px;height:82px;left:42px;top:75px;border-radius:50%;background:radial-gradient(circle,#222 0 18%,#777 19% 25%,#151515 26% 38%,#555 39% 43%,#171717 44%);box-shadow:0 4px 10px #777}
.camera .sensor{position:absolute;width:28px;height:28px;left:69px;bottom:39px;border-radius:50%;background:#181818;border:5px solid #777}
.arrival-copy{position:relative}
.arrival h2{font-size:20px;margin:0 0 13px}.arrival h2 strong{color:#222}
.arrival-copy>p,.future-copy>p{font-size:8px;line-height:1.7;color:#aaa;max-width:355px}
.sensor-product{height:180px;position:relative;margin-top:20px}
.black-sensor{position:absolute;right:42px;top:0;width:120px;height:120px;border-radius:30px;background:#111;color:#ddd;box-shadow:0 14px 20px #ddd;text-align:center;padding-top:18px}.black-sensor small{display:block;font-size:6px}.black-sensor b{font-size:26px;font-weight:400;display:inline-block;margin-top:18px}.black-sensor span{font-size:8px}
.white-hub{position:absolute;right:0;bottom:8px;width:58px;height:58px;background:#f9f9f9;border-radius:18px;box-shadow:0 5px 12px #ddd}
.dashboard-section{padding:45px 0 20px}
.dashboard-heading{font-size:10px;line-height:1.45;text-align:right;margin-right:42px;margin-bottom:-8px;position:relative;z-index:2;background:#fff;width:max-content;margin-left:auto;padding:0 10px}
.dashboard-heading strong{display:block;background:var(--yellow-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.dashboard-scene{height:340px;border-radius:5px;background:linear-gradient(135deg,#bbb9b3,#e6e2dc 48%,#aaa9a6);padding:36px 0 0 95px;position:relative;overflow:hidden}
.dashboard-scene:before,.dashboard-scene:after{content:"";position:absolute;bottom:-70px;width:310px;height:250px;background:rgba(245,243,238,.4);border-radius:50%}
.dashboard-scene:before{left:-100px}.dashboard-scene:after{right:-80px}
.dashboard{width:660px;height:230px;background:rgba(247,249,249,.94);border-radius:12px;box-shadow:0 22px 35px rgba(0,0,0,.22);display:flex;position:relative;z-index:2}
.dash-side{width:55px;background:linear-gradient(180deg,#9eefff,#b8f5ff);border-radius:12px 0 0 12px;display:flex;flex-direction:column;align-items:center;gap:18px;padding-top:13px;color:#fff;font-size:10px}.dash-side .avatar{width:29px;height:29px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:16px}.dash-side .active{margin-top:12px}
.dash-main{flex:1;padding:18px 18px}.dash-top{display:flex;justify-content:space-between;font-size:10px}.dash-top small{font-size:6px;color:#555}.dash-cards{display:grid;grid-template-columns:1.3fr .6fr .8fr;gap:9px;margin-top:14px}.chart-card,.weather,.room-card{background:#fff;border-radius:6px;padding:10px;min-height:68px;box-shadow:0 3px 9px rgba(0,0,0,.05)}.chart-card small,.room-card small{font-size:5px;color:#999}.bars{height:35px;display:flex;align-items:end;gap:5px;margin-top:8px}.bars i{display:block;width:9px;border-radius:3px 3px 0 0;background:linear-gradient(to top,#78d9e8,#c5f8ff)}.bars i:nth-child(1){height:14px}.bars i:nth-child(2){height:23px}.bars i:nth-child(3){height:18px}.bars i:nth-child(4){height:31px}.bars i:nth-child(5){height:25px}.bars i:nth-child(6){height:34px}.weather b{font-size:14px;font-weight:500;display:block}.weather span{font-size:6px}.weather small{font-size:5px;color:#999;display:block;margin-top:6px}.room-card div{margin-top:14px;font-size:8px;color:#777}.room-card b{color:#333}
.dashboard-caption{display:inline-block;margin-top:-4px;background:#fff;border-radius:0 6px 6px 0;padding:11px 20px 11px 3px;font-size:16px;font-weight:700;position:relative;z-index:3}.dashboard-caption span{background:var(--yellow-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.future{padding:75px 0}
.future-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.device-collage{height:260px;position:relative;background:linear-gradient(135deg,#f1f1f0,#fff);border-radius:5px;overflow:hidden}
.round-speaker{position:absolute;left:25px;top:18px;width:82px;height:82px;border-radius:50%;background:radial-gradient(circle,#aaa 0 10%,#eee 11% 100%);box-shadow:0 7px 12px #bbb;display:grid;place-items:center;color:#777}
.smart-lock{position:absolute;left:122px;top:10px;width:62px;height:220px;border-radius:30px;background:linear-gradient(90deg,#32383b,#101214);box-shadow:6px 9px 15px #c8c8c8}
.smart-lock:after{content:"";position:absolute;top:85px;left:8px;width:72px;height:28px;border-radius:0 16px 16px 0;background:#202528}
.small-hub{position:absolute;left:210px;top:65px;width:82px;height:110px;border-radius:18px;background:#f6f6f6;box-shadow:0 10px 18px #ccc;display:grid;place-items:center;color:#aaa;font-size:8px}
.counter{position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(#f3f3f3,#d9d9d7)}
.future-copy h2{font-size:18px;line-height:1.35;margin:0 0 12px;background:var(--yellow-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.reviews{padding:40px 0 65px;position:relative;overflow:hidden}
.heart{font-size:70px;line-height:.7;background:var(--yellow-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.85}
.reviews h2{font-size:19px;margin:0 0 8px}.review-intro{max-width:420px;margin:0 auto;color:#aaa;font-size:8px;line-height:1.7}
.review-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:start;margin-top:38px}
.review-card{background:#fff;border:1px solid #f0f1f2;border-radius:8px;padding:12px;text-align:left;display:flex;gap:8px;box-shadow:0 9px 25px rgba(0,0,0,.07);font-size:7px}.review-card.offset{transform:translateY(28px)}.person{width:27px;height:27px;border-radius:50%;background:linear-gradient(135deg,#eee,#aaa);display:grid;place-items:center;font-size:9px;flex:none}.review-card b{display:block;font-size:7px}.review-card small{display:block;color:#aaa;margin-top:2px}.review-card p{color:#999;line-height:1.5;margin:8px 0}.review-card strong{font-size:6px;background:var(--yellow-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
footer{background:#3f4041;color:#eee;padding:45px 0 18px}
.footer-grid{display:grid;grid-template-columns:1.3fr .6fr 1.4fr;gap:70px}
.footer-logo{display:block;margin-bottom:15px}.footer-grid p{font-size:8px;color:#aaa;line-height:1.7;max-width:300px}.socials{display:flex;gap:12px;color:#999;font-size:9px}.footer-links{display:flex;flex-direction:column;gap:10px;font-size:8px}.footer-links b,.subscribe>b{font-size:8px;margin-bottom:4px}.footer-links a{color:#bbb}.subscribe-row{display:flex;flex-direction:column;gap:8px;margin-top:9px}.subscribe input{height:31px;border:0;border-radius:5px;padding:0 12px;font-size:8px;outline:none}.subscribe button{height:31px;border:0;border-radius:5px;background:var(--yellow-gradient);color:#fff;font-size:8px;font-weight:700;cursor:pointer}.copyright{border-top:1px solid #555;margin-top:32px;padding-top:15px;display:flex;justify-content:space-between;color:#777;font-size:6px}
@media(max-width:850px){
  .nav-links,.nav-actions{display:none}.menu-toggle{display:block}
  .nav.open .nav-links{display:flex;position:absolute;top:74px;left:0;right:0;background:#fff;z-index:20;padding:20px 24px;flex-direction:column;gap:18px;box-shadow:0 8px 20px #ddd}
  .hero-grid,.arrival-grid,.future-grid{grid-template-columns:1fr}
  .hero-visual{margin-top:25px}.arrival-copy{padding-top:25px}.camera-pair{justify-content:center}
  .dashboard-scene{padding:45px 20px 0;height:330px}.dashboard{width:100%;max-width:660px}.review-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}.subscribe{grid-column:1/-1}
}
@media(max-width:560px){
  .container{width:min(100% - 30px,1110px)}
  .hero h1{font-size:26px}.trusted-logos{flex-wrap:wrap;justify-content:center}.trusted-logos b{min-width:26%}
  .arrival{padding-top:40px}.camera{width:125px;height:210px}.camera .lens{left:32px;top:58px}.camera .sensor{left:52px}
  .dashboard-heading{margin-right:0;font-size:8px}.dashboard-scene{height:260px;padding:25px 8px 0}.dashboard{height:190px}.dash-side{width:40px;gap:11px}.dash-main{padding:12px}.dash-cards{gap:5px;margin-top:8px}.chart-card,.weather,.room-card{padding:6px;min-height:52px}.room-card div{margin-top:7px;font-size:6px}.bars{gap:2px}.bars i{width:6px}
  .dashboard-caption{font-size:13px}.future{padding:45px 0}.device-collage{height:210px}.review-grid{grid-template-columns:1fr}.review-card.offset{transform:none}.footer-grid{grid-template-columns:1fr}.subscribe{grid-column:auto}.copyright{flex-direction:column;gap:7px}
}