/*
 * Yellow IOT — site styles.
 * Propshaft serves this file as-is; every file in app/assets/stylesheets is linked via
 * `stylesheet_link_tag :app` in the layout.
 */

:root{
  --bg:#090909;
  --card:#111111;
  --card-2:#151515;
  --accent:#FFD230;
  --accent-dim:#8a7218;
  --text:#ffffff;
  --text-soft:#a7a7a7;
  --text-faint:#6b6b6b;
  --border:rgba(255,255,255,0.07);
  --border-strong:rgba(255,255,255,0.14);
  --radius:20px;
  --red:#FF4433;
  --red-dim:#7a271f;
  --lox-green:#74C365;
  --lox-green-dim:#2f4a27;
  --header-h:82px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; color-scheme:dark; scroll-padding-top:var(--header-h);}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  overflow-x:hidden;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
body.scroll-locked{overflow:hidden;}
img{display:block; max-width:100%;}
button{font-family:inherit; color:inherit;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px;}

.skip-link{
  position:absolute; left:16px; top:-60px; z-index:500;
  background:var(--accent); color:#0a0a0a; padding:10px 16px; border-radius:10px;
  font-weight:600; font-size:14px; text-decoration:none; transition:top .2s ease;
}
.skip-link:focus{top:12px;}

.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- Utility bar ---------- */
.utility-bar{
  background:#000;
  border-bottom:1px solid var(--border);
  font-size:12.5px;
  color:var(--text-soft);
  letter-spacing:.02em;
}
.utility-bar .inner{
  max-width:1360px; margin:0 auto; padding:9px 32px;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.emergency-strip{display:flex; align-items:center; gap:8px; color:#ffb3b3;}
.emergency-dot{
  width:6px; height:6px; border-radius:50%; flex-shrink:0;
  background:#ff5c5c;
  box-shadow:0 0 0 0 rgba(255,92,92,.5);
  animation:emerg-pulse 2.2s infinite;
}
@keyframes emerg-pulse{
  0%{box-shadow:0 0 0 0 rgba(255,92,92,.45);}
  70%{box-shadow:0 0 0 6px rgba(255,92,92,0);}
  100%{box-shadow:0 0 0 0 rgba(255,92,92,0);}
}
.emergency-strip a{color:#ffb3b3; text-decoration:none; font-weight:600; white-space:nowrap;}
.emergency-strip a:hover{color:#fff;}

.locale-switch{display:flex; gap:14px;}
.locale-switch a{color:var(--text-faint); text-decoration:none; transition:color .2s;}
.locale-switch a.active{color:var(--text);}
.locale-switch a:hover{color:var(--text);}

@media(max-width:520px){
  .utility-bar .inner{padding:9px 16px;}
  .emergency-strip .label-long{display:none;}
}

/* ---------- Navbar ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid transparent;
  transition:background .35s ease, backdrop-filter .35s ease, border-color .35s ease;
}
/* Keep the header (and its close button) above the open overlay menu */
.site-header:has(.menu-toggle.open){z-index:250;}
.site-header.scrolled{
  background:rgba(9,9,9,0.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--border);
}
.site-header nav{
  padding:20px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  max-width:1360px; margin:0 auto;
  transition:padding .3s ease;
}
.site-header.scrolled nav{padding:14px 32px;}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:16px; letter-spacing:.02em; text-decoration:none; color:var(--text);}
.mark{width:22px; height:22px; display:grid; grid-template-columns:repeat(3,1fr); gap:2px; flex-shrink:0;}
.mark i{background:var(--accent); border-radius:1px; opacity:.9;}
.mark i:nth-child(4),.mark i:nth-child(7){opacity:.6;}
.mark i:nth-child(3),.mark i:nth-child(6),.mark i:nth-child(9){opacity:.35;}

.nav-cta{display:flex; align-items:center; gap:16px;}
.menu-toggle{
  width:42px; height:42px; border-radius:12px;
  border:1px solid var(--border); background:var(--card);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; position:relative; z-index:210;
  transition:border-color .25s ease, background .25s ease;
}
.menu-toggle:hover{border-color:var(--border-strong);}
.menu-toggle .bars{width:16px; display:flex; flex-direction:column; gap:4px;}
.menu-toggle .bars span{height:1.5px; background:var(--text); transition:transform .3s ease, opacity .3s ease, width .3s ease;}
.menu-toggle .bars span:nth-child(2){width:70%; align-self:flex-end;}
.menu-toggle.open .bars span:nth-child(1){transform:translateY(5.5px) rotate(45deg); width:100%;}
.menu-toggle.open .bars span:nth-child(2){opacity:0;}
.menu-toggle.open .bars span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg); width:100%;}

@media(max-width:520px){
  .site-header nav, .site-header.scrolled nav{padding-left:16px; padding-right:16px;}
  .nav-cta{gap:10px;}
  .nav-cta .btn-primary{padding:10px 14px; font-size:13px;}
  .nav-cta .btn-primary .label-long{display:none;}
}
@media(min-width:521px){ .nav-cta .btn-primary .label-short{display:none;} }

/* ---------- Fullscreen overlay nav ---------- */
.overlay-nav{
  position:fixed; inset:0; z-index:200;
  background:rgba(9,9,9,0.97);
  backdrop-filter:blur(10px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:40px;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .35s ease, transform .35s ease, visibility .35s;
}
.overlay-nav.open{opacity:1; visibility:visible; transform:translateY(0); transition:opacity .35s ease, transform .35s ease, visibility 0s;}
.overlay-nav ul{list-style:none; text-align:center;}
.overlay-nav li{margin:6px 0; overflow:hidden;}
.overlay-nav ul a{
  display:inline-block;
  color:var(--text-soft); text-decoration:none;
  font-size:clamp(2rem, 5vw, 3.2rem); font-weight:600; letter-spacing:-0.01em;
  transition:color .25s ease, transform .25s ease;
  transform:translateY(100%);
}
.overlay-nav.open ul a{transform:translateY(0);}
.overlay-nav ul a:hover{color:var(--accent);}
.overlay-nav li:nth-child(1) a{transition-delay:.05s;}
.overlay-nav li:nth-child(2) a{transition-delay:.09s;}
.overlay-nav li:nth-child(3) a{transition-delay:.13s;}
.overlay-nav li:nth-child(4) a{transition-delay:.17s;}
.overlay-nav li:nth-child(5) a{transition-delay:.21s;}
.overlay-nav li:nth-child(6) a{transition-delay:.25s;}
.overlay-nav li:nth-child(7) a{transition-delay:.29s;}
.overlay-nav .locale-switch{font-size:14px; letter-spacing:.04em;}

/* ---------- Section rail ---------- */
.section-rail{
  position:fixed; right:28px; top:50%; transform:translateY(-50%);
  z-index:60; display:flex; flex-direction:column; gap:6px;
  opacity:0; pointer-events:none; transition:opacity .4s ease;
}
.section-rail.visible{opacity:1; pointer-events:auto;}
.section-rail a{display:flex; align-items:center; justify-content:center; width:17px; height:17px;}
.section-rail .dot{
  width:7px; height:7px; border-radius:50%; background:var(--border-strong);
  transition:background .25s ease, transform .25s ease;
}
.section-rail a:hover .dot{background:var(--text-soft);}
.section-rail a.active .dot{background:var(--accent); transform:scale(1.3);}
@media(max-width:900px){ .section-rail{display:none;} }

/* ---------- Buttons ---------- */
.btn-primary{
  background:var(--accent); color:#0a0a0a; border:none; text-decoration:none;
  padding:11px 22px; border-radius:12px; font-weight:600; font-size:13.5px;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 8px 24px -8px rgba(255,210,48,.45);}
.btn-primary svg{transition:transform .2s ease; flex-shrink:0;}
.btn-primary:hover svg{transform:translateX(3px);}
.btn-primary:disabled{opacity:.6; cursor:progress; transform:none; box-shadow:none;}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:calc(92vh - var(--header-h));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:60px 32px 80px;
  text-align:center;
  overflow:hidden;
}
.grid-bg{
  position:absolute; inset:-40px;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size:56px 56px;
  z-index:0;
  transition:transform .15s ease-out;
}
.grid-fade{
  position:absolute; inset:0; z-index:0;
  background:radial-gradient(ellipse 60% 50% at 50% 40%, transparent 0%, var(--bg) 78%);
}
.eyebrow{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 16px; border:1px solid var(--border-strong); border-radius:100px;
  font-size:12.5px; color:var(--text-soft); margin-bottom:28px;
  background:rgba(255,255,255,0.02);
}
.eyebrow .sq{width:6px; height:6px; background:var(--accent); border-radius:1px; flex-shrink:0;}
.hero h1{
  position:relative; z-index:1;
  font-size:clamp(2.4rem, 5.4vw, 4.6rem);
  font-weight:700; line-height:1.06; letter-spacing:-0.02em;
  max-width:900px;
}
.hero h1 .accent{color:var(--accent);}
.hero p.sub{
  position:relative; z-index:1;
  margin-top:22px; max-width:560px;
  color:var(--text-soft); font-size:16.5px; line-height:1.65;
}
@media(max-width:520px){
  .hero{padding:48px 16px 64px;}
  .hero h1 br{display:none;}
}

/* ---------- Path cards ---------- */
.card-row{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 1fr; gap:22px;
  margin-top:56px; max-width:920px; width:100%;
}
.path-card{
  position:relative; display:block;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:32px 28px;
  text-align:left; text-decoration:none; color:var(--text);
  transition:border-color .3s ease, transform .3s ease, background .3s ease;
  overflow:hidden;
}
.path-card:hover, .path-card:focus-visible{
  border-color:var(--accent);
  transform:translateY(-4px);
  background:var(--card-2);
}
.path-card .icon-box{
  width:44px; height:44px; border-radius:12px;
  background:var(--card-2);
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:22px;
  transition:border-color .3s ease;
}
.path-card:hover .icon-box{border-color:var(--accent-dim);}
.path-card .icon-box svg{width:20px; height:20px; stroke:var(--accent);}
.path-card h3{font-size:19px; font-weight:600; margin-bottom:8px;}
.path-card p{font-size:14px; color:var(--text-soft); line-height:1.6; margin-bottom:20px;}
.path-card .go{display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600;}
.path-card .go svg{width:15px; height:15px; transition:transform .25s ease;}
.path-card:hover .go svg{transform:translateX(4px);}

.trace{
  position:absolute; top:50%; left:50%;
  width:22px; height:1px;
  background:var(--border-strong);
  transform:translate(-50%,-50%);
  z-index:2; display:none; pointer-events:none;
}
@media(min-width:701px){ .trace{display:block;} }
.trace .pulse{
  position:absolute; top:-1px; left:0; width:6px; height:3px; border-radius:2px;
  background:var(--accent); opacity:0;
}
.card-row:hover .trace{background:rgba(255,210,48,.35);}
.card-row:hover .trace .pulse{animation:trace-run 1s ease forwards;}
@keyframes trace-run{
  0%{left:0; opacity:1;}
  100%{left:calc(100% - 6px); opacity:0;}
}
@media(max-width:700px){ .card-row{grid-template-columns:1fr; margin-top:44px;} }

/* ---------- Scroll reveal (only hidden when JS is running) ---------- */
.js .reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.js .reveal.in{opacity:1; transform:translateY(0);}
.reveal-1{transition-delay:.05s;}
.reveal-2{transition-delay:.15s;}
.reveal-3{transition-delay:.25s;}

/* ---------- Section heads ---------- */
.res-head{max-width:600px; margin-bottom:56px;}
.res-head .tag{color:var(--accent); font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;}
.res-head h2{font-size:clamp(1.9rem,3.8vw,2.7rem); font-weight:700; margin-top:14px; letter-spacing:-0.01em;}
.res-head p{color:var(--text-soft); margin-top:14px; line-height:1.7; font-size:15.5px;}

/* ---------- Residential / Industrial feature grid ---------- */
.residential{max-width:1200px; margin:0 auto; padding:140px 32px 130px;}
.industrial{max-width:1200px; margin:0 auto; padding:0 32px 160px;}
.feature-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.feature-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:24px;
  overflow:hidden;
  transition:border-color .3s ease, transform .3s ease, background .3s ease;
}
.feature-card:hover{border-color:var(--accent); transform:translateY(-4px); background:var(--card-2);}
.feature-visual{height:260px; position:relative; overflow:hidden;}
.feature-visual img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease, filter .5s ease;
  filter:brightness(0.94);
}
.feature-card:hover .feature-visual img{transform:scale(1.05); filter:brightness(1.02);}

/* Placeholder visual, used until a real photo exists in app/assets/images */
.visual-placeholder{
  position:relative; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  transition:transform .5s ease;
}
.visual-placeholder::before{
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:26px 26px;
}
.visual-placeholder svg{position:relative; z-index:1; width:44px; height:44px; stroke:rgba(255,255,255,.35);}
.feature-card:hover .visual-placeholder{transform:scale(1.05);}
.visual-res{background:radial-gradient(120% 130% at var(--gx, 30%) 20%, #3a2f0d 0%, #17130a 60%, #0c0c0c 100%);}
.visual-ind{background:radial-gradient(120% 130% at var(--gx, 70%) 20%, #1c2226 0%, #14171a 60%, #0c0c0c 100%);}

.feature-body{padding:30px 32px 34px;}
.feature-body .ficon{
  width:38px; height:38px; border-radius:11px;
  background:var(--card-2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px; transition:border-color .3s ease;
}
.feature-card:hover .ficon{border-color:var(--accent-dim);}
.feature-body .ficon svg{width:17px; height:17px; stroke:var(--accent);}
.feature-body h3{font-size:19px; font-weight:700; letter-spacing:-0.01em; margin-bottom:10px;}
.feature-body p{font-size:14px; color:var(--text-soft); line-height:1.68; max-width:440px;}
.feature-tags{margin-top:20px; display:flex; gap:8px; flex-wrap:wrap;}

@media(max-width:760px){
  .feature-grid{grid-template-columns:1fr;}
  .feature-visual{height:220px;}
}
@media(max-width:520px){
  .residential{padding:100px 16px 90px;}
  .industrial{padding:0 16px 110px;}
  .feature-body{padding:24px 22px 28px;}
}

.tag-chip{font-size:11px; padding:4px 10px; border-radius:100px; border:1px solid var(--border); color:var(--text-faint);}

/* ---------- Emergency Intervention ---------- */
.emergency{
  position:relative;
  padding:150px 32px 130px;
  text-align:center;
  overflow:hidden;
  background:#050505;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.emergency-bg{
  position:absolute; inset:-40px; z-index:0;
  background-image:
    linear-gradient(to right, rgba(255,68,51,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,68,51,0.045) 1px, transparent 1px);
  background-size:56px 56px;
}
.emergency-glow{
  position:absolute; inset:0; z-index:0;
  background:radial-gradient(ellipse 55% 45% at 50% 38%, rgba(255,68,51,0.14) 0%, transparent 70%);
}
.emergency-inner{position:relative; z-index:1; max-width:760px; margin:0 auto;}
.emergency-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 16px; border:1px solid rgba(255,68,51,0.3); border-radius:100px;
  font-size:12.5px; font-weight:600; letter-spacing:.04em; color:#ff8f85;
  background:rgba(255,68,51,0.06);
  margin-bottom:34px;
}
.emergency-eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--red); animation:emerg-pulse 2.2s infinite;}
.emergency-big{
  font-size:clamp(2.6rem, 8vw, 5.6rem);
  font-weight:800; letter-spacing:-0.03em; line-height:0.98;
  color:var(--red);
  text-shadow:0 0 60px rgba(255,68,51,0.35);
}
.emergency h2{margin-top:22px; font-size:clamp(1.4rem,2.8vw,2rem); font-weight:600; letter-spacing:-0.01em;}
.emergency p.sub{
  margin:14px auto 0; color:var(--text-soft); font-size:15px; line-height:1.7; max-width:520px;
}
.emergency-actions{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px;
  margin-top:40px;
}
.btn-call{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--red); color:#fff; text-decoration:none;
  padding:15px 28px; border-radius:14px; font-weight:700; font-size:15px;
  box-shadow:0 0 0 0 rgba(255,68,51,.5);
  animation:call-pulse 2.6s infinite;
  transition:transform .2s ease;
}
.btn-call:hover{transform:translateY(-2px);}
.btn-call svg{width:17px; height:17px;}
@keyframes call-pulse{
  0%{box-shadow:0 0 0 0 rgba(255,68,51,.45);}
  70%{box-shadow:0 0 0 14px rgba(255,68,51,0);}
  100%{box-shadow:0 0 0 0 rgba(255,68,51,0);}
}
.btn-callback{
  background:transparent; color:#fff;
  border:1px solid var(--border-strong);
  padding:15px 26px; border-radius:14px; font-weight:600; font-size:15px;
  cursor:pointer; transition:border-color .25s ease, background .25s ease;
}
.btn-callback:hover{border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.03);}
.emergency-stats{
  display:flex; justify-content:center; gap:44px;
  margin-top:64px; padding-top:36px;
  border-top:1px solid var(--border);
  flex-wrap:wrap;
}
.emergency-stats .stat strong{display:block; font-size:15px; font-weight:700; margin-bottom:4px;}
.emergency-stats .stat span{font-size:12px; color:var(--text-faint);}
@media(max-width:520px){
  .emergency{padding:110px 16px 100px;}
  .btn-call, .btn-callback{width:100%; justify-content:center;}
  .emergency-stats{gap:28px;}
}

/* ---------- Loxone Partner ---------- */
.loxone{
  position:relative;
  padding:140px 32px;
  overflow:hidden;
  background:#070907;
  border-bottom:1px solid var(--border);
}
.loxone-bg{
  position:absolute; inset:-40px; z-index:0;
  background-image:
    linear-gradient(to right, rgba(116,195,101,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(116,195,101,0.045) 1px, transparent 1px);
  background-size:56px 56px;
}
.loxone-glow{
  position:absolute; inset:0; z-index:0;
  background:radial-gradient(ellipse 50% 55% at 15% 50%, rgba(116,195,101,0.12) 0%, transparent 70%);
}
.loxone-inner{
  position:relative; z-index:1; max-width:1120px; margin:0 auto;
  display:grid; grid-template-columns:280px 1fr; gap:64px; align-items:center;
}
.loxone-badge{display:flex; align-items:center; justify-content:center;}
.badge-ring{
  position:relative;
  width:220px; height:220px; border-radius:50%;
  border:1px solid rgba(116,195,101,0.35);
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 40%, rgba(116,195,101,0.08), transparent 70%);
}
.badge-ring::before{
  content:''; position:absolute; inset:14px; border-radius:50%;
  border:1px dashed rgba(116,195,101,0.3);
  animation:badge-spin 60s linear infinite;
}
@keyframes badge-spin{to{transform:rotate(360deg);}}
.badge-core{
  width:150px; height:150px; border-radius:50%;
  background:var(--card);
  border:1px solid rgba(116,195,101,0.4);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  text-align:center;
}
.badge-core svg{width:26px; height:26px; stroke:var(--lox-green);}
.badge-core .wordmark{font-size:14px; font-weight:800; letter-spacing:.04em; margin-top:4px;}
.badge-core .subtext{font-size:9px; letter-spacing:.08em; color:var(--lox-green); text-transform:uppercase; font-weight:600;}
.loxone-content .tag{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:600; letter-spacing:.04em; color:var(--lox-green);
  text-transform:uppercase; margin-bottom:18px;
}
.loxone-content .tag .sq{width:6px; height:6px; background:var(--lox-green); border-radius:1px;}
.loxone-content h2{font-size:clamp(1.7rem,3vw,2.4rem); font-weight:700; letter-spacing:-0.01em; max-width:520px;}
.loxone-content p.sub{margin-top:16px; color:var(--text-soft); font-size:15px; line-height:1.75; max-width:540px;}
.loxone-points{list-style:none; margin-top:28px; display:flex; flex-direction:column; gap:14px;}
.loxone-points li{display:flex; align-items:flex-start; gap:12px; font-size:14px; color:var(--text-soft); line-height:1.5;}
.loxone-points svg{width:16px; height:16px; stroke:var(--lox-green); flex-shrink:0; margin-top:2px;}
.btn-loxone{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:34px; padding:13px 24px; border-radius:12px;
  background:transparent; border:1px solid rgba(116,195,101,0.4); color:#fff;
  text-decoration:none; font-weight:600; font-size:14px;
  transition:border-color .25s ease, background .25s ease, transform .2s ease;
}
.btn-loxone:hover{border-color:var(--lox-green); background:rgba(116,195,101,0.08); transform:translateY(-2px);}
.btn-loxone svg{width:15px; height:15px; transition:transform .25s ease;}
.btn-loxone:hover svg{transform:translateX(3px);}
@media(max-width:760px){
  .loxone{padding:110px 16px;}
  .loxone-inner{grid-template-columns:1fr; text-align:center; gap:36px;}
  .loxone-content h2, .loxone-content p.sub{margin-left:auto; margin-right:auto;}
  .loxone-points{align-items:center;}
  .loxone-points li{text-align:left;}
}

/* ---------- Projects carousel ---------- */
.projects{max-width:1200px; margin:0 auto; padding:150px 32px 160px;}
.proj-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  margin-bottom:44px; flex-wrap:wrap;
}
.proj-head .res-head{margin-bottom:0;}
.carousel-nav{display:flex; gap:10px;}
.carousel-nav button{
  width:42px; height:42px; border-radius:12px;
  border:1px solid var(--border); background:var(--card);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:border-color .25s ease, background .25s ease, opacity .25s ease;
}
.carousel-nav button:hover:not(:disabled){border-color:var(--border-strong); background:var(--card-2);}
.carousel-nav button:disabled{opacity:.35; cursor:default;}
.carousel-nav svg{width:16px; height:16px; stroke:var(--text);}
.carousel{
  display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:6px 2px 10px; margin:-6px -2px 0;
  scrollbar-width:none; -ms-overflow-style:none;
  overscroll-behavior-x:contain;
}
.carousel::-webkit-scrollbar{display:none;}
.project-card{
  flex:0 0 320px; scroll-snap-align:start; cursor:pointer;
  border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--border); background:var(--card);
  text-align:left; padding:0; font:inherit; color:inherit;
  display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch;
  transition:border-color .3s ease, transform .3s ease;
}
.project-card:hover, .project-card:focus-visible{border-color:var(--accent); transform:translateY(-4px);}
.project-visual{height:210px; flex-shrink:0; position:relative; overflow:hidden;}
.project-visual img{width:100%; height:100%; object-fit:cover;}
.project-meta{padding:18px 20px 22px;}
.project-meta .kicker{font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--accent);}
.project-meta h3{font-size:16.5px; font-weight:600; margin-top:8px;}
.project-meta .loc{font-size:12.5px; color:var(--text-soft); margin-top:5px;}
.project-meta .tags{margin-top:12px; display:flex; gap:6px; flex-wrap:wrap;}
@media(max-width:600px){
  .projects{padding:110px 16px 120px;}
  .project-card{flex-basis:270px;}
}

/* ---------- Modals (project + contact) ---------- */
.modal{
  position:fixed; inset:0; z-index:300;
  background:rgba(5,5,5,0.92); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s;
}
.modal.open{opacity:1; visibility:visible; transition:opacity .35s ease, visibility 0s;}
.modal-inner{
  position:relative;
  max-width:880px; width:100%; max-height:88vh; overflow-y:auto;
  background:var(--card); border:1px solid var(--border-strong); border-radius:24px;
  transform:translateY(16px); transition:transform .35s ease;
  overscroll-behavior:contain;
}
.modal.open .modal-inner{transform:translateY(0);}
.modal-close{
  position:absolute; top:20px; right:20px; z-index:3;
  width:38px; height:38px; border-radius:10px;
  background:rgba(9,9,9,0.6); border:1px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:border-color .2s ease;
}
.modal-close:hover{border-color:rgba(255,255,255,.4);}
.modal-close svg{width:16px; height:16px; stroke:#fff;}

.modal-gallery{position:relative; height:340px; overflow:hidden; background:#0c0c0c;}
.modal-slide{position:absolute; inset:0; opacity:0; transition:opacity .4s ease;}
.modal-slide.active{opacity:1;}
.modal-slide img{width:100%; height:100%; object-fit:cover;}
.modal-slide .visual-placeholder svg{width:60px; height:60px; stroke:rgba(255,255,255,.3);}
.modal-slide .visual-placeholder::before{background-size:34px 34px;}
.modal-dots{position:absolute; bottom:18px; left:50%; transform:translateX(-50%); display:flex; gap:4px; z-index:2;}
.modal-dots button{width:16px; height:16px; border:none; background:none; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.modal-dots button::after{content:''; width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.3); transition:background .2s ease;}
.modal-dots button.active::after{background:var(--accent);}
.modal-arrows{position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; padding:0 16px; z-index:2; pointer-events:none;}
.modal-arrows button{
  pointer-events:auto; width:38px; height:38px; border-radius:50%;
  background:rgba(9,9,9,0.55); border:1px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.modal-arrows svg{width:16px; height:16px; stroke:#fff;}
.modal-content{padding:36px 40px 44px;}
.modal-content .kicker{font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--accent);}
.modal-content h2{font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:700; margin-top:10px; letter-spacing:-0.01em;}
.modal-content .loc{font-size:13.5px; color:var(--text-soft); margin-top:6px;}
.modal-content p.desc{margin-top:20px; color:var(--text-soft); font-size:15px; line-height:1.75; max-width:640px;}
.modal-content .tags{margin-top:22px; display:flex; gap:8px; flex-wrap:wrap;}
.modal-content .modal-actions{margin-top:30px;}
@media(max-width:600px){
  .modal{padding:12px;}
  .modal-gallery{height:220px;}
  .modal-content{padding:28px 22px 34px;}
}

/* Contact form modal */
.contact-modal .modal-inner{max-width:560px;}
.contact-modal .modal-content{padding:40px 40px 40px;}
.contact-modal .modal-content h2{margin-top:10px; padding-right:40px;}
.contact-modal .lead{margin-top:10px; color:var(--text-soft); font-size:14.5px; line-height:1.65;}
.contact-modal.is-callback .kicker{color:#ff8f85;}
.contact-form{margin-top:26px; display:flex; flex-direction:column; gap:16px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.field{display:flex; flex-direction:column; gap:7px;}
.field label{font-size:12.5px; font-weight:600; color:var(--text-soft); letter-spacing:.02em;}
.field label .optional{color:var(--text-faint); font-weight:400;}
.field input, .field textarea, .field select{
  width:100%; font:inherit; font-size:14.5px; color:var(--text);
  background:var(--card-2); border:1px solid var(--border-strong); border-radius:12px;
  padding:12px 14px; transition:border-color .2s ease, box-shadow .2s ease;
}
.field textarea{resize:vertical; min-height:96px;}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,210,48,.15);
}
.field.has-error input, .field.has-error textarea{border-color:var(--red);}
.field .error{font-size:12px; color:#ff8f85;}
.segment-picker{border:none; min-width:0;}
.segment-picker legend{font-size:12.5px; font-weight:600; color:var(--text-soft); margin-bottom:7px; letter-spacing:.02em;}
.segment-picker .options{display:flex; flex-wrap:wrap; gap:10px;}
.segment-picker label{
  flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center; gap:8px; text-align:center;
  padding:11px 8px; border:1px solid var(--border-strong); border-radius:12px;
  font-size:13.5px; color:var(--text-soft); cursor:pointer;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.segment-picker input{position:absolute; opacity:0; pointer-events:none;}
.segment-picker input:checked + span{color:var(--text);}
.segment-picker label:has(input:checked){border-color:var(--accent); background:rgba(255,210,48,.06); color:var(--text);}
.segment-picker label:has(input:focus-visible){outline:2px solid var(--accent); outline-offset:2px;}
.contact-form .btn-primary{margin-top:6px; padding:14px 22px; font-size:14.5px;}
.contact-form .fineprint{font-size:12px; color:var(--text-faint); line-height:1.6;}
.contact-form .fineprint a{color:var(--text-soft);}
.form-alert{
  margin-top:20px; padding:12px 14px; border-radius:12px;
  border:1px solid rgba(255,68,51,.35); background:rgba(255,68,51,.07);
  color:#ffb3b3; font-size:13.5px;
}
.form-success{text-align:center; padding:12px 0 4px;}
.form-success .check{
  width:56px; height:56px; border-radius:50%; margin:0 auto 20px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--accent-dim); background:rgba(255,210,48,.08);
}
.form-success .check svg{width:24px; height:24px; stroke:var(--accent);}
.form-success h2{padding-right:0 !important;}
.form-success p{margin-top:12px; color:var(--text-soft); font-size:14.5px; line-height:1.7;}
.form-success .btn-callback{margin-top:26px;}
@media(max-width:520px){
  .contact-modal .modal-content{padding:32px 22px 28px;}
  .form-row{grid-template-columns:1fr;}
}

/* ---------- Footer ---------- */
footer{background:#050505; border-top:1px solid var(--border); padding-top:76px;}
.footer-inner{max-width:1200px; margin:0 auto; padding:0 32px;}
.footer-grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1.3fr; gap:40px;
  padding-bottom:56px;
}
.footer-brand .flogo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:15px;}
.footer-brand .flogo .mark{width:20px; height:20px;}
.footer-brand p{color:var(--text-soft); font-size:13.5px; line-height:1.75; margin-top:16px; max-width:260px;}
.footer-social{display:flex; gap:10px; margin-top:24px;}
.footer-social a{
  width:36px; height:36px; border-radius:10px; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; transition:border-color .2s ease;
}
.footer-social a:hover{border-color:var(--accent);}
.footer-social svg{width:15px; height:15px; stroke:var(--text-soft);}
.footer-certs{display:flex; gap:10px; margin-top:26px; flex-wrap:wrap;}
.cert-badge{
  display:flex; align-items:center; gap:7px;
  padding:8px 13px; border:1px solid var(--border); border-radius:100px;
  font-size:11.5px; color:var(--text-soft);
}
.cert-badge svg{width:13px; height:13px; stroke:var(--accent);}
.footer-col h4{font-size:12.5px; font-weight:600; margin-bottom:18px; letter-spacing:.03em; text-transform:uppercase;}
.footer-col ul{list-style:none; display:flex; flex-direction:column; gap:11px;}
.footer-col a, .footer-col button.link{
  color:var(--text-soft); text-decoration:none; font-size:13.5px; transition:color .2s ease;
  background:none; border:none; padding:0; cursor:pointer; text-align:left; font-family:inherit;
}
.footer-col a:hover, .footer-col button.link:hover{color:var(--accent);}
.footer-contact li{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--text-soft); line-height:1.55;}
.footer-contact svg{width:15px; height:15px; stroke:var(--accent); flex-shrink:0; margin-top:2px;}
.footer-contact .emergency-line{color:#ff8f85; font-weight:600;}
.footer-contact a{color:inherit;}
.footer-bottom{
  border-top:1px solid var(--border);
  padding:22px 0 30px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
  font-size:12.5px; color:var(--text-faint);
}
.footer-bottom .legal-links{display:flex; gap:20px; flex-wrap:wrap;}
.footer-bottom .legal-links a{color:var(--text-faint); text-decoration:none; transition:color .2s ease;}
.footer-bottom .legal-links a:hover{color:var(--text-soft);}
.footer-bottom .locale-switch a.active{color:var(--text-soft);}
.footer-bottom .locale-switch a:hover{color:var(--text-soft);}
@media(max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr; row-gap:44px;}
  .footer-brand{grid-column:1/-1;}
}
@media(max-width:520px){
  footer{padding-top:60px;}
  .footer-inner{padding:0 16px;}
  .footer-grid{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column; align-items:flex-start;}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *, *::before, *::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; transition-delay:0s !important;}
  .js .reveal{opacity:1; transform:none;}
}