@import url('./reference-sections.css');

/* Shared visual system from the supplied reference. */
:root {
  --bg:#f2f1ec; --bg-2:#e8e7e1; --card:#fff; --card-2:#e8e7e1;
  --text:#151715; --muted:#676b65; --dim:#676b65; --line:#d4d5ce; --line-2:#bfc2b8;
  --accent:#252824; --accent-hover:#353b2f; --accent-ink:#fff; --accent-soft:#e8e7e1;
  --green:#20231f; --lime:#d6ff32; --acid:#d6ff32; --ink:#151715; --white:#fff;
  --maxw:1240px; --body:'Manrope',sans-serif; --head:'Manrope',sans-serif;
}
body { background:var(--bg); }
.container { width:min(1240px,calc(100% - 64px)); }
h1,h2,h3 { font-weight:500; letter-spacing:-.04em; }
h2 { font-size:clamp(36px,4.4vw,65px); line-height:1.08; }
.btn { font-size:13px; font-weight:600; min-height:54px; }
.btn-primary,.btn-light { color:var(--ink); background:var(--acid); }
.btn-primary:hover,.btn-light:hover { background:#e4ff78; color:var(--ink); }
.btn-ghost:hover { background:var(--paper-2,#e8e7e1); }
:focus-visible { outline-color:#6d791e; }
::selection { color:var(--ink); background:var(--acid); }
.section { padding:120px 0; }
.site-header { background:var(--ink); color:#fff; border-bottom:1px solid #ffffff29; }
.header-inner { height:94px; gap:30px; }
.logo-mark { background:transparent; color:var(--acid); width:38px; height:42px; }
.logo-mark .ic { width:34px; height:34px; }
.logo-text b { font-size:22px; font-weight:700; text-transform:uppercase; letter-spacing:.13em; }
.logo-text small { color:#c2c5bd; font-size:8px; letter-spacing:.12em; text-transform:uppercase; margin-top:7px; }
.brand-dot { color:var(--acid); }
.nav { gap:25px; }
.nav a { color:#dddeda; font-size:12px; }
.nav a:hover { color:var(--acid); }
.header-cta { color:var(--acid); border-color:#ffffff50; font-size:11px; }
.header-cta:hover { background:var(--acid); color:var(--ink); border-color:var(--acid); }
.site-header :focus-visible,.hero :focus-visible,.footer :focus-visible { outline-color:var(--acid); }
.burger { border-color:#ffffff50; }
.burger span,.burger span:before,.burger span:after { background:white; }
.landing .site-header { position:fixed; inset:0 0 auto; background:#151715cc; }
.landing .site-header.scrolled,.landing .site-header:has(.nav.open) { background:var(--ink); }
.hero { height:100svh; min-height:680px; background:var(--ink); }
.hero-content { padding-top:clamp(135px,18vh,180px); padding-bottom:25px; }
.hero::after { background:linear-gradient(90deg,#0c0e0ce8 0%,#0c0e0ca3 33%,#0c0e0c00 65%),linear-gradient(0deg,#0c0e0ce8 0%,#0c0e0c00 37%),linear-gradient(180deg,#0c0e0c99 0%,#0c0e0c00 22%); }
.hero h1 { font-size:clamp(46px,4.8vw,72px); line-height:1.04; font-weight:500; letter-spacing:-.04em; }
.hero .hero-description { font-size:16px; line-height:1.75; color:#e1e3dc; margin-top:28px; }
.hero-link { font-size:13px; margin-top:28px; border-color:#ffffff70; }
.hero-console { max-width:830px; }
.hero-console-top { font-size:13px; }
.hero-state { color:#d4d8ca; }
.hero-control { color:#fff; background:#20231f; border-color:#8a8e82; min-height:56px; padding-inline:24px; }
.hero-control:hover { background:#353b2f; }
.hero-control[aria-pressed=true] { background:var(--acid); border-color:var(--acid); color:var(--ink); }
.hero-error { background:var(--ink); }
.hero-disclaimer { color:#d1d4ca; }
/* Entire approach block, including its copy and side note, comes from the reference. */
.intro { padding-block:140px; }
.intro h2 { letter-spacing:-.04em; text-wrap:initial; }
.intro h2 em { color:#74786f; }
.intro .section-index { align-items:start; padding-top:31px; }
.intro-copy .text-link { color:var(--ink); }
.intro-note { margin-bottom:7px; }
.section-index { color:var(--muted); }
.section-index.light { color:#b6baae; }
.services { padding:110px 0 120px; }
.section-heading h2,.process-title h2 { letter-spacing:-.04em; }
.services .section-heading { align-items:start; }
.services .section-index { padding-top:10px; }
.service-grid { margin-top:44px; }
.service-card { min-height:320px; }
.service-card p { color:#b8bdb2; }
.service-number { color:#aeb4a5; }
.service-card a { display:inline-flex; padding-block:8px; }
.service-card .service-icon { opacity:1; }
.scenarios { background:var(--bg); }
.scenarios .section-head { max-width:850px; }
.demo-caption { margin-top:34px; }
.sc-tab { background:transparent; }
.sc-tab[aria-selected=true] { background:var(--ink); border-color:var(--ink); }
.sc-tab[aria-selected=true] small { color:#cbd0c2; }
.sc-tab[aria-selected=true] .tab-ic { color:var(--acid); }
.sc-tab .bar { background:var(--acid); }
.stage-wrap { top:118px; }
.hud-clock { background:var(--ink); }
.hud-day { color:#d1d5c9; }
.trigger { background:var(--paper-2,#e8e7e1); }
.sc-icon,.step.active .st-ic { background:var(--acid); color:var(--ink); }
.step.done .st-ic { background:#e0e4d4; color:var(--ink); }
.switch[aria-pressed=true] .switch-track { background:var(--ink); }
.sc-note { color:var(--muted); }
.house { --accent:#d6ff32; --ok:#b8d98a; }
#prices { background:var(--paper-2,#e8e7e1); }
#prices .section-head { max-width:850px; }
.prices { border-color:#c8cbc0; }
.price { padding:40px 30px; border-color:#c8cbc0; }
.price.featured { background:var(--ink); }
.price.featured .price-sub { color:#c6cbbb; }
.price.featured .btn { background:var(--acid); color:var(--ink); }
.featured .checklist .ic,.badge { color:var(--acid); }
.budget-grid { grid-template-columns:1.5fr 1fr; gap:0; background:white; align-items:stretch; margin-top:55px; }
.budget-form { padding:40px; }
.budget-form legend { font-size:15px; }
.budget-form fieldset { padding-bottom:26px; margin-bottom:26px; }
.segmented { gap:8px; }
.segmented label>span { border-color:#d3d6cc; font-size:12px; min-height:48px; }
.segmented input:checked+span { background:var(--ink); border-color:var(--ink); }
.system-choices label:has(:checked) { background:var(--ink); color:white; border-color:var(--ink); }
.system-choices label:has(:checked) .ic { color:var(--acid); }
.system-choices input { accent-color:var(--acid); }
.budget-result { position:static; padding:42px 35px; background:#20231f; }
.budget-range { color:white; font-size:clamp(30px,2.8vw,42px); line-height:1.22; margin-top:32px; }
.budget-range br { display:none; }
.budget-range { white-space:normal; overflow-wrap:normal; }
.budget-summary,.result-note,.method-details { color:#c2c7b8; }
.budget-lines li,.result-top,.method-details { border-color:#484d42; }
.budget-result .btn { color:var(--ink); background:var(--acid); }
.budget-result :focus-visible { outline-color:var(--acid); }
.panel-promo { margin-top:36px; padding-block:30px; }
.panel-promo-icon { background:var(--ink); color:var(--acid); }
.panel-promo h3 { font-size:25px; }
.process { background:#252824; padding-block:120px; }
.process-layout { grid-template-columns:1fr 1.4fr; gap:100px; }
.process-title h2 { margin:24px 0 30px; }
.process-title p,.process-list p { color:#bac0b2; }
.process-list h3 { font-size:22px; }
#faq { background:var(--bg); }
.faq-grid { gap:90px; }
.faq summary { font-size:15px; }
.footer { background:#111311; color:white; padding:62px 0 26px; }
.footer-meta { border-color:#ffffff29; color:#b1b7a8; }
.footer-inner p { color:#c1c6b8; }
.footer-inner>a:last-child { color:var(--acid); }
/* The operating surface shares the same visual language, with white product photographs. */
.panel-page { background:var(--bg); }
.config-tabs,.config-tabs button { background:var(--bg); }
.config-tabs { top:94px; }
.config-tabs button[aria-selected=true] { color:var(--ink); border-color:var(--ink); }
.demo-tag,.smart-summary { background:#e4e8d7; border-color:#c4cbb6; }
.smart-preset { background:var(--acid); color:var(--ink); border-color:var(--ink); }
.preset-button:hover { background:#e4e8d7; }
.cabinet { background:#e4e5dc; border-color:#c6cbbd; }
.din-rail { background:#c5cbbb; border-color:#d2d7c7; }
.photo-device:hover,.photo-device.selected { background:#f6f8eb; }
.photo-device.selected { border-color:#5d681e; }
.smart-base>div,.external-device { background:#fff; }
.smart-summary>div>span,.product-copy small { color:#414832; }
.external-device:hover,.external-device[aria-pressed=true] { background:#e9eecf; }
.mobile-result-link { background:var(--ink); border-color:#4b5141; }
.save-toast { background:var(--ink); }
@media(max-width:1150px) {
  .nav { gap:17px; }
  .header-inner { gap:25px; }
  .intro { grid-template-columns:.7fr 2fr 1fr; gap:26px; }
  .service-card { grid-template-columns:55px 1fr; }
  .budget-form { padding:32px; }
  .budget-result { padding:32px 26px; }
  .process-layout { gap:60px; }
}
@media(max-width:900px) {
  .container { width:calc(100% - 36px); }
  .header-inner { height:76px; justify-content:space-between; }
  .header-cta { display:none; }
  .burger { display:block; }
  .nav { display:none; position:absolute; top:75px; left:0; right:0; margin:0; padding:24px 18px; background:var(--ink); border-bottom:1px solid #ffffff30; }
  .nav.open { display:flex; flex-direction:column; align-items:stretch; gap:0; }
  .nav a { font-size:16px; padding:13px 0; }
  .hero { min-height:720px; }
  .hero-content { padding-top:130px; }
  .hero h1 { font-size:clamp(42px,6.7vw,60px); }
  .section,.intro,.services,.process { padding-block:85px; }
  .intro { grid-template-columns:1fr; gap:28px; }
  .intro .section-index { padding-top:0; }
  .intro h2 { margin-top:0; max-width:700px; }
  .intro-note { max-width:400px; }
  .section-heading { grid-template-columns:1fr; gap:25px; }
  .section-heading h2 { margin-bottom:0; }
  .services .section-index { padding-top:0; }
  .service-card { min-height:330px; padding:24px; grid-template-columns:35px 1fr; }
  .service-card h3 { font-size:24px; }
  .service-icon { width:65px; height:65px; right:25px; }
  .budget-grid { grid-template-columns:1.25fr 1fr; }
  .budget-form { padding:28px; }
  .object-choices { flex-direction:column; }
  .object-choices label>span { margin:0; }
  .budget-range { font-size:30px; }
  .process-layout { grid-template-columns:1fr; gap:45px; }
  .process-title h2 { max-width:600px; }
  .process-title p { max-width:600px; }
  .config-tabs { top:76px; }
}
@media(max-width:600px) {
  html { scroll-padding-top:92px; }
  .hero { min-height:760px; height:100svh; }
  .hero-content { padding-top:118px; padding-bottom:18px; }
  .hero h1 { font-size:clamp(37px,10vw,52px); line-height:1.07; }
  .hero .hero-description { font-size:13px; line-height:1.65; margin-top:20px; }
  .hero-link { margin-top:19px; font-size:12px; }
  .hero::after { background:linear-gradient(180deg,#0c0e0cc2 0%,#0c0e0caf 49%,#0c0e0c00 64%,#0c0e0ce8 84%); }
  .hero-control { min-height:48px; padding-inline:10px; }
  .hero-console { padding-top:30px; }
  .hero-console-top { font-size:12px; }
  .hero-disclaimer { font-size:9px; }
  h2 { font-size:38px; }
  .section,.intro,.services,.process { padding-block:72px; }
  .intro { gap:26px; }
  .intro h2 { font-size:38px; line-height:1.1; margin:0 0 24px; }
  .intro-copy>p { font-size:14px; }
  .intro-note { padding-top:5px; padding-left:20px; }
  .service-grid { grid-template-columns:1fr; margin-top:30px; }
  .service-card { min-height:295px; grid-template-columns:40px 1fr; padding:25px; }
  .service-card h3 { font-size:26px; }
  .service-icon { top:26px; }
  .service-card p { font-size:13px; }
  .demo-caption { margin-top:24px; }
  .stage-wrap { top:0; }
  .price { padding:34px 25px; }
  .budget-grid { grid-template-columns:1fr; margin-top:32px; }
  .budget-form { padding:26px 22px; }
  .budget-result { padding:32px 25px; }
  .system-choices { grid-template-columns:1fr 1fr; }
  .system-choices label { font-size:11px; padding:12px 9px; gap:6px; }
  .system-choices .ic { display:none; }
  .budget-range { font-size:35px; }
  .panel-promo .text-link { margin-left:0; }
  .panel-promo h3 { font-size:23px; }
  .process-layout { gap:35px; }
  .process-title h2 { font-size:38px; }
  .process-list li { grid-template-columns:45px 1fr; padding-block:24px; }
  .process-list p { font-size:13px; }
  .faq-grid { gap:30px; }
  .footer { padding-top:42px; }
  .footer-inner p { max-width:300px; }
  .footer-meta { font-size:10px; }
}
@media print {
  .site-header,.footer { display:none; }
  body,.panel-page { background:white; }
}