:root{
  --demo-max:1180px;
  --demo-radius:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.demo{
  margin:0;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--page);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body.demo a{color:inherit;text-decoration:none}
body.demo button,body.demo input,body.demo select,body.demo textarea{font:inherit}
body.demo img,body.demo svg{max-width:100%;display:block}
.demo-container{width:min(calc(100% - 40px),var(--demo-max));margin-inline:auto}
.demo-conceptbar{
  background:#07110f;color:#cfe0da;border-bottom:1px solid rgba(255,255,255,.09);
  font-size:12px;letter-spacing:.02em
}
.demo-conceptbar .demo-container{
  min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:20px
}
.demo-conceptbar strong{color:#63efbd;text-transform:uppercase;letter-spacing:.12em;font-size:10px}
.demo-conceptbar a{color:#fff}
.demo-header{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--page) 90%, transparent);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.demo-nav{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.demo-logo{display:flex;align-items:center;gap:11px;font-weight:900;letter-spacing:-.03em;font-size:20px}
.demo-logo-mark{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:var(--brand);color:var(--brand-ink);font-weight:950}
.demo-navlinks{display:flex;align-items:center;gap:24px;font-size:13px;font-weight:700}
.demo-navlinks a:not(.demo-navcta){opacity:.72}.demo-navlinks a:hover{opacity:1}
.demo-navcta{padding:11px 15px;border-radius:12px;background:var(--brand);color:var(--brand-ink)}
.demo-menu{display:none;background:none;border:0;padding:8px;color:var(--ink);font-size:24px}
.demo-section{padding:92px 0}
.demo-section.alt{background:var(--alt)}
.demo-kicker{display:inline-block;text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:900;color:var(--brand)}
.demo-title{font-size:clamp(36px,4.7vw,62px);line-height:1.02;letter-spacing:-.045em;margin:12px 0 18px}
.demo-subtitle{max-width:720px;font-size:18px;color:var(--muted);margin:0}
.demo-sectionhead{max-width:760px;margin-bottom:44px}
.demo-sectionhead.center{text-align:center;margin-inline:auto}
.demo-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.demo-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.demo-card{background:var(--card);border:1px solid var(--border);border-radius:var(--demo-radius);padding:26px;box-shadow:var(--shadow)}
.demo-card h3{margin:14px 0 10px;font-size:22px;line-height:1.15;letter-spacing:-.03em}
.demo-card p{margin:0;color:var(--muted);font-size:14px}
.demo-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);font-weight:950}
.demo-btn{min-height:48px;padding:0 18px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:var(--brand);color:var(--brand-ink);border:1px solid transparent;font-weight:900}
.demo-btn.ghost{background:transparent;border-color:var(--border);color:var(--ink)}
.demo-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.demo-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:18px;overflow:hidden}
.demo-stat{background:var(--card);padding:20px}
.demo-stat strong{display:block;font-size:25px;letter-spacing:-.04em}.demo-stat span{font-size:12px;color:var(--muted)}
.demo-quote{padding:28px;border-radius:22px;background:var(--card);border:1px solid var(--border)}
.demo-quote p{font-size:17px;margin:0 0 20px}.demo-quote small{color:var(--muted)}
.demo-faq{border-top:1px solid var(--border)}
.demo-faq details{border-bottom:1px solid var(--border);padding:20px 0}
.demo-faq summary{font-weight:850;cursor:pointer;list-style:none;position:relative;padding-right:30px}
.demo-faq summary::-webkit-details-marker{display:none}
.demo-faq summary:after{content:"+";position:absolute;right:0;color:var(--brand);font-size:22px}
.demo-faq details[open] summary:after{content:"–"}
.demo-faq p{color:var(--muted);font-size:14px;margin-bottom:0}
.demo-form{background:var(--card);border:1px solid var(--border);padding:28px;border-radius:24px;box-shadow:var(--shadow)}
.demo-formgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.demo-form label{display:grid;gap:7px;font-size:12px;font-weight:800;margin-bottom:14px}
.demo-form input,.demo-form select,.demo-form textarea{
  width:100%;border:1px solid var(--border);background:var(--field);color:var(--ink);
  border-radius:11px;padding:12px 13px;outline:none
}
.demo-form input:focus,.demo-form select:focus,.demo-form textarea:focus{border-color:var(--brand)}
.demo-footer{padding:54px 0 24px;border-top:1px solid var(--border);background:var(--footer);color:var(--footer-ink)}
.demo-footergrid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px}
.demo-footer p,.demo-footer a{font-size:13px;color:var(--footer-muted)}
.demo-footerlinks{display:grid;gap:8px;align-content:start}
.demo-footerbottom{margin-top:36px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;font-size:11px;color:var(--footer-muted)}
.demo-note{font-size:11px;color:var(--muted)}
.demo-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;background:var(--brand-soft);color:var(--brand);font-size:11px;font-weight:900}
.demo-divider{height:1px;background:var(--border)}
.demo-stepgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.demo-step{padding:22px;border:1px solid var(--border);border-radius:18px;background:var(--card)}
.demo-step span{color:var(--brand);font-weight:950;font-size:12px}
.demo-step h3{font-size:18px;margin:26px 0 8px}.demo-step p{font-size:13px;color:var(--muted);margin:0}

/* ---------- Cleaning theme ---------- */
.cleaning{
  --page:#f7fbfd;--alt:#eef7fa;--card:#ffffff;--field:#fbfdfe;--ink:#10212b;--muted:#60717c;
  --border:#dbe7ec;--brand:#0d7f9b;--brand-ink:#fff;--brand-soft:#e1f4f8;--shadow:0 22px 60px rgba(24,65,80,.08);
  --footer:#0e2630;--footer-ink:#fff;--footer-muted:#a8c0ca;
}
.clean-hero{padding:72px 0 48px}
.clean-hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center}
.clean-hero h1{font-size:clamp(48px,6vw,76px);line-height:.98;letter-spacing:-.055em;margin:14px 0 22px}
.clean-hero p{font-size:19px;color:var(--muted);max-width:650px}
.clean-scene{min-height:480px;border-radius:30px;background:linear-gradient(145deg,#d8f1f5,#e8f4ef);position:relative;overflow:hidden;border:1px solid #cce2e8;box-shadow:var(--shadow)}
.clean-office{position:absolute;inset:0}
.clean-window{position:absolute;right:7%;top:8%;width:48%;height:48%;background:linear-gradient(#bfe8f3,#edf8fb);border:12px solid #fff;border-radius:8px;box-shadow:0 18px 40px rgba(41,92,108,.1)}
.clean-window:before,.clean-window:after{content:"";position:absolute;background:#fff}.clean-window:before{width:8px;top:0;bottom:0;left:48%}.clean-window:after{height:8px;left:0;right:0;top:50%}
.clean-desk{position:absolute;left:10%;bottom:16%;width:58%;height:16px;background:#785f4d;border-radius:5px}
.clean-desk:before,.clean-desk:after{content:"";position:absolute;top:14px;width:10px;height:88px;background:#685445}.clean-desk:before{left:12%}.clean-desk:after{right:12%}
.clean-chair{position:absolute;left:20%;bottom:9%;width:70px;height:98px;background:#2c5361;border-radius:30px 30px 14px 14px;transform:rotate(-5deg)}
.clean-spark{position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 0 8px rgba(255,255,255,.35),0 0 24px #fff}
.clean-s1{right:16%;top:22%}.clean-s2{left:54%;bottom:28%;transform:scale(.7)}.clean-s3{left:15%;top:28%;transform:scale(.6)}
.clean-trustbar{margin-top:42px}
.clean-industries{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.clean-panel{min-height:390px;border-radius:26px;background:linear-gradient(145deg,#0e5264,#093846);color:#fff;padding:36px;position:relative;overflow:hidden}
.clean-panel:after{content:"";position:absolute;width:230px;height:230px;border-radius:50%;background:rgba(255,255,255,.07);right:-60px;bottom:-80px}
.clean-panel ul{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px}.clean-panel li:before{content:"✓";color:#8de2f0;margin-right:10px;font-weight:900}
.clean-case{display:grid;grid-template-columns:1fr 1fr;gap:26px}.clean-result{background:#0e5264;color:#fff;border-radius:26px;padding:32px}.clean-result strong{font-size:46px;letter-spacing:-.05em}.clean-result p{color:#cbe2e8}

/* ---------- Electric theme ---------- */
.electric{
  --page:#111317;--alt:#181b20;--card:#1a1e23;--field:#111419;--ink:#f6f7f8;--muted:#abb0b7;
  --border:#2c3036;--brand:#ffd447;--brand-ink:#171717;--brand-soft:#302c19;--shadow:0 24px 60px rgba(0,0,0,.28);
  --footer:#08090b;--footer-ink:#fff;--footer-muted:#8f959c;
}
.electric .demo-header{background:rgba(17,19,23,.9)}
.electric-topline{background:#ffd447;color:#171717;font-size:12px;font-weight:850}.electric-topline .demo-container{min-height:38px;display:flex;justify-content:space-between;align-items:center}
.electric-hero{padding:72px 0 62px;background:radial-gradient(circle at 76% 32%,rgba(255,212,71,.13),transparent 27%)}
.electric-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.electric-hero h1{font-size:clamp(47px,5.8vw,74px);line-height:.98;letter-spacing:-.055em;margin:14px 0 20px}
.electric-hero p{font-size:18px;color:var(--muted)}
.circuit-scene{min-height:470px;border:1px solid #363a40;border-radius:26px;background:#15191e;position:relative;overflow:hidden}
.circuit-scene:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:34px 34px}
.circuit-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:145px;height:145px;border-radius:28px;border:2px solid #ffd447;box-shadow:0 0 80px rgba(255,212,71,.13)}
.circuit-core:before{content:"⚡";position:absolute;inset:0;display:grid;place-items:center;font-size:62px;color:#ffd447}
.circuit-line{position:absolute;height:3px;background:#ffd447;box-shadow:0 0 10px rgba(255,212,71,.45)}
.cl1{width:150px;left:8%;top:34%}.cl2{width:170px;right:6%;top:64%}.cl3{width:120px;right:13%;top:28%;transform:rotate(-28deg)}.cl4{width:120px;left:12%;top:70%;transform:rotate(31deg)}
.circuit-node{position:absolute;width:15px;height:15px;border:3px solid #ffd447;border-radius:50%;background:#111317}.cn1{left:7%;top:32.5%}.cn2{right:5%;top:62.5%}.cn3{right:11%;top:23%}.cn4{left:10%;top:73%}
.electric-service .demo-icon{background:#302c19}
.electric-projects{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:16px}
.e-project{min-height:250px;border-radius:22px;border:1px solid #343940;background:linear-gradient(145deg,#222832,#15181d);padding:24px;position:relative;overflow:hidden}
.e-project.big{min-height:520px}.e-project .project-tag{position:absolute;left:20px;bottom:20px;background:#ffd447;color:#161616;padding:7px 10px;border-radius:8px;font-size:11px;font-weight:900}
.e-project.big:before{content:"";position:absolute;width:210px;height:310px;right:7%;top:14%;border:9px solid #545a61;border-radius:8px;box-shadow:inset 0 0 0 24px #20242a}
.e-project.small1:before{content:"";position:absolute;left:18%;right:18%;top:22%;height:90px;border:8px solid #5a6066;border-radius:10px;background:#20252a}
.e-project.small2:before{content:"";position:absolute;width:150px;height:150px;border-radius:50%;border:8px solid #565d64;left:50%;top:42%;transform:translate(-50%,-50%)}
.electric-band{background:#ffd447;color:#171717;padding:26px 0}.electric-band .demo-container{display:flex;align-items:center;justify-content:space-between;gap:24px}.electric-band strong{font-size:24px;letter-spacing:-.03em}

/* ---------- Roofing theme ---------- */
.roofing{
  --page:#f4efe8;--alt:#ebe3da;--card:#fffaf4;--field:#fffdf9;--ink:#2a211d;--muted:#756961;
  --border:#dbd0c4;--brand:#a5422d;--brand-ink:#fff;--brand-soft:#f2ddd6;--shadow:0 22px 55px rgba(64,45,35,.1);
  --footer:#2b211d;--footer-ink:#fff;--footer-muted:#baa99f;
}
.roofing .demo-logo{font-family:Georgia,"Times New Roman",serif}
.roof-hero{padding:70px 0 52px}
.roof-hero-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:46px;align-items:center}
.roof-hero h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(49px,6vw,78px);line-height:1;letter-spacing:-.04em;margin:14px 0 20px;font-weight:700}
.roof-hero p{font-size:18px;color:var(--muted)}
.roof-scene{height:510px;border-radius:30px;overflow:hidden;position:relative;background:linear-gradient(#d9e5e8 0 52%,#b7a58f 52%);box-shadow:var(--shadow);border:1px solid #d3c4b8}
.roof-house{position:absolute;left:14%;right:14%;bottom:7%;height:46%;background:#f4eee7;border:1px solid #c7b4a4}
.roof-house:before{content:"";position:absolute;left:-10%;right:-10%;top:-48%;height:55%;background:#6d3026;clip-path:polygon(50% 0,100% 100%,0 100%)}
.roof-house:after{content:"";position:absolute;left:18%;bottom:0;width:22%;height:45%;background:#795b4d;box-shadow:190px -20px 0 -10px #9db4b5}
.roof-cloud{position:absolute;width:90px;height:30px;border-radius:30px;background:rgba(255,255,255,.65)}.rc1{top:13%;left:10%}.rc2{top:22%;right:13%;transform:scale(.75)}
.roof-cloud:before,.roof-cloud:after{content:"";position:absolute;border-radius:50%;background:inherit}.roof-cloud:before{width:38px;height:38px;left:13px;top:-16px}.roof-cloud:after{width:50px;height:50px;right:10px;top:-24px}
.roof-services .demo-card{background:#fffaf4}
.roof-project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.roof-project{height:330px;border-radius:24px;overflow:hidden;position:relative;border:1px solid #d7c8ba}
.roof-project:after{position:absolute;left:18px;bottom:18px;background:rgba(42,33,29,.88);color:#fff;padding:9px 12px;border-radius:10px;font-size:12px;font-weight:800}
.rp1{background:linear-gradient(#cfdde1 0 45%,#cdbba8 45%)}.rp1:before{content:"";position:absolute;left:12%;right:12%;bottom:10%;height:40%;background:#f7efe5;clip-path:polygon(10% 0,90% 0,100% 100%,0 100%);border-top:85px solid #75372b}.rp1:after{content:"Steildachsanierung · Hamburg"}
.rp2{background:linear-gradient(#cad6d7 0 50%,#988875 50%)}.rp2:before{content:"";position:absolute;left:9%;right:9%;bottom:14%;height:30%;background:#343638;border-top:18px solid #242627;box-shadow:0 -13px 0 #6d332a}.rp2:after{content:"Flachdach & Attika · Gewerbe"}
.rp3{background:linear-gradient(#d7e2e5 0 48%,#bda78d 48%)}.rp3:before{content:"";position:absolute;left:20%;right:20%;bottom:8%;height:42%;background:#efe4d8;border-top:90px solid #493e3a;clip-path:polygon(50% 0,100% 55%,100% 100%,0 100%,0 55%)}.rp3:after{content:"Dachfenster & Ausbau · Bestand"}
.roof-quality{display:grid;grid-template-columns:1fr 1fr;gap:28px}.roof-badge{background:#2b211d;color:#fff;border-radius:26px;padding:36px}.roof-badge strong{display:block;font-family:Georgia,serif;font-size:52px;color:#e7b19f}.roof-badge p{color:#d4c6bd}

/* ---------- Hotel theme ---------- */
.hotel{
  --page:#f8f4ec;--alt:#efe8dc;--card:#fffdfa;--field:#fffdfa;--ink:#1d2630;--muted:#6b716f;
  --border:#dcd4c8;--brand:#223f54;--brand-ink:#fff;--brand-soft:#dfe8ec;--shadow:0 25px 60px rgba(50,58,63,.11);
  --footer:#1d2d38;--footer-ink:#fff;--footer-muted:#b8c3c8;
}
.hotel .demo-logo{font-family:Georgia,"Times New Roman",serif;font-weight:700}
.hotel-hero{
  min-height:610px;
  position:relative;
  display:grid;
  align-items:center;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(23,43,56,.98) 0 43%,rgba(23,43,56,.30) 60%,rgba(23,43,56,.08) 100%),
    linear-gradient(135deg,#8fa7b2 0 36%,#d4c0a5 36% 67%,#7a6d63 67%);
}
.hotel-hero:before{
  content:"";
  position:absolute;
  right:7%;
  top:11%;
  width:46%;
  height:72%;
  border-radius:28px;
  background:
    linear-gradient(90deg,#d9c6ad 0 17%,#f5eee3 17% 73%,#b7cdd5 73%);
  box-shadow:
    inset 0 -125px 0 #a98f75,
    0 30px 80px rgba(20,31,36,.20);
  border:1px solid rgba(255,255,255,.32);
}
.hotel-hero:after{
  content:"";
  position:absolute;
  right:18%;
  bottom:16%;
  width:25%;
  height:24%;
  background:#fbf6ef;
  border-radius:22px 22px 4px 4px;
  box-shadow:
    0 -34px 0 -19px rgba(255,255,255,.95),
    205px 8px 0 -84px #644f43;
}
.hotel-hero-content{
  position:relative;
  z-index:3;
  padding-block:76px;
}
.hotel-hero-panel{
  width:min(590px,58%);
  padding:38px 40px 40px;
  border-radius:26px;
  background:rgba(19,38,50,.76);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 28px 70px rgba(8,19,24,.24);
  backdrop-filter:blur(12px);
  color:#fff;
}
.hotel-hero-panel .demo-kicker{
  color:#d8e7ed;
}
.hotel-hero h1{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(45px,5vw,70px);
  font-weight:500;
  line-height:.94;
  letter-spacing:-.04em;
  margin:14px 0 20px;
}
.hotel-hero h1 em{
  color:#f1d6ad;
  font-style:italic;
  font-weight:500;
}
.hotel-hero p{
  font-size:17px;
  line-height:1.65;
  color:#edf4f6;
  max-width:520px;
}
.hotel-primary-btn{
  background:#fff !important;
  color:#223f54 !important;
}
.hotel-secondary-btn{
  color:#fff !important;
  border-color:rgba(255,255,255,.42) !important;
  background:rgba(255,255,255,.05) !important;
}
.hotel-bookingbar{position:relative;z-index:5;margin-top:-34px}
.booking-shell{background:#fffdfa;border:1px solid #ded6ca;border-radius:18px;box-shadow:var(--shadow);padding:13px;display:grid;grid-template-columns:1.1fr 1.1fr .9fr auto;gap:10px}
.booking-field{padding:9px 14px;border-right:1px solid #e1d8cc}.booking-field:last-of-type{border-right:0}.booking-field span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#8b8179;font-weight:800}.booking-field strong{display:block;margin-top:3px;font-size:14px}
.hotel-intro{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}
.hotel-script{font-family:Georgia,serif;font-size:34px;color:#223f54;line-height:1.3}
.room-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.room-card{background:var(--card);border:1px solid var(--border);border-radius:24px;overflow:hidden;box-shadow:var(--shadow)}
.room-image{height:240px;position:relative;overflow:hidden}
.room-image:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#d9c7ae 0 20%,#f6f0e8 20% 72%,#bad0d8 72%);box-shadow:inset 0 -70px 0 #a58b74}
.room-image:after{content:"";position:absolute;left:18%;bottom:18%;width:58%;height:34%;background:#fbf6ef;border-radius:14px 14px 0 0;box-shadow:0 -25px 0 -16px white}
.room2:before{background:linear-gradient(90deg,#c1d1d4 0 25%,#f2ede3 25% 74%,#d9c3aa 74%);box-shadow:inset 0 -70px 0 #7a675a}
.room3:before{background:linear-gradient(90deg,#dacbb9 0 30%,#f7f1e8 30% 76%,#a9c3cb 76%);box-shadow:inset 0 -70px 0 #b19477}
.room-copy{padding:24px}.room-copy h3{font-family:Georgia,serif;font-size:25px;margin:0 0 8px}.room-copy p{color:var(--muted);font-size:13px}.room-meta{display:flex;justify-content:space-between;align-items:end;margin-top:18px}.room-price strong{font-size:25px}.room-price span{font-size:11px;color:var(--muted)}
.hotel-amenities{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.amenity{border-top:1px solid var(--border);padding:20px 6px}.amenity strong{display:block;font-size:14px}.amenity span{font-size:12px;color:var(--muted)}
.hotel-breakfast{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}.breakfast-scene{height:430px;border-radius:28px;background:linear-gradient(140deg,#dcc5a5,#f7ead7 45%,#79949d);position:relative;overflow:hidden}
.breakfast-scene:before{content:"";position:absolute;width:62%;height:20%;border-radius:50%;background:#f7f2e8;left:18%;bottom:18%;box-shadow:0 18px 0 -10px #775f4b}
.breakfast-scene:after{content:"☕  🥐  🍓";position:absolute;left:50%;bottom:28%;transform:translateX(-50%);font-size:38px;letter-spacing:14px}
.hotel-gallery{display:grid;grid-template-columns:1.4fr .8fr .8fr;grid-template-rows:240px 240px;gap:12px}
.gallery-tile{border-radius:20px;overflow:hidden;position:relative;border:1px solid #d7cfc4}
.gallery-tile:nth-child(1){grid-row:1/3;background:linear-gradient(145deg,#c1d1d6,#e7d8c3 50%,#73685f)}
.gallery-tile:nth-child(2){background:linear-gradient(145deg,#dde6e8,#c2aa8e)}
.gallery-tile:nth-child(3){background:linear-gradient(145deg,#b8cbd1,#ede2d4)}
.gallery-tile:nth-child(4){background:linear-gradient(145deg,#d5c1a7,#7c756d)}
.gallery-tile:nth-child(5){background:linear-gradient(145deg,#c8d8dc,#ead7bc)}
.gallery-tile:after{content:"";position:absolute;left:15%;right:15%;bottom:12%;height:30%;background:rgba(255,255,255,.66);border-radius:14px 14px 0 0}
.hotel-location{display:grid;grid-template-columns:1fr 1fr;gap:26px}.map-art{min-height:370px;border-radius:25px;background:#dfe6df;position:relative;overflow:hidden}
.map-art:before{content:"";position:absolute;inset:-20%;background:repeating-linear-gradient(35deg,transparent 0 58px,#f8faf7 60px 72px),repeating-linear-gradient(125deg,transparent 0 80px,#c5d4dc 82px 90px);opacity:.85}
.map-pin{position:absolute;left:52%;top:45%;width:54px;height:54px;background:#223f54;border-radius:50% 50% 50% 0;transform:translate(-50%,-50%) rotate(-45deg);box-shadow:0 15px 35px rgba(34,63,84,.25)}
.map-pin:after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;left:18px;top:18px}
.hotel-bookcta{background:#223f54;color:#fff;border-radius:30px;padding:42px}.hotel-bookcta p{color:#c8d5dc}

/* Responsive */
@media(max-width:980px){
  .demo-grid-4{grid-template-columns:1fr 1fr}
  .demo-grid-3{grid-template-columns:1fr 1fr}
  .demo-stepgrid{grid-template-columns:1fr 1fr}
  .clean-hero-grid,.clean-industries,.clean-case,.electric-hero-grid,.roof-hero-grid,.roof-quality,.hotel-intro,.hotel-breakfast,.hotel-location{grid-template-columns:1fr}
  .electric-projects{grid-template-columns:1fr 1fr}.e-project.big{grid-column:1/3;min-height:360px}
  .roof-project-grid,.room-grid{grid-template-columns:1fr 1fr}
  .hotel-amenities{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .demo-section{padding:72px 0}
  .demo-navlinks{position:absolute;left:20px;right:20px;top:70px;display:none;flex-direction:column;align-items:stretch;background:var(--card);border:1px solid var(--border);padding:16px;border-radius:16px;box-shadow:var(--shadow)}
  .demo-navlinks.open{display:flex}.demo-menu{display:block}.demo-navcta{text-align:center}
  .demo-grid-3,.demo-grid-4,.demo-stepgrid,.roof-project-grid,.room-grid{grid-template-columns:1fr}
  .demo-stats{grid-template-columns:1fr}
  .demo-formgrid{grid-template-columns:1fr}
  .demo-footergrid{grid-template-columns:1fr}.demo-footerbottom{flex-direction:column;gap:8px}
  .clean-scene,.circuit-scene,.roof-scene{min-height:380px;height:auto}
  .electric-projects{grid-template-columns:1fr}.e-project.big{grid-column:auto}
  .electric-band .demo-container{align-items:flex-start;flex-direction:column}
  .booking-shell{grid-template-columns:1fr 1fr}.booking-shell .demo-btn{grid-column:1/3}
  .hotel-gallery{grid-template-columns:1fr 1fr;grid-template-rows:230px 190px 190px}.gallery-tile:nth-child(1){grid-row:auto;grid-column:1/3}
  .hotel-hero{min-height:590px}
  .hotel-hero:before{right:4%;width:52%;opacity:.78}
  .hotel-hero:after{right:15%;width:28%;opacity:.9}
  .hotel-hero-panel{width:min(620px,68%)}
}
@media(max-width:480px){
  .demo-container{width:min(calc(100% - 28px),var(--demo-max))}
  .booking-shell{grid-template-columns:1fr}.booking-shell .demo-btn{grid-column:auto}.booking-field{border-right:0;border-bottom:1px solid #e1d8cc}
}

@media(max-width:760px){
  .hotel-hero{
    min-height:auto;
    background:linear-gradient(180deg,#223f54 0 64%,#b9a48e 64%);
  }
  .hotel-hero:before{
    position:relative;
    display:block;
    right:auto;
    top:auto;
    width:auto;
    height:280px;
    margin:0 14px 20px;
    border-radius:22px;
    opacity:1;
  }
  .hotel-hero:after{display:none}
  .hotel-hero-content{padding-block:52px 26px}
  .hotel-hero-panel{
    width:100%;
    padding:30px 26px;
    background:transparent;
    border:0;
    box-shadow:none;
    backdrop-filter:none;
  }
  .hotel-hero h1{font-size:clamp(43px,13vw,60px)}
}