/* =========================================================================
   Profiseadmed — digital showroom
   Brand: logo blue (#1479f0) on cool white · Manrope · airflow motif
   ========================================================================= */
:root{
  --bg:#f3f6fa; --surface:#fff; --tile:#e9eef5; --tile-2:#dfe7f1;
  --line:#dbe3ee; --line-soft:#e8edf4;
  --blue:#1479f0; --blue-br:#4cc4ff; --blue-deep:#0a4fb8; --blue-soft:rgba(20,121,240,.10);
  --ink:#0a1322; --ink-mut:#536076; --ink-faint:#8a96a9;
  --navy:#07101f; --navy-2:#0c1a30;
  --sans:"Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --shadow:0 1px 2px rgba(10,19,34,.04), 0 12px 32px -12px rgba(10,19,34,.14);
  --shadow-lg:0 2px 4px rgba(10,19,34,.04), 0 34px 70px -28px rgba(10,40,90,.32);
  --r:22px; --r-lg:32px;
  --maxw:1280px; --pad:clamp(18px,4vw,48px); --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:inherit; text-decoration:none}
img,svg{display:block; max-width:100%}
h1,h2,h3,h4,p,ul,ol,dl,dd{margin:0}
ul,ol{padding:0; list-style:none}
h1,h2,h3{font-weight:800; letter-spacing:-.035em; line-height:1.02; text-wrap:balance}
button{font:inherit; color:inherit; cursor:pointer}
::selection{background:var(--blue); color:#fff}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:6px}

.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)}
.section{padding:clamp(72px,10vw,140px) 0; position:relative}
.num{font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--ink-faint)}
.eyebrow{display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--blue-deep)}
.eyebrow i{width:8px; height:8px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 4px var(--blue-soft)}

.head{max-width:720px; margin-bottom:clamp(34px,5vw,60px)}
.head h2{font-size:clamp(34px,5.2vw,64px); margin:16px 0 18px}
.head p:not(.eyebrow){font-size:clamp(16px,1.4vw,19px); color:var(--ink-mut); max-width:56ch}
.head-row{max-width:none; display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap}
.head-row h2{margin-bottom:0}
.head-row > p{max-width:34ch}

/* scroll progress + reveal */
.scroll-progress{position:fixed; inset:0 0 auto 0; height:2px; z-index:9995}
.scroll-progress span{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--blue),var(--blue-br))}
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.in{opacity:1; transform:none}

/* BUTTONS */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; height:54px; padding:0 26px;
  border-radius:999px; font-weight:700; font-size:15px; letter-spacing:-.01em; border:1px solid transparent;
  transition:transform .3s var(--ease), box-shadow .3s, background .3s, border-color .3s, color .3s; white-space:nowrap}
.btn svg{flex:none; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .3s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover svg{transform:translateX(3px)}
.btn-sm{height:42px; padding:0 18px; font-size:14px}
.btn-primary{background:var(--ink); color:#fff; box-shadow:0 14px 30px -14px rgba(10,19,34,.6)}
.btn-primary:hover{background:var(--blue); box-shadow:0 18px 36px -14px rgba(20,121,240,.7)}
.btn-ghost{background:rgba(255,255,255,.7); border-color:var(--line); backdrop-filter:blur(8px)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-light{background:#fff; color:var(--navy)}
.btn-outline{border-color:rgba(255,255,255,.3); color:#fff}
.btn-outline:hover{border-color:#fff}

/* NAV */
.nav{position:fixed; inset:0 0 auto 0; z-index:9000; display:flex; align-items:center; gap:24px;
  padding:18px var(--pad); transition:background .4s, box-shadow .4s, padding .4s}
.nav.scrolled{background:rgba(243,246,250,.78); backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 1px 0 var(--line); padding-top:11px; padding-bottom:11px}
.brand-logo{height:34px; width:auto}
.nav-links{margin:0 auto; display:flex; gap:4px; padding:5px; border-radius:999px;
  background:rgba(255,255,255,.66); border:1px solid var(--line-soft); backdrop-filter:blur(10px)}
.nav-links a{font-size:14px; font-weight:600; color:var(--ink-mut); padding:8px 16px; border-radius:999px; transition:color .25s, background .25s}
.nav-links a:hover{color:var(--ink); background:#fff}
.nav-actions{display:flex; align-items:center; gap:10px}
.pick{display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 8px 0 14px; border-radius:999px;
  font-size:14px; font-weight:600; border:1px solid var(--line); background:rgba(255,255,255,.66); transition:border-color .25s}
.pick:hover{border-color:var(--ink)}
.pick svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round}
.pick b{display:grid; place-items:center; min-width:26px; height:26px; border-radius:999px; background:var(--blue); color:#fff; font-size:12px}
.nav-toggle{display:none; width:42px; height:42px; border:1px solid var(--line); background:#fff; border-radius:50%;
  padding:13px 11px; flex-direction:column; justify-content:space-between}
.nav-toggle span{display:block; height:2px; background:var(--ink); border-radius:2px; transition:transform .3s var(--ease), opacity .3s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* HERO */
.hero{position:relative; min-height:100svh; display:flex; flex-direction:column; overflow:hidden;
  background:
    radial-gradient(70vw 60vh at 85% 10%, rgba(76,196,255,.22), transparent 60%),
    radial-gradient(60vw 50vh at 0% 100%, rgba(20,121,240,.10), transparent 60%),
    linear-gradient(180deg,#fff,var(--bg))}
.hero-canvas{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.hero-grid{position:relative; flex:1; display:grid; grid-template-columns:1.05fr .95fr; align-items:center;
  gap:clamp(24px,4vw,64px); padding-top:120px; padding-bottom:40px}
.hero h1{font-size:clamp(46px,7.6vw,112px); margin:22px 0 26px; letter-spacing:-.05em; line-height:.94}
.hero h1 em{font-style:normal; display:block;
  background:linear-gradient(100deg,var(--blue-deep),var(--blue) 45%,var(--blue-br)); -webkit-background-clip:text; background-clip:text; color:transparent}
.lede{font-size:clamp(17px,1.5vw,20px); color:var(--ink-mut); max-width:48ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}
.hero-stats{display:flex; gap:clamp(22px,4vw,54px); margin-top:clamp(36px,5vw,64px); padding-top:26px; border-top:1px solid var(--line)}
.hero-stats dt{font-size:clamp(26px,3vw,40px); font-weight:800; letter-spacing:-.04em; line-height:1}
.hero-stats dd{font-size:13px; color:var(--ink-mut); margin-top:8px}

.hero-stage{position:relative; justify-self:center; width:min(100%,600px)}
.plinth{position:relative; aspect-ratio:1/1.08; border-radius:var(--r-lg); overflow:hidden; isolation:isolate;
  background:radial-gradient(90% 70% at 50% 34%, #fff 0%, #eef3f9 55%, #dde6f1 100%);
  box-shadow:var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.8)}
.plinth-ring{position:absolute; left:50%; top:46%; width:78%; aspect-ratio:1; border-radius:50%; translate:-50% -50%;
  border:1px solid rgba(20,121,240,.18); box-shadow:0 0 0 46px rgba(20,121,240,.035), 0 0 0 92px rgba(20,121,240,.02);
  animation:breathe 7s ease-in-out infinite}
@keyframes breathe{50%{scale:1.05}}
.plinth-img{position:absolute; inset:2% 4% 6%; width:92%; height:92%; object-fit:contain; mix-blend-mode:multiply;
  transition:transform .5s var(--ease); will-change:transform}
.plinth-floor{position:absolute; left:18%; right:18%; bottom:5%; height:5%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(10,30,70,.22), transparent); filter:blur(6px); z-index:-1}
.tag{position:absolute; padding:13px 17px; border-radius:16px; background:rgba(255,255,255,.82); backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid rgba(255,255,255,.9); box-shadow:var(--shadow); display:grid; gap:1px; animation:float 7s ease-in-out infinite}
.tag small{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--blue-deep)}
.tag strong{font-size:17px; font-weight:800; letter-spacing:-.02em; line-height:1.2}
.tag span{font-size:12.5px; color:var(--ink-mut)}
.tag-a{left:-7%; bottom:11%}
.tag-b{right:-5%; top:14%; animation-delay:-2.4s}
.tag-c{left:-4%; top:26%; animation-delay:-4.6s}
.tag-b strong,.tag-c strong{font-size:22px; color:var(--blue-deep)}
@keyframes float{50%{transform:translateY(-9px)}}

.brands{position:relative; border-top:1px solid var(--line); overflow:hidden; padding:20px 0;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.brands-track{display:flex; width:max-content; animation:marquee 34s linear infinite}
.brands-track span{padding:0 clamp(24px,4vw,56px); font-size:clamp(15px,1.5vw,19px); font-weight:800; letter-spacing:-.02em;
  color:var(--ink-faint); white-space:nowrap}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ROOMS */
.rooms{display:grid; grid-template-columns:repeat(12,1fr); gap:18px}
.room{position:relative; grid-column:span 4; min-height:380px; border-radius:var(--r); overflow:hidden; display:flex;
  flex-direction:column; justify-content:flex-end; isolation:isolate; background:var(--tile);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease)}
.room:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg)}
.room-xl{grid-column:span 7; min-height:520px}
.room-lg{grid-column:span 5; min-height:520px}
.room-body{position:relative; padding:28px; display:grid; gap:8px}
.room h3{font-size:clamp(24px,2.4vw,34px)}
.room p{color:var(--ink-mut); font-size:15px; max-width:38ch}
.room-photo > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.2s var(--ease)}
.room-photo:hover > img{transform:scale(1.05)}
.room-photo::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(7,16,31,0) 30%, rgba(7,16,31,.55) 62%, rgba(7,16,31,.9))}
.room-photo, .room-photo p{color:#fff}
.room-photo p{opacity:.82}
.room-photo .num{color:rgba(255,255,255,.7)}
.room-art{position:relative; flex:1; min-height:0}
.room-art img{position:absolute; inset:26px 26px 0; width:calc(100% - 52px); height:calc(100% - 26px); object-fit:contain;
  mix-blend-mode:multiply; transition:transform .8s var(--ease)}
.room-tile:hover .room-art img{transform:scale(1.06)}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.chips li{font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:999px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.24); backdrop-filter:blur(8px)}
.go{position:absolute; top:20px; right:20px; width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:#fff; color:var(--ink); box-shadow:var(--shadow); transition:background .3s, color .3s, transform .4s var(--ease)}
.go svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.room:hover .go{background:var(--blue); color:#fff; transform:rotate(45deg)}

/* EXHIBIT */
.exhibit{background:var(--surface); border-block:1px solid var(--line-soft)}
.exhibit-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,6vw,96px); align-items:center}
.exhibit-stage{position:sticky; top:96px; aspect-ratio:1/1.1; border-radius:var(--r-lg); overflow:hidden; isolation:isolate;
  background:radial-gradient(80% 60% at 50% 40%, #fff, var(--tile) 70%, var(--tile-2)); display:grid; place-items:center}
.exhibit-stage img{width:88%; height:88%; object-fit:contain; mix-blend-mode:multiply; transition:opacity .35s}
.exhibit-stage img.swap{opacity:0}
.exhibit-label{position:absolute; top:22px; left:24px; font-family:var(--mono); font-size:11.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-mut)}
.swatches{position:absolute; bottom:22px; left:50%; translate:-50%; display:flex; align-items:center; gap:10px; padding:8px;
  border-radius:999px; background:rgba(255,255,255,.85); backdrop-filter:blur(10px); box-shadow:var(--shadow)}
.swatches button{width:30px; height:30px; border-radius:50%; border:1px solid var(--line); background:var(--c); padding:0;
  transition:box-shadow .25s}
.swatches button.is-on{box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--blue)}
.swatches .swatch-text{width:auto; padding:0 14px; background:transparent; border:0; font-size:13px; font-weight:700}
.swatches .swatch-text.is-on{box-shadow:none; color:var(--blue)}
.exhibit-copy h2{font-size:clamp(34px,4.3vw,58px); margin:16px 0 20px}
.exhibit-copy > p:not(.eyebrow){font-size:18px; color:var(--ink-mut); max-width:50ch}
.figures{display:grid; grid-template-columns:1fr 1fr; gap:0 28px; margin:38px 0 30px}
.figure{padding:22px 0; border-top:1px solid var(--line); display:grid; gap:4px}
.figure b{font-size:clamp(44px,5.4vw,76px); font-weight:800; letter-spacing:-.05em; line-height:1; display:flex; align-items:baseline; gap:6px}
.figure u{text-decoration:none; font-size:.3em; letter-spacing:0; font-weight:700; color:var(--blue)}
.figure > span{font-size:14px; color:var(--ink-mut)}
.ticks{display:grid; gap:12px}
.ticks li{position:relative; padding-left:30px; color:var(--ink-mut)}
.ticks li::before{content:""; position:absolute; left:0; top:.36em; width:18px; height:18px; border-radius:50%;
  background:var(--blue-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.3l2.6 2.6L13 6.5' fill='none' stroke='%231479f0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* HALLS */
.halls{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.hall{position:relative; aspect-ratio:1/1.16; border-radius:var(--r); overflow:hidden; isolation:isolate; background:var(--tile);
  display:grid; grid-template-rows:minmax(0,1fr) auto; transition:background .4s, transform .5s var(--ease), box-shadow .5s var(--ease)}
.hall-wide{grid-column:span 2; aspect-ratio:auto; min-height:210px}
.hall.hall-wide img{position:absolute; inset:0 0 0 46%; width:54%; height:100%; padding:26px 30px}
.hall-wide > div{grid-row:2}
.hall:hover{background:#fff; transform:translateY(-6px); box-shadow:var(--shadow-lg)}
.hall img{width:100%; height:100%; min-height:0; padding:26px 30px 6px; object-fit:contain; mix-blend-mode:multiply;
  transition:transform .8s var(--ease)}
.hall:hover img{transform:scale(1.06)}
.hall > div{padding:22px 24px; display:grid; gap:4px}
.hall h3{font-size:clamp(19px,1.7vw,24px); letter-spacing:-.025em; line-height:1.15}
.hall small{font-size:13px; color:var(--ink-mut)}

/* SERVICE (dark) */
.dark{background:radial-gradient(80vw 60vh at 90% 0%, rgba(20,121,240,.28), transparent 60%), linear-gradient(180deg,var(--navy),var(--navy-2)); color:#fff}
.dark .eyebrow{color:var(--blue-br)}
.dark .eyebrow i{background:var(--blue-br); box-shadow:0 0 0 4px rgba(76,196,255,.16)}
.dark .head p:not(.eyebrow){color:rgba(255,255,255,.66)}
.steps{display:grid; grid-template-columns:repeat(4,1fr); position:relative}
.steps::before{content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg,var(--blue-br),rgba(76,196,255,.15))}
.step{position:relative; padding:34px 28px 8px 0; display:grid; gap:12px; align-content:start}
.step::before{content:""; position:absolute; left:0; top:-5px; width:11px; height:11px; border-radius:50%;
  background:var(--blue-br); box-shadow:0 0 0 6px rgba(76,196,255,.14), 0 0 22px var(--blue-br)}
.step .num{color:var(--blue-br)}
.step h3{font-size:clamp(24px,2.4vw,34px)}
.step p{color:rgba(255,255,255,.66); max-width:26ch}

/* FINDER */
.finder{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,5vw,80px); align-items:center}
.finder-copy h2{font-size:clamp(34px,4.6vw,58px); margin:16px 0 18px}
.finder-copy p:not(.eyebrow){color:var(--ink-mut); font-size:18px; max-width:44ch}
.finder-card{background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  padding:clamp(22px,3vw,40px); display:grid; gap:28px}
.q{display:grid; gap:12px}
.q h3{font-size:20px; letter-spacing:-.02em}
.opts{display:flex; flex-wrap:wrap; gap:8px}
.opts button{height:42px; padding:0 18px; border-radius:999px; border:1px solid var(--line); background:var(--bg);
  font-size:14px; font-weight:600; transition:background .25s, color .25s, border-color .25s}
.opts button:hover{border-color:var(--ink)}
.opts button.is-on{background:var(--ink); border-color:var(--ink); color:#fff}
.range{height:6px; border-radius:6px; background:var(--tile); position:relative; margin-top:10px}
.range i{position:absolute; inset:0 auto 0 0; width:var(--p); border-radius:6px; background:linear-gradient(90deg,var(--blue),var(--blue-br))}
.range i::after{content:""; position:absolute; right:-11px; top:50%; translate:0 -50%; width:22px; height:22px; border-radius:50%;
  background:#fff; border:2px solid var(--blue); box-shadow:var(--shadow)}
.range-labels{display:flex; justify-content:space-between; font-size:13px; color:var(--ink-mut)}
.finder-card .btn{justify-self:start}

/* CTA */
.cta{padding-top:0}
.cta-box{position:relative; overflow:hidden; isolation:isolate; max-width:calc(var(--maxw) - 2 * var(--pad)); border-radius:var(--r-lg);
  padding:clamp(44px,8vw,110px) clamp(24px,6vw,90px); color:#fff;
  background:radial-gradient(70% 90% at 100% 0%, var(--blue-br), transparent 60%), linear-gradient(120deg,var(--blue-deep),var(--blue))}
.cta-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:-1; opacity:.7}
.cta-box .eyebrow{color:#fff}
.cta-box .eyebrow i{background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.2)}
.cta-box h2{font-size:clamp(38px,6.4vw,88px); margin:18px 0 20px; letter-spacing:-.045em}
.cta-box > p:not(.eyebrow){font-size:clamp(17px,1.5vw,20px); opacity:.86; max-width:46ch}

/* FOOTER */
.footer{padding:20px 0 34px; color:var(--ink-mut); font-size:14px}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; padding-bottom:40px}
.footer-grid p{margin-top:18px}
.footer nav{display:grid; gap:10px; align-content:start}
.footer h4{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); font-weight:500; margin-bottom:4px}
.footer a{transition:color .2s}
.footer a:hover{color:var(--blue)}
.footer-base{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:22px; border-top:1px solid var(--line); font-size:13px}

/* RESPONSIVE */
@media(max-width:1080px){
  .nav-links{position:fixed; inset:70px 12px auto 12px; flex-direction:column; padding:12px; border-radius:22px; background:rgba(255,255,255,.96);
    box-shadow:var(--shadow-lg); transform:translateY(-12px) scale(.98); opacity:0; pointer-events:none; transition:.3s var(--ease)}
  .nav-links.open{transform:none; opacity:1; pointer-events:auto}
  .nav-links a{padding:14px; font-size:16px; text-align:center}
  .nav-actions{margin-left:auto}
  .nav-toggle{display:flex}
  .halls{grid-template-columns:repeat(3,1fr)}
  .hall-wide{grid-column:span 1; aspect-ratio:1/1.16}
  .hall.hall-wide img{inset:0 0 104px; width:100%; height:calc(100% - 104px); padding:26px 30px 6px}
  .steps{grid-template-columns:1fr 1fr; row-gap:36px}
}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr; padding-top:104px}
  .hero-stage{width:min(86%,460px); margin-top:8px}
  .room, .room-xl, .room-lg{grid-column:span 12; min-height:400px}
  .exhibit-grid, .finder{grid-template-columns:1fr}
  .exhibit-stage{position:relative; top:0; aspect-ratio:1/1}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .pick span, .nav-actions .btn{display:none}
  .tag-a{left:-6%; bottom:6%}
  .tag-b{right:-6%; top:6%}
  .tag-c{display:none}
  .hero-cta .btn{flex:1 1 auto}
  .halls{grid-template-columns:1fr 1fr; gap:12px}
  .hall{aspect-ratio:1/1.3}
  .hall img, .hall.hall-wide img{padding:16px 16px 0}
  .hall > div{padding:14px 16px 16px}
  .hall h3{font-size:16px; overflow-wrap:anywhere}
  .steps{grid-template-columns:1fr}
  .steps::before{inset:0 auto 0 5px; width:1px; height:auto; background:linear-gradient(180deg,var(--blue-br),rgba(76,196,255,.15))}
  .step{padding:0 0 0 34px}
  .step::before{top:4px}
  .footer-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none; transition:none}
  .tag, .plinth-ring, .brands-track{animation:none}
}

/* =========================================================================
   EXHIBIT PAGE (eksponaat.html)
   ========================================================================= */
.xhero{padding:112px 0 clamp(48px,6vw,90px);
  background:radial-gradient(70vw 60vh at 85% 0%, rgba(76,196,255,.2), transparent 60%), linear-gradient(180deg,#fff,var(--bg))}
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:13px; color:var(--ink-mut); margin-bottom:26px}
.crumbs i{font-style:normal; color:var(--ink-faint)}
.crumbs a:hover{color:var(--blue)}
.crumbs span{color:var(--ink); font-weight:600}
.xhero-grid{display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(28px,5vw,80px); align-items:start}
.xstage{position:sticky; top:92px; display:grid; grid-template-columns:78px 1fr; gap:14px}
.xstage-main{position:relative; top:0; grid-column:2; grid-row:1; aspect-ratio:1/1}
.xstage-main img{width:82%; height:82%}
.thumbs{grid-column:1; grid-row:1; display:grid; gap:10px; align-content:start}
.thumbs button{aspect-ratio:1; border-radius:16px; background:var(--tile); border:1px solid transparent; padding:6px; overflow:hidden;
  isolation:isolate; transition:background .25s, border-color .25s}
.thumbs img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply}
.thumbs button:hover{background:#fff}
.thumbs button.is-on{background:#fff; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft)}
.xinfo{padding-top:clamp(0px,2vw,28px)}
.xinfo h1{font-size:clamp(44px,6.2vw,92px); letter-spacing:-.05em; line-height:.96; margin:18px 0 22px}
.variant{margin-top:32px; padding:22px; border-radius:var(--r); background:rgba(255,255,255,.72); border:1px solid var(--line-soft); box-shadow:var(--shadow)}
.variant-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:13px; font-weight:700}
.variant-head code{font-family:var(--mono); font-size:12px; font-weight:400; color:var(--ink-mut)}
.variant-opts{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0}
.variant-opts button{display:inline-flex; align-items:center; gap:10px; height:44px; padding:0 18px 0 10px; border-radius:999px;
  border:1px solid var(--line); background:#fff; font-size:14px; font-weight:600; transition:border-color .25s, box-shadow .25s}
.variant-opts i{width:22px; height:22px; border-radius:50%; background:var(--c); border:1px solid var(--line)}
.variant-opts button:hover{border-color:var(--ink)}
.variant-opts button.is-on{border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}
.variant-note{font-size:14px; color:var(--ink-mut)}
.assure{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:34px; padding-top:24px; border-top:1px solid var(--line);
  font-size:13px; color:var(--ink-mut)}
.assure b{display:block; color:var(--ink); font-size:15px}

.xband{background:var(--surface); border-block:1px solid var(--line-soft); padding:clamp(10px,2vw,24px) 0 18px}
.xband-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0 28px}
.xband .figure{border-top:0}
.xband-note{font-size:12.5px; color:var(--ink-faint)}

.inside{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,6vw,96px); align-items:center}
.inside-stage{position:relative; aspect-ratio:1; border-radius:var(--r-lg); overflow:hidden; isolation:isolate;
  background:radial-gradient(80% 60% at 50% 40%, #fff, var(--tile) 70%, var(--tile-2))}
.inside-stage img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply}
.spot{position:absolute; left:var(--x); top:var(--y); translate:-50% -50%; width:34px; height:34px; border-radius:50%; border:0; padding:0;
  background:var(--blue); color:#fff; font-size:13px; font-weight:800; box-shadow:0 0 0 6px rgba(20,121,240,.18);
  transition:background .25s, scale .3s var(--ease)}
.spot::after{content:""; position:absolute; inset:0; border-radius:50%; border:1px solid var(--blue); animation:ping 2.6s ease-out infinite}
@keyframes ping{to{scale:2.4; opacity:0}}
.spot.is-on{background:var(--ink); scale:1.2}
.inside-copy h2{font-size:clamp(34px,5vw,64px); margin-top:16px}
.spotlist{display:grid; gap:6px; margin:26px 0 0 -18px}
.spotlist li{display:flex; gap:18px; padding:18px; border-radius:20px; transition:background .3s, box-shadow .3s}
.spotlist li.is-on{background:var(--surface); box-shadow:var(--shadow)}
.spotlist li > span{flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--blue-soft);
  color:var(--blue-deep); font-size:13px; font-weight:800; transition:background .3s, color .3s}
.spotlist li.is-on > span{background:var(--blue); color:#fff}
.spotlist li.plain > span{background:var(--tile); color:var(--ink-mut)}
.spotlist h3{font-size:20px; letter-spacing:-.02em; line-height:1.2; margin-bottom:6px}
.spotlist p{font-size:15px; color:var(--ink-mut)}

.why{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.why-card{padding:30px; border-radius:var(--r); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  display:grid; gap:12px; align-content:start}
.why-card svg{width:46px; height:46px; margin-bottom:12px; fill:none; stroke:var(--blue-br); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.why-card h3{font-size:24px; letter-spacing:-.025em}
.why-card p{color:rgba(255,255,255,.66)}

.progs{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.prog{padding:clamp(24px,3vw,40px); border-radius:var(--r); background:var(--surface); border:1px solid var(--line-soft); box-shadow:var(--shadow)}
.prog h3{font-size:clamp(48px,6vw,84px); letter-spacing:-.05em; margin:10px 0 22px}
.prog-bar{height:8px; border-radius:8px; background:var(--tile); overflow:hidden}
.prog-bar i{display:block; height:100%; width:var(--p); border-radius:8px; background:linear-gradient(90deg,var(--blue),var(--blue-br))}
.prog dl{display:flex; gap:44px; margin-top:22px}
.prog dt{font-size:13px; color:var(--ink-mut)}
.prog dd{font-size:22px; font-weight:800; letter-spacing:-.02em}

.specs{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(28px,6vw,96px); align-items:start}
.specs-side h2{font-size:clamp(32px,4.2vw,54px); margin:16px 0 30px}
.dims{max-width:340px; padding:24px 20px; border-radius:var(--r); background:var(--bg)}
.dims svg{width:100%}
.dims-box{fill:#fff; stroke:var(--ink); stroke-width:1.5; stroke-linejoin:round}
.dims-line{fill:none; stroke:var(--blue); stroke-width:1.2}
.dims text{font-family:var(--mono); font-size:12px; fill:var(--blue-deep)}
.spec-table > div{display:grid; grid-template-columns:210px 1fr; gap:20px; padding:18px 0; border-top:1px solid var(--line)}
.spec-table > div:last-child{border-bottom:1px solid var(--line)}
.spec-table dt{font-size:15px; color:var(--ink-mut)}
.spec-table dd{font-weight:600}
.docs{margin-top:clamp(40px,6vw,72px)}
.docs h3{font-size:22px; letter-spacing:-.02em; margin-bottom:16px}
.doc{display:inline-flex; align-items:center; gap:16px; padding:14px 22px 14px 14px; border-radius:18px; border:1px solid var(--line);
  background:var(--bg); transition:border-color .25s, transform .3s var(--ease)}
.doc:hover{border-color:var(--ink); transform:translateY(-2px)}
.doc-ico{width:48px; height:48px; border-radius:12px; display:grid; place-items:center; background:var(--ink); color:#fff;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em}
.doc b{display:block; line-height:1.3}
.doc small{font-size:13px; color:var(--ink-mut)}
.doc svg{width:20px; height:20px; margin-left:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

.halls-3{grid-template-columns:repeat(3,1fr)}
.halls-3 .hall{aspect-ratio:1/1.02}
.halls-3 .num{color:var(--blue-deep)}

.has-dock .footer{padding-bottom:100px}
.dock{position:fixed; left:50%; bottom:18px; translate:-50% 150%; z-index:8000; display:flex; align-items:center; gap:10px;
  max-width:calc(100vw - 24px); padding:9px 9px 9px 10px; border-radius:999px; background:rgba(255,255,255,.97);
  border:1px solid var(--line); box-shadow:var(--shadow-lg); transition:translate .55s var(--ease)}
.dock.show{translate:-50% 0}
.dock .btn-ghost{background:#fff; backdrop-filter:none}
.dock > img{width:44px; height:44px; border-radius:50%; object-fit:contain; background:#fff; border:1px solid var(--line)}
.dock > div{margin-right:14px; white-space:nowrap}
.dock b{display:block; font-size:14px; line-height:1.25}
.dock small{font-size:12px; color:var(--ink-mut)}

@media(max-width:900px){
  .xhero-grid, .inside, .specs{grid-template-columns:1fr}
  .xstage{position:relative; top:0; grid-template-columns:1fr}
  .xstage-main{grid-column:1}
  .thumbs{grid-column:1; grid-row:2; grid-template-columns:repeat(4,64px)}
  .xband-grid{grid-template-columns:1fr 1fr}
  .xband .figure:nth-child(n+3){border-top:1px solid var(--line)}
  .why{grid-template-columns:1fr}
  .halls-3{grid-template-columns:1fr 1fr}
  .spotlist{margin-left:0}
}
@media(max-width:620px){
  .progs{grid-template-columns:1fr}
  .spec-table > div{grid-template-columns:1fr; gap:4px}
  .assure{grid-template-columns:1fr}
  .dock > div, .dock .btn-ghost span{display:none}
  .dock .btn-ghost{padding:0 13px}
}
@media(prefers-reduced-motion:reduce){ .spot::after{animation:none} }

/* =========================================================================
   HALL PAGE (saal.html)
   ========================================================================= */
.hhero{padding:112px 0 clamp(40px,5vw,72px);
  background:radial-gradient(70vw 60vh at 85% 0%, rgba(76,196,255,.2), transparent 60%), linear-gradient(180deg,#fff,var(--bg))}
.hhero-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,80px); align-items:center}
.hhero h1{font-size:clamp(46px,7.4vw,108px); letter-spacing:-.05em; line-height:.94; margin:18px 0 24px}
.lineup{position:relative; aspect-ratio:1.2/1; border-radius:var(--r-lg); overflow:hidden; isolation:isolate;
  background:radial-gradient(90% 70% at 50% 30%, #fff 0%, #eef3f9 55%, #dde6f1 100%); box-shadow:var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.8)}
.lineup img{position:absolute; bottom:4%; height:84%; width:auto; aspect-ratio:1; object-fit:contain; mix-blend-mode:multiply; translate:-50%}
.lineup img:nth-child(1){left:21%; height:76%}
.lineup img:nth-child(2){left:51%; height:90%}
.lineup img:nth-child(3){left:81%; height:80%}
.lineup-floor{position:absolute; left:6%; right:6%; bottom:4%; height:6%; border-radius:50%; z-index:-1;
  background:radial-gradient(closest-side, rgba(10,30,70,.2), transparent); filter:blur(8px)}

.filterbar{position:sticky; top:64px; z-index:500; background:rgba(243,246,250,.9); backdrop-filter:blur(14px) saturate(1.4);
  border-block:1px solid var(--line); padding:12px 0}
.filterbar-in{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.filterbar .opts button{height:38px; padding:0 16px; background:var(--surface)}
.filterbar .opts button.is-on{background:var(--ink)}
.filterbar-sep{width:1px; height:22px; background:var(--line)}
.filterbar-count{margin-left:auto; font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--ink-mut)}

.section-tight{padding-top:clamp(20px,3vw,40px)}
.group[hidden], .xcard[hidden]{display:none}
.group + .group{margin-top:clamp(48px,7vw,88px)}
.group-head{display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:22px;
  padding-bottom:18px; border-bottom:1px solid var(--line)}
.group-head h2{font-size:clamp(26px,3vw,40px)}
.group-head span{font-size:14px; color:var(--ink-mut)}
.is-filtered .group-head span{display:none}
.xgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.xcard{position:relative; border-radius:var(--r); overflow:hidden; isolation:isolate; background:var(--tile);
  transition:background .4s, transform .5s var(--ease), box-shadow .5s var(--ease), opacity .8s var(--ease)}
.xcard:hover{background:var(--surface); transform:translateY(-6px); box-shadow:var(--shadow-lg)}
.xcard-link{display:grid; height:100%; grid-template-rows:auto 1fr}
.xcard-img{aspect-ratio:1/.86; padding:54px 30px 6px}
.xcard-img img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; transition:transform .8s var(--ease)}
.xcard:hover .xcard-img img{transform:scale(1.05)}
.xcard-top{position:absolute; inset:16px 16px auto; z-index:2; display:flex; align-items:center; justify-content:space-between; pointer-events:none}
.badge{font-family:var(--mono); font-size:11px; letter-spacing:.04em; padding:7px 11px; border-radius:999px; background:var(--surface); color:var(--ink-mut)}
.badge.hp{background:var(--blue); color:#fff}
.save{pointer-events:auto; width:40px; height:40px; border-radius:50%; border:0; padding:0; display:grid; place-items:center; background:var(--surface);
  box-shadow:var(--shadow); transition:background .25s, color .25s, transform .3s var(--ease)}
.save svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round}
.save:hover{transform:scale(1.08)}
.save.is-on{background:var(--blue); color:#fff}
.save.is-on svg{fill:currentColor}
.xcard-body{padding:14px 24px 22px; display:grid; gap:6px; align-content:start; grid-template-rows:auto auto 1fr auto auto}
.xcard-body .num{color:var(--blue-deep)}
.xcard-body h3{font-size:clamp(22px,2vw,28px)}
.xcard-body p{font-size:14.5px; color:var(--ink-mut)}
.facts{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.facts li{font-size:12.5px; font-weight:600; padding:5px 11px; border-radius:999px; background:var(--surface); border:1px solid var(--line-soft)}
.xcard:hover .facts li{background:var(--bg)}
.models{display:flex; align-items:center; gap:10px; margin-top:12px; padding-top:14px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-mut)}
.dots{display:flex}
.dots i{width:16px; height:16px; border-radius:50%; background:var(--c); border:1px solid var(--line); margin-right:-5px}
.dots i:last-child{margin-right:0}
.more{margin-left:auto; display:inline-flex; align-items:center; gap:4px; font-weight:700; color:var(--ink)}
.more svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s var(--ease)}
.xcard:hover .more{color:var(--blue)}
.xcard:hover .more svg{transform:translate(2px,-2px)}

.cmp-scroll{overflow-x:auto; margin:0 calc(var(--pad) * -1); padding:0 var(--pad)}
.cmp{width:100%; min-width:680px; border-collapse:collapse; table-layout:fixed}
.cmp col:first-child, .cmp td:first-child, .cmp tbody th{width:24%}
.cmp thead th{padding:0 16px 22px; text-align:left; vertical-align:bottom; font-size:clamp(18px,1.8vw,24px); font-weight:800; letter-spacing:-.025em}
.cmp thead img{width:110px; height:130px; object-fit:contain; mix-blend-mode:multiply; margin-bottom:8px}
.cmp tbody th{padding:18px 0; text-align:left; font-size:15px; font-weight:500; color:var(--ink-mut)}
.cmp tbody td{padding:18px 16px; font-weight:600}
.cmp tbody tr{border-top:1px solid var(--line)}
.cmp tbody td:nth-child(2), .cmp thead th:nth-child(2){background:var(--bg)}
.cmp thead th:nth-child(2){border-radius:var(--r) var(--r) 0 0; padding-top:20px}
.cmp-cta td:nth-child(2){border-radius:0 0 var(--r) var(--r)}
.cmp .yes{color:var(--blue-deep)}
.tick, .dash{display:inline-block; width:22px; height:22px; border-radius:50%; vertical-align:middle;
  background:var(--blue-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.3l2.6 2.6L13 6.5' fill='none' stroke='%231479f0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.dash{background:var(--tile) linear-gradient(var(--ink-faint),var(--ink-faint)) center/8px 2px no-repeat}

.helpbox{display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; max-width:calc(var(--maxw) - 2 * var(--pad));
  padding:clamp(28px,4vw,56px); border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line-soft); box-shadow:var(--shadow)}
.helpbox h2{font-size:clamp(28px,3.6vw,46px); margin:14px 0 12px}
.helpbox p:not(.eyebrow){color:var(--ink-mut); max-width:52ch}
.helpbox .hero-cta{margin-top:0}

@media(max-width:1080px){ .xgrid{grid-template-columns:1fr 1fr} .filterbar{top:60px} }
@media(max-width:900px){
  .hhero-grid{grid-template-columns:1fr}
  .filterbar-in{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none}
  .filterbar .opts{flex-wrap:nowrap}
  .filterbar .opts button{white-space:nowrap}
  .filterbar-count{display:none}
}
@media(max-width:620px){ .xgrid{grid-template-columns:1fr} .xcard-img{aspect-ratio:1/.7} }

/* =========================================================================
   QUOTE REQUEST PAGE (valik.html)
   ========================================================================= */
.pick.is-here{border-color:var(--ink); background:var(--surface)}
.qhero{padding:124px 0 clamp(28px,4vw,48px);
  background:radial-gradient(70vw 60vh at 85% 0%, rgba(76,196,255,.2), transparent 60%), linear-gradient(180deg,#fff,var(--bg))}
.qhero h1{font-size:clamp(40px,6vw,84px); letter-spacing:-.05em; line-height:.96; margin:18px 0 20px}
.qmain{padding-bottom:clamp(72px,10vw,140px)}
.qlayout{display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:clamp(20px,3vw,40px); align-items:start}
.qlayout[hidden], .qstate[hidden]{display:none}
.qcol{display:grid; gap:18px}
.qsec{padding:clamp(22px,3vw,40px); border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line-soft); box-shadow:var(--shadow)}
.qsec-head{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:22px}
.qsec-head h2{font-size:clamp(22px,2.4vw,30px); letter-spacing:-.03em}
.step-n{flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:#fff;
  font-family:var(--mono); font-size:13px}
.qsec-meta{margin-left:auto; font-size:13px; color:var(--ink-mut)}

.qitem{display:grid; grid-template-columns:96px minmax(0,1fr) auto; gap:14px 20px; align-items:center; padding:20px 0; border-top:1px solid var(--line)}
.qitem:first-child{border-top:0; padding-top:0}
.qitem-img{width:96px; aspect-ratio:1; border-radius:18px; background:var(--tile); padding:8px; isolation:isolate}
.qitem-img img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply}
.qitem-main{display:grid; gap:2px}
.qitem-main .num{color:var(--blue-deep)}
.qitem h3{font-size:clamp(19px,1.8vw,24px); letter-spacing:-.025em; line-height:1.2}
.qitem h3 a:hover{color:var(--blue)}
.qitem small{font-size:13.5px; color:var(--ink-mut)}
.qitem-side{display:flex; align-items:center; gap:10px}
.stepper{display:inline-flex; align-items:center; height:44px; border-radius:999px; border:1px solid var(--line); background:var(--bg)}
.stepper button{width:42px; height:42px; border:0; border-radius:50%; background:none; font-size:18px; line-height:1; transition:background .2s}
.stepper button:hover{background:var(--surface)}
.stepper output{min-width:26px; text-align:center; font-weight:800}
.remove{width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:none; display:grid; place-items:center; color:var(--ink-mut);
  transition:border-color .2s, color .2s}
.remove:hover{border-color:var(--ink); color:var(--ink)}
.remove svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round}
.qitem-note{grid-column:2 / -1; height:40px; padding:0; border:0; border-bottom:1px dashed var(--line); background:none; font:inherit; font-size:14px; color:var(--ink)}
.qitem-note::placeholder{color:var(--ink-faint)}
.qitem-note:focus{outline:0; border-bottom:1px solid var(--blue)}
.addmore{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:8px; height:56px; border-radius:18px; border:1px dashed var(--line);
  font-size:14.5px; font-weight:700; color:var(--ink-mut); transition:border-color .25s, color .25s, background .25s}
.addmore span{font-size:20px; font-weight:500}
.addmore:hover{border-color:var(--blue); color:var(--blue); background:var(--blue-soft)}

.qgroup + .qgroup{margin-top:28px}
.qgroup h3{font-size:15px; font-weight:700; letter-spacing:0; line-height:1.4; margin-bottom:12px}
.qgroup-2{display:grid; grid-template-columns:1fr 1fr; gap:28px}
.choice{display:flex; flex-wrap:wrap; gap:8px}
.choice label{display:inline-flex; align-items:center; height:44px; padding:0 18px; border-radius:999px; border:1px solid var(--line); background:var(--bg);
  font-size:14px; font-weight:600; cursor:pointer; transition:background .25s, color .25s, border-color .25s}
.choice label:hover{border-color:var(--ink)}
.choice input, .svc input, .consent input{position:absolute; opacity:0; pointer-events:none}
.choice label:has(:checked){background:var(--ink); border-color:var(--ink); color:#fff}
.choice label:has(:focus-visible), .svc:has(:focus-visible){outline:2px solid var(--blue); outline-offset:3px}

.qsec textarea, .field input{width:100%; border-radius:14px; border:1px solid var(--line); background:var(--bg); padding:0 16px; font:inherit; color:var(--ink);
  transition:border-color .2s, box-shadow .2s, background .2s}
.field input{height:54px}
.qsec textarea{padding:14px 16px; resize:vertical; min-height:96px; display:block}
.qsec textarea:focus, .field input:focus{outline:0; border-color:var(--blue); background:var(--surface); box-shadow:0 0 0 4px var(--blue-soft)}
.qsec textarea::placeholder{color:var(--ink-faint)}
.fields{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.field{display:grid; gap:8px; align-content:start}
.field.full{grid-column:1 / -1}
.field label{font-size:14px; font-weight:700}
.field em{font-style:normal; font-weight:500; color:var(--ink-faint); margin-left:6px}
.field.is-bad input{border-color:#d92d20; box-shadow:0 0 0 4px rgba(217,45,32,.1)}

.svcs{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.svc{position:relative; display:grid; gap:6px; align-content:start; padding:22px 20px; border-radius:18px; border:1px solid var(--line); background:var(--bg);
  cursor:pointer; transition:border-color .25s, background .25s, box-shadow .25s}
.svc:hover{border-color:var(--ink)}
.svc b{font-size:18px; letter-spacing:-.02em}
.svc span{font-size:13.5px; color:var(--ink-mut)}
.svc i, .consent i{flex:none; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line); background:var(--surface) center/contain no-repeat; transition:background-color .2s, border-color .2s}
.svc i{position:absolute; top:18px; right:18px}
.svc:has(:checked){border-color:var(--blue); background:var(--surface); box-shadow:0 0 0 4px var(--blue-soft)}
.svc:has(:checked) i, .consent:has(:checked) i{border-color:var(--blue); background-color:var(--blue);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.3l2.6 2.6L13 6.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.consent{position:relative; display:flex; align-items:center; gap:12px; margin-top:22px; font-size:14.5px; color:var(--ink-mut); cursor:pointer}
.consent i{border-radius:7px}
.consent a{color:var(--ink); text-decoration:underline; text-underline-offset:3px}
.consent.is-bad i{border-color:#d92d20; box-shadow:0 0 0 4px rgba(217,45,32,.1)}
.consent.is-bad{color:#b42318}

.summary{position:sticky; top:88px; padding:30px; border-radius:var(--r-lg); color:#fff;
  background:radial-gradient(120% 70% at 100% 0%, rgba(20,121,240,.5), transparent 60%), linear-gradient(180deg,var(--navy),var(--navy-2)); box-shadow:var(--shadow-lg)}
.summary h2{font-size:22px; letter-spacing:-.025em; margin-bottom:18px}
.sum-items{display:grid; gap:10px}
.sum-items li{display:flex; gap:10px; font-size:15px; line-height:1.4}
.sum-items b{flex:none; min-width:30px; color:var(--blue-br)}
.sum-rows{margin:20px 0 24px; padding-top:18px; border-top:1px solid rgba(255,255,255,.14); display:grid; gap:10px}
.sum-rows > div{display:flex; justify-content:space-between; gap:16px; font-size:14px}
.sum-rows dt{color:rgba(255,255,255,.6)}
.sum-rows dd{font-weight:700; text-align:right}
.summary .btn{width:100%}
.sum-note{margin-top:16px; font-size:13px; line-height:1.5; color:rgba(255,255,255,.62)}
.sum-alt{margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.14); font-size:14px; color:rgba(255,255,255,.7)}
.sum-alt a{color:#fff; font-weight:700}
.sum-error{margin-top:14px; padding:12px 14px; border-radius:12px; background:rgba(217,45,32,.18); border:1px solid rgba(255,140,130,.4); font-size:13.5px; line-height:1.45}
.sum-error[hidden]{display:none}
.summary .btn:disabled{opacity:.6; pointer-events:none}

.qstate-box{max-width:640px; margin:0 auto; padding:clamp(32px,6vw,72px) clamp(22px,4vw,56px); text-align:center; border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--line-soft); box-shadow:var(--shadow-lg)}
.qstate-ico{display:grid; place-items:center; width:72px; height:72px; margin:0 auto 24px; border-radius:50%; background:var(--tile); color:var(--ink-mut)}
.qstate-ico svg{width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.qstate-ico.is-ok{background:var(--blue); color:#fff; box-shadow:0 0 0 10px var(--blue-soft)}
.qstate-box h2{font-size:clamp(30px,4vw,48px); margin-bottom:14px}
.qstate-box p{color:var(--ink-mut); font-size:17px}
.qstate-box p b{color:var(--ink)}
.qstate-box .hero-cta{justify-content:center}
.sum-light{max-width:340px; margin:26px auto 0; padding:18px 22px; border-radius:18px; background:var(--bg); text-align:left}
.sum-light b{color:var(--blue-deep)}

@media(max-width:1080px){
  .qlayout{grid-template-columns:1fr}
  .summary{position:relative; top:0}
}
@media(max-width:620px){
  .qitem{grid-template-columns:72px minmax(0,1fr)}
  .qitem-img{width:72px; border-radius:14px}
  .qitem-side{grid-column:1 / -1; justify-content:space-between}
  .qitem-note{grid-column:1 / -1}
  .qsec-meta{margin-left:0; flex-basis:100%}
  .qgroup-2, .fields, .svcs{grid-template-columns:1fr}
}

/* =========================================================================
   ROOM PAGE (ruum.html)
   ========================================================================= */
.rhero h1{font-size:clamp(44px,6.6vw,96px)}
.scene{position:relative}
.scene-img{position:relative; aspect-ratio:1/1; border-radius:var(--r-lg); overflow:hidden; isolation:isolate; box-shadow:var(--shadow-lg)}
.scene-img > img{width:100%; height:100%; object-fit:cover}
.scene .spot{z-index:2; box-shadow:0 0 0 6px rgba(255,255,255,.4)}
.scene .spot::after{border-color:#fff}
.scene-cap{position:absolute; left:16px; right:16px; top:16px; z-index:2; display:grid; gap:2px; padding:16px 20px; border-radius:18px;
  background:rgba(255,255,255,.92); box-shadow:var(--shadow)}
.scene-cap small{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--blue-deep)}
.scene-cap b{font-size:18px; letter-spacing:-.02em}
.scene-cap span{font-size:14px; color:var(--ink-mut)}

.needs{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.need{padding:28px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line-soft); box-shadow:var(--shadow); display:grid; gap:10px; align-content:start}
.need h3{font-size:clamp(20px,2vw,26px); letter-spacing:-.025em; line-height:1.15}
.need p{color:var(--ink-mut); font-size:15px}
.need small{margin-top:8px; padding-top:14px; border-top:1px solid var(--line); font-family:var(--mono); font-size:12px; color:var(--blue-deep)}

.role{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(20px,4vw,64px); padding:clamp(26px,4vw,48px) 0; border-top:1px solid var(--line)}
.role-copy{position:sticky; top:96px; align-self:start; display:grid; gap:12px}
.role-copy .num{display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--ink); color:#fff}
.role-copy h3{font-size:clamp(24px,2.6vw,36px)}
.role-copy p{color:var(--ink-mut); max-width:30ch}
.xgrid.two{grid-template-columns:1fr 1fr}
.role .models .more{margin-left:auto}

.kit{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,64px); align-items:center; max-width:calc(var(--maxw) - 2 * var(--pad));
  padding:clamp(28px,5vw,72px); border-radius:var(--r-lg); color:#fff;
  background:radial-gradient(90% 90% at 100% 0%, rgba(20,121,240,.5), transparent 60%), linear-gradient(180deg,var(--navy),var(--navy-2))}
.kit .eyebrow{color:var(--blue-br)}
.kit .eyebrow i{background:var(--blue-br); box-shadow:0 0 0 4px rgba(76,196,255,.16)}
.kit h2{font-size:clamp(32px,4.4vw,58px); margin:16px 0 16px}
.kit-copy > p:not(.eyebrow){color:rgba(255,255,255,.7); font-size:18px; max-width:40ch}
.kit-items{display:flex; align-items:center; justify-content:center; gap:clamp(10px,2vw,24px)}
.kit-items figure{margin:0; flex:1; max-width:240px; display:grid; gap:14px}
.kit-items figure > div{aspect-ratio:1; border-radius:var(--r); background:var(--tile); padding:14%; isolation:isolate}
.kit-items img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply}
.kit-items figcaption{font-size:14px; color:rgba(255,255,255,.66)}
.kit-items b{display:block; font-size:17px; color:#fff; letter-spacing:-.02em}
.kit-plus{font-size:34px; font-weight:300; color:var(--blue-br); margin-bottom:54px}

.rooms-4 .room{grid-column:span 3; min-height:280px}
.rooms-4 .room h3{font-size:clamp(20px,1.9vw,26px)}

@media(max-width:900px){
  .needs{grid-template-columns:1fr}
  .role{grid-template-columns:1fr}
  .role-copy{position:relative; top:0}
  .kit{grid-template-columns:1fr}
  .rooms-4 .room{grid-column:span 6; min-height:240px}
  .scene-cap{position:static; margin-top:12px; background:var(--surface); border:1px solid var(--line-soft)}
}
@media(max-width:620px){ .xgrid.two{grid-template-columns:1fr} .rooms-4 .room{grid-column:span 12} }

/* =========================================================================
   TEXT PAGE (tekst.html) — any long-form content goes inside .prose
   ========================================================================= */
.thero{padding:112px 0 0;
  background:radial-gradient(70vw 60vh at 85% 0%, rgba(76,196,255,.2), transparent 60%), linear-gradient(180deg,#fff,var(--bg))}
.thero h1{font-size:clamp(40px,6vw,84px); letter-spacing:-.05em; line-height:.96; margin:18px 0 20px}
.thero .lede{max-width:56ch}
.ttabs{display:flex; gap:6px; margin-top:clamp(28px,4vw,44px); border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none}
.ttabs a{position:relative; padding:14px 16px; font-size:15px; font-weight:600; color:var(--ink-mut); white-space:nowrap; transition:color .25s}
.ttabs a:first-child{padding-left:0}
.ttabs a:hover{color:var(--ink)}
.ttabs a.is-on{color:var(--ink)}
.ttabs a.is-on::after{content:""; position:absolute; left:0; right:16px; bottom:-1px; height:2px; background:var(--blue)}

.tmain{padding:clamp(36px,5vw,64px) 0 clamp(72px,10vw,140px)}
.tlayout{display:grid; grid-template-columns:260px minmax(0,1fr); gap:clamp(28px,6vw,96px); align-items:start}
.tside{position:sticky; top:96px; display:grid; gap:22px}
.toc h2{font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:12px}
.toc a{display:block; padding:7px 0 7px 16px; border-left:2px solid var(--line); font-size:14.5px; line-height:1.35; color:var(--ink-mut); transition:color .2s, border-color .2s}
.toc a:hover{color:var(--ink)}
.toc a.is-on{color:var(--ink); font-weight:700; border-left-color:var(--blue)}
.tcard{padding:22px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line-soft); box-shadow:var(--shadow); display:grid; gap:6px}
.tcard h3{font-size:18px; letter-spacing:-.02em; line-height:1.2}
.tcard p{font-size:14px; color:var(--ink-mut); margin-bottom:6px}
.tcard a{font-weight:700; font-size:15px}
.tcard a:hover{color:var(--blue)}

.prose{max-width:72ch; font-size:17px; line-height:1.72; color:#27324a}
.prose > * + *{margin-top:1.15em}
.prose h2{font-size:clamp(24px,2.6vw,34px); line-height:1.12; letter-spacing:-.03em; color:var(--ink); margin-top:2.1em; scroll-margin-top:96px; text-wrap:balance}
.prose h3{font-size:20px; line-height:1.25; letter-spacing:-.02em; color:var(--ink); margin-top:1.8em}
.prose h2 + *, .prose h3 + *{margin-top:.7em}
.prose > :first-child{margin-top:0}
.prose a{color:var(--blue-deep); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.prose a:hover{color:var(--blue)}
.prose strong{color:var(--ink)}
.prose ul, .prose ol{display:grid; gap:.55em; padding-left:0}
.prose li{position:relative; padding-left:30px}
.prose ul > li::before{content:""; position:absolute; left:8px; top:.72em; width:7px; height:7px; border-radius:50%; background:var(--blue)}
.prose ol{counter-reset:n}
.prose ol > li{counter-increment:n}
.prose ol > li::before{content:counter(n); position:absolute; left:0; top:.28em; width:21px; height:21px; border-radius:50%; display:grid; place-items:center;
  background:var(--blue-soft); color:var(--blue-deep); font-size:11.5px; font-weight:800; line-height:1}
.prose blockquote{margin-inline:0; padding:4px 0 4px 22px; border-left:3px solid var(--blue); font-size:1.12em; line-height:1.5; color:var(--ink)}
.prose hr{border:0; border-top:1px solid var(--line); margin-block:2.4em}
.prose img{border-radius:var(--r)}
.prose .note{padding:20px 24px; border-radius:18px; background:var(--blue-soft); border:1px solid rgba(20,121,240,.16)}
.prose .note b{display:block; font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--blue-deep); margin-bottom:6px}
.prose .note p{color:var(--ink)}
.prose table{width:100%; border-collapse:collapse; font-size:15.5px; line-height:1.5}
.prose th{text-align:left; padding:0 16px 12px 0; font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint)}
.prose td{padding:16px 16px 16px 0; border-top:1px solid var(--line); vertical-align:top}
.prose td:first-child{font-weight:700; color:var(--ink); width:38%}
.prose-sign{margin-top:2.4em; padding-top:1.4em; border-top:1px solid var(--line); font-weight:800; color:var(--ink)}
.keyfacts{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.keyfacts > div{padding:22px; border-radius:18px; background:var(--surface); border:1px solid var(--line-soft); box-shadow:var(--shadow); display:grid; gap:4px; align-content:start}
.keyfacts b{font-size:clamp(22px,2.4vw,30px); letter-spacing:-.035em; line-height:1.1; color:var(--ink)}
.keyfacts span{font-size:13.5px; line-height:1.4; color:var(--ink-mut)}

@media(max-width:900px){
  .tlayout{grid-template-columns:1fr}
  .tside{position:relative; top:0}
  .toc{display:none}
  .tside{order:2}
  .prose{font-size:16.5px}
}
@media(max-width:620px){ .keyfacts{grid-template-columns:1fr} .prose td:first-child{width:auto} }

/* shortlist state on "Lisa valikusse" buttons */
.js-add.is-on svg{fill:currentColor}
.btn-ghost.js-add.is-on{border-color:var(--blue); color:var(--blue-deep)}
.btn-primary.js-add.is-on{background:var(--blue)}

/* =========================================================================
   404 PAGE
   ========================================================================= */
.nf{position:relative; min-height:100svh; display:grid; align-items:center; overflow:hidden; padding:120px 0 64px;
  background:radial-gradient(70vw 60vh at 85% 10%, rgba(76,196,255,.22), transparent 60%),
    radial-gradient(60vw 50vh at 0% 100%, rgba(20,121,240,.10), transparent 60%), linear-gradient(180deg,#fff,var(--bg))}
.nf-in{position:relative; display:grid; justify-items:center; text-align:center}
.nf-code{display:flex; align-items:center; justify-content:center; gap:clamp(6px,1.4vw,18px); margin:26px 0 clamp(18px,3vw,34px);
  font-size:clamp(120px,24vw,300px); font-weight:800; letter-spacing:-.06em; line-height:.86;
  background:linear-gradient(180deg,var(--ink),#22314f); -webkit-background-clip:text; background-clip:text; color:transparent}
.drum{flex:none; width:.74em; height:.74em; border-radius:50%; padding:.07em; display:grid;
  background:conic-gradient(from 210deg,#f7f9fc,#b9c3d1,#eef2f7,#9aa6b8,#f7f9fc); box-shadow:var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.9)}
.drum-glass{position:relative; display:block; border-radius:50%; overflow:hidden; isolation:isolate;
  background:radial-gradient(circle at 34% 28%, #dff3ff, #8fd2ff 40%, var(--blue) 78%, var(--blue-deep));
  box-shadow:inset 0 0 0 .025em rgba(10,19,34,.55), inset 0 .05em .12em rgba(10,19,34,.35)}
.drum-glass::before{content:""; position:absolute; inset:-20%; background:conic-gradient(from 0deg, transparent 0 62%, rgba(255,255,255,.55) 78%, transparent 92%);
  animation:spin 3.2s linear infinite}
.drum-glass::after{content:""; position:absolute; left:16%; top:12%; width:30%; height:18%; border-radius:50%; background:rgba(255,255,255,.6); filter:blur(.012em); rotate:-28deg}
.drum-water{position:absolute; left:-50%; top:54%; width:200%; height:200%; border-radius:42%; background:rgba(255,255,255,.34); animation:spin 6s linear infinite}
@keyframes spin{to{rotate:360deg}}
.nf h1{font-size:clamp(32px,5vw,64px); letter-spacing:-.045em}
.nf .lede{margin:18px auto 0; max-width:46ch}
.nf .hero-cta{justify-content:center}
.nf-links{display:grid; grid-template-columns:repeat(4,auto); gap:10px; margin-top:clamp(36px,5vw,60px)}
.nf-links a{display:flex; align-items:center; gap:10px; text-align:left; padding:14px 20px; border-radius:16px; background:rgba(255,255,255,.72); border:1px solid var(--line-soft);
  font-size:14.5px; font-weight:700; transition:border-color .25s, transform .3s var(--ease), box-shadow .3s}
.nf-links a:hover{border-color:var(--blue); transform:translateY(-3px); box-shadow:var(--shadow)}
.nf-links .num{color:var(--blue-deep)}
.nf + * , main:has(.nf) + .footer{padding-top:0}
.footer-base a:hover{color:var(--blue)}
@media(max-width:760px){ .nf-links{grid-template-columns:1fr 1fr; width:100%} .nf-links a{justify-content:flex-start} }
@media(prefers-reduced-motion:reduce){ .drum-glass::before, .drum-water{animation:none} }