/* =========================================================================
   «Уровень» — ремонт под ключ. Пятая редакция: «посмотрите, как это будет».
   Светлые тёплые секции, тёмное CAD-пространство только внутри рамок сравнения.
   Шрифты локальные: Manrope (заголовки), Onest (текст), Martian Mono (CAD, числа).
   ========================================================================= */
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('fonts/manrope-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('fonts/manrope-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('fonts/manrope-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('fonts/manrope-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('fonts/manrope-rub.woff2') format('woff2');unicode-range:U+20BD,U+00B2}
@font-face{font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/onest-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/onest-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/onest-rub.woff2') format('woff2');unicode-range:U+20BD,U+00B2}
@font-face{font-family:'Martian Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url('fonts/martian-mono-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Martian Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url('fonts/martian-mono-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Martian Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url('fonts/martian-mono-rub.ttf') format('truetype');unicode-range:U+20BD,U+00B2,U+00D8,U+00B0,U+2013,U+2014,U+00B7,U+2192}

:root{
  --cream:#faf7f2; --stone:#f1ece4; --stone-2:#e7e0d5; --oak:#d9c6a8; --line:#e2dbd0; --line-2:#cdc4b6;
  --ink:#1d1b18; --ink-2:#55504a; --ink-3:#7a736a;
  --accent:#c2410c; --accent-2:#a3360a; --accent-soft:#fbe8dd; --brass:#a8823f;
  --cad:#15191e; --cad-2:#1c2127; --cad-line:#e9f3ff; --cad-line-2:#b7cee0; --cad-grid:rgba(255,255,255,.055); --cad-grid-2:rgba(255,255,255,.10);
  --l-elec:#f5d90a; --l-water:#3fa9f5; --l-heat:#ff5a5a; --l-sewer:#c39a6b; --l-vent:#4ade80; --l-dims:#9aa5b1;
  --sans:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif; --head:"Manrope",var(--sans); --mono:"Martian Mono",ui-monospace,Menlo,Consolas,monospace;
  --wrap:1280px; --gutter:clamp(16px,3.5vw,48px); --sec:clamp(72px,9vw,128px);
  --r:14px; --r-lg:24px; --r-xl:32px;
  --ease:cubic-bezier(.32,.72,0,1); --fast:160ms; --mid:320ms; --slow:700ms;
  --shadow:0 1px 2px rgba(29,27,24,.05),0 12px 40px -12px rgba(29,27,24,.18);
  --shadow-lg:0 2px 4px rgba(29,27,24,.06),0 30px 70px -20px rgba(29,27,24,.35);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-padding-top:84px}
body{margin:0;font:400 17px/1.55 var(--sans);color:var(--ink);background:var(--cream);overflow-x:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button,input{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--head);letter-spacing:-.02em;line-height:1.08;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
dl{margin:0}
.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-60px;z-index:200;padding:10px 14px;background:var(--ink);color:#fff;border-radius:10px;text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{width:min(var(--wrap),100% - 2*var(--gutter));margin-inline:auto}
.section{padding-block:var(--sec)}
.section--stone{background:var(--stone)}
.section--dark{background:var(--ink);color:#f4efe7}
.section__head{max-width:720px;margin-bottom:clamp(36px,5vw,56px)}
.section__head--center{margin-inline:auto;text-align:center}
.kicker{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.kicker::before{content:"";width:22px;height:1px;background:var(--accent)}
.section__head--center .kicker::before{display:none}
h2{font-size:clamp(30px,4vw,48px);font-weight:600}
.lead{margin-top:18px;font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--ink-2);max-width:62ch}
.section--dark .lead,.section--dark .kicker{color:#cfc7ba}
.section--dark .kicker::before{background:#e8a06f}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border:0;border-radius:999px;font:600 16px/1 var(--sans);text-decoration:none;cursor:pointer;white-space:nowrap;transition-property:transform,background-color,color,box-shadow,border-color;transition-duration:var(--fast);transition-timing-function:var(--ease)}
.btn:active{transform:scale(.97)}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn--primary{background:var(--accent);color:#fff;padding-right:8px;box-shadow:0 1px 2px rgba(0,0,0,.12),0 10px 24px -10px rgba(194,65,12,.6)}
.btn--primary:hover{background:var(--accent-2)}
.btn__i{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.18);transition:transform var(--mid) var(--ease)}
.btn--primary:hover .btn__i{transform:translate(2px,-1px)}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2)}
.btn--ghost:hover{border-color:var(--ink);background:rgba(29,27,24,.04)}
.btn--light{background:rgba(255,255,255,.92);color:var(--ink);backdrop-filter:blur(8px)}
.btn--light:hover{background:#fff}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{background:#000}
.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}

/* ---------- шапка ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background-color var(--mid) var(--ease),box-shadow var(--mid) var(--ease),color var(--mid) var(--ease)}
.nav__in{display:flex;align-items:center;gap:32px;height:72px;width:min(1400px,100% - 2*var(--gutter));margin-inline:auto}
.nav{color:#fff}
.nav.is-scrolled,.nav.is-open{background:rgba(250,247,242,.86);color:var(--ink);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(29,27,24,.08)}
.logo{display:inline-flex;align-items:center;gap:10px;font:700 20px/1 var(--head);letter-spacing:-.02em;text-decoration:none}
.logo svg{width:34px;height:20px}
.logo small{display:block;margin-top:4px;font:500 11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.nav__links{display:flex;gap:4px;margin-left:8px}
.nav__links a{padding:10px 14px;border-radius:999px;font-size:15px;font-weight:500;text-decoration:none;opacity:.86;transition:background-color var(--fast) var(--ease),opacity var(--fast)}
.nav__links a:hover,.nav__links a[aria-current="true"]{opacity:1;background:rgba(127,127,127,.16)}
.nav__right{margin-left:auto;display:flex;align-items:center;gap:20px}
.nav__phone{font:600 15px var(--sans);text-decoration:none;font-variant-numeric:tabular-nums;white-space:nowrap}
.nav .btn{min-height:44px;padding:0 20px;font-size:15px}
.nav.is-scrolled .btn--light,.nav.is-open .btn--light{background:var(--ink);color:#fff}
.burger{display:none;width:44px;height:44px;border:0;background:transparent;border-radius:12px;cursor:pointer;position:relative}
.burger i{position:absolute;left:12px;width:20px;height:2px;background:currentColor;border-radius:2px;transition:transform var(--mid) var(--ease),opacity var(--fast)}
.burger i:nth-child(1){top:17px}.burger i:nth-child(2){top:25px}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
.menu{position:fixed;inset:72px 0 0;z-index:99;background:rgba(250,247,242,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:24px var(--gutter);display:flex;flex-direction:column;gap:6px;opacity:0;transition:opacity var(--mid) var(--ease)}
.menu[hidden]{display:none}
.menu.is-open{opacity:1}
.menu a{display:block;padding:14px 12px;font:600 clamp(24px,6vw,32px)/1.1 var(--head);letter-spacing:-.02em;text-decoration:none;border-radius:12px;transform:translateY(16px);opacity:0;transition:transform var(--slow) var(--ease),opacity var(--slow) var(--ease)}
.menu.is-open a{transform:none;opacity:1}
.menu a:nth-child(2){transition-delay:40ms}.menu a:nth-child(3){transition-delay:80ms}.menu a:nth-child(4){transition-delay:120ms}.menu a:nth-child(5){transition-delay:160ms}.menu a:nth-child(6){transition-delay:200ms}
.menu .menu__phone{margin-top:auto;font:500 20px var(--sans)}
.menu .btn{margin-top:12px;align-self:flex-start}

/* ---------- сравнение «проект / готово» ---------- */
.cmp{position:relative;overflow:hidden;background:var(--cad);isolation:isolate;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.cmp__view{position:absolute;inset:0}
.cmp__view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.cmp__view--cad{background:var(--cad);clip-path:inset(0 calc(100% - var(--p,50%)) 0 0);background-image:linear-gradient(var(--cad-grid-2) 1px,transparent 1px),linear-gradient(90deg,var(--cad-grid-2) 1px,transparent 1px),linear-gradient(var(--cad-grid) 1px,transparent 1px),linear-gradient(90deg,var(--cad-grid) 1px,transparent 1px);background-size:200px 200px,200px 200px,40px 40px,40px 40px;background-position:center}
.cmp__view--cad::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.35))}
.cmp__view--cad svg{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.cmp__cap{position:absolute;top:18px;z-index:3;display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;font:500 12px/1 var(--mono);letter-spacing:.02em;white-space:nowrap;pointer-events:none}
.cmp__cap--l{left:18px;background:rgba(21,25,30,.72);color:#e9f3ff;border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px)}
.cmp__cap--r{right:18px;background:rgba(255,255,255,.82);color:var(--ink);border:1px solid rgba(255,255,255,.6);backdrop-filter:blur(6px)}
.cmp__cap{gap:0}
.cmp__cap em,.cmp__hint em,.cmp__hint b{font-style:normal;font-weight:inherit}
.only-s{display:none}
.cmp__cap i{width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--l-elec)}
.cmp__cap--r i{background:var(--accent)}
.cmp__line{position:absolute;top:0;bottom:0;left:var(--p,50%);width:2px;margin-left:-1px;background:#fff;z-index:4;box-shadow:0 0 0 1px rgba(0,0,0,.18),0 0 24px rgba(0,0,0,.35);pointer-events:none}
.cmp__handle{position:absolute;top:50%;left:var(--p,50%);z-index:5;width:64px;height:64px;margin:-32px 0 0 -32px;padding:0;border:0;border-radius:50%;background:#fff;color:var(--ink);cursor:ew-resize;display:flex;align-items:center;justify-content:center;gap:6px;box-shadow:0 0 0 6px rgba(255,255,255,.22),0 10px 30px rgba(0,0,0,.4);touch-action:none;transition:transform var(--fast) var(--ease),box-shadow var(--fast)}
.cmp__handle::before{content:"";position:absolute;inset:-12px;border-radius:50%}
.cmp__handle svg{width:12px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cmp__handle:hover{transform:scale(1.06)}
.cmp__handle:active,.cmp.is-dragging .cmp__handle{transform:scale(.96);cursor:grabbing}
.cmp__handle:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.cmp__hint{position:absolute;top:calc(50% + 46px);left:var(--p,50%);transform:translateX(-50%);z-index:5;padding:10px 14px;border-radius:999px;background:rgba(29,27,24,.78);color:#fff;font:500 13px/1.2 var(--sans);white-space:nowrap;pointer-events:none;backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.12);transition:opacity var(--slow) var(--ease)}
.cmp.is-used .cmp__hint{opacity:0}
.cmp__handle,.cmp__hint,.cmp__line{will-change:left}
.cmp.is-dragging .cmp__view--cad,.cmp.is-dragging .cmp__line,.cmp.is-dragging .cmp__handle,.cmp.is-dragging .cmp__hint{transition:none}

/* CAD-графика: чистые векторные линии */
.cadv :is(line,polyline,polygon,path,rect,circle,ellipse){fill:none;stroke:var(--cad-line);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.cadv__furn :is(line,polyline,polygon,path,rect,circle,ellipse){stroke:var(--cad-line-2);stroke-width:1.1}
.cadv__hidden{stroke-dasharray:8 6;opacity:.55}
.cadv__dash{stroke-dasharray:6 5}
.cadv__elec :is(line,polyline,rect,circle){stroke:var(--l-elec);stroke-width:1.3}
.cadv__elec circle{fill:var(--l-elec);fill-opacity:.35}
.cadv__water :is(line,polyline,circle){stroke:var(--l-water);stroke-width:1.5}
.cadv__heat path{stroke:var(--l-heat);stroke-width:1.5;stroke-opacity:.85}
.cadv__dim{stroke:var(--l-dims)!important;stroke-width:1!important}
.cadv__note text{fill:#d9e6f2;stroke:none;font:500 22px var(--mono);letter-spacing:.02em;paint-order:stroke;stroke:rgba(21,25,30,.85);stroke-width:6px;stroke-linejoin:round}
.js .cmp--draw .cadv :is(line,polyline,polygon,path,rect,circle,ellipse){stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.4s var(--ease) forwards}
.js .cmp--draw .cadv__furn *{animation-delay:.35s}
.js .cmp--draw .cadv__elec *,.js .cmp--draw .cadv__water *,.js .cmp--draw .cadv__heat *{animation-delay:.9s;animation-duration:1s}
.js .cmp--draw .cadv__note text{opacity:0;animation:fade .6s 1.6s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}
.cadv-iso{padding:6%}
.cadv-iso :is(polygon,polyline,circle,rect,line,path){fill:none;stroke-width:1;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.cadv-iso .floor{fill:#161a1f;stroke:#6d7781}.cadv-iso .floor-bal{fill:#1c2126}.cadv-iso .room-fill{fill:#20252b;stroke:none}
.cadv-iso .wall{stroke:var(--cad-line);fill:#3b434c}.cadv-iso .wall.f-top{fill:#5a636d}.cadv-iso .wall.f-front{fill:#2c3239}.cadv-iso .wall.f-end{fill:#454d56}.cadv-iso .wall.f-reveal{fill:#4a525b}.cadv-iso .wall.f-sill{fill:#5a636d}
.cadv-iso .wall-edge{stroke:#aab3bc}.cadv-iso .rail{stroke:#aab3bc;fill:#2a3037;fill-opacity:.5}
.cadv-iso .fur{stroke:#b7c0c9;fill:#2a3037}.cadv-iso .fur.f-top{fill:#39414a}.cadv-iso .fur-line{stroke:#b7c0c9}
.cadv-iso .glass{stroke:#bfe3ff;fill:#7ec8ff;fill-opacity:.12}.cadv-iso .glass-mullion{stroke:#bfe3ff}.cadv-iso .door{stroke:var(--cad-line);fill:#3a4149}
.cadv-iso .room-name{fill:#e6ebf0;font:600 32px var(--mono);paint-order:stroke;stroke:var(--cad);stroke-width:7px;stroke-linejoin:round}
.cadv-iso .room-area{fill:#aeb8c2;font:400 24px var(--mono);paint-order:stroke;stroke:var(--cad);stroke-width:6px}
.cadv-iso .el-box{stroke:var(--l-elec);fill:var(--l-elec);fill-opacity:.18}.cadv-iso .el-cable{stroke:var(--l-elec)}.cadv-iso .el-drop{stroke-dasharray:.02 .012}.cadv-iso .el-sym{stroke:var(--l-elec)}.cadv-iso .el-dot{fill:var(--l-elec);stroke:none}
.cadv-iso .wt-cold{stroke:var(--l-water)}.cadv-iso .wt-hot{stroke:var(--l-water);stroke-dasharray:.03 .018}
.cadv-iso .sw-110{stroke:var(--l-sewer);stroke-width:2.2}.cadv-iso .sw-50{stroke:var(--l-sewer)}
.cadv-iso .ht-box{stroke:var(--l-heat);fill:var(--l-heat);fill-opacity:.18}.cadv-iso .ht-loop{stroke:var(--l-heat);stroke-opacity:.85}.cadv-iso .ht-feed{stroke:var(--l-heat);stroke-width:1.6}
.cadv-iso .vt-box{stroke:var(--l-vent);fill:var(--l-vent);fill-opacity:.12}.cadv-iso .vt-duct{stroke:var(--l-vent);stroke-width:2.6}.cadv-iso .vt-sym{stroke:var(--l-vent)}
.cadv-iso .ann,.cadv-iso .dim,.cadv-iso .lay-vent,.cadv-iso .lay-sewer{display:none}

/* ---------- первый экран ---------- */
.hero{position:relative;background:var(--cad)}
.cmp--hero{height:100svh;min-height:600px;max-height:1000px}
.cmp--hero::before{content:"";position:absolute;inset:0 0 auto;height:160px;z-index:2;background:linear-gradient(rgba(10,12,14,.55),rgba(10,12,14,0));pointer-events:none}
.cmp--hero .cmp__cap{top:88px}
.hero__offer{position:absolute;left:var(--gutter);bottom:clamp(28px,5vh,56px);z-index:6;width:min(520px,44%);padding:28px 28px 24px;border-radius:var(--r-lg);background:rgba(21,25,30,.62);color:#fff;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.hero__offer h1{font-size:clamp(26px,2.6vw,38px);font-weight:600;line-height:1.1}
.hero__offer h1 em{font-style:normal;color:#ffb98a}
.hero__price{margin-top:14px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;color:#e6dfd4}
.hero__price b{font:600 22px var(--mono);letter-spacing:-.02em;color:#fff}
.hero__price small{font-size:13px;color:#cfc7ba}
.hero__cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.hero__cta .btn--ghost{color:#fff;border-color:rgba(255,255,255,.35)}
.hero__cta .btn--ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
.hero__facts{position:absolute;right:var(--gutter);bottom:clamp(28px,5vh,56px);z-index:6;display:flex;gap:8px}
.hero__facts span{padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.86);color:var(--ink);font:500 13px/1 var(--sans);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.7)}
.hero__facts b{font-family:var(--mono);font-weight:600}

/* ---------- проекты ---------- */
.tabs{display:flex;gap:6px;padding:6px;border-radius:999px;background:var(--stone);width:max-content;max-width:100%;overflow:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs [role=tab]{padding:12px 20px;border:0;border-radius:999px;background:transparent;font:600 15px/1 var(--sans);color:var(--ink-2);cursor:pointer;white-space:nowrap;transition:background-color var(--fast) var(--ease),color var(--fast),box-shadow var(--fast)}
.tabs [role=tab]:hover{color:var(--ink)}
.tabs [role=tab][aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(29,27,24,.08),0 6px 16px -8px rgba(29,27,24,.25)}
.rooms{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;align-items:start;margin-top:32px}
.room[hidden]{display:none}
.frame{padding:8px;border-radius:var(--r-xl);background:var(--stone);border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.frame .cmp{border-radius:calc(var(--r-xl) - 8px);aspect-ratio:16/10}
.frame .cmp__handle{width:52px;height:52px;margin:-26px 0 0 -26px}
.frame .cmp__hint{top:calc(50% + 40px)}
.room__info{padding:28px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);position:sticky;top:96px}
.room__info h3{font-size:24px;font-weight:600}
.room__info .area{margin-top:4px;color:var(--ink-3);font:500 13px var(--mono)}
.room__info dl{margin-top:20px;display:grid;gap:12px}
.room__info dl div{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;padding-top:12px;border-top:1px solid var(--line)}
.room__info dt{width:10px;height:10px;margin-top:6px;border-radius:50%;justify-self:center}
.room__info dt.elec{background:var(--l-elec)}.room__info dt.water{background:var(--l-water)}.room__info dt.heat{background:var(--l-heat)}.room__info dt.fin{background:var(--brass)}
.room__info dd{margin:0;font-size:15px;line-height:1.45}
.room__info dd b{display:block;font-weight:600}
.room__info dd span{color:var(--ink-2)}
.room__info .fine{margin-top:18px;font-size:12px;color:var(--ink-3)}

/* ---------- 7 шагов ---------- */
.steps{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;counter-reset:step}
.steps li{position:relative;padding:22px 18px 20px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);counter-increment:step;display:flex;flex-direction:column;gap:12px;min-height:250px}
.steps li::before{content:"0" counter(step);font:600 12px var(--mono);color:var(--ink-3);letter-spacing:.06em}
.steps .ic{width:44px;height:44px;border-radius:14px;background:var(--stone);display:grid;place-items:center}
.steps .ic svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.steps h3{font-size:17px;font-weight:600;line-height:1.2}
.steps p{font-size:14px;line-height:1.45;color:var(--ink-2)}
.steps .dur{margin-top:auto;padding-top:12px;font:500 12px var(--mono);color:var(--accent);border-top:1px dashed var(--line)}
.steps__total{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;color:var(--ink-2);font-size:15px}
.steps__total b{font:600 18px var(--mono);color:var(--ink)}

/* ---------- что вы получаете ---------- */
.gets{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.gets ul{display:grid;gap:6px}
.gets li{display:grid;grid-template-columns:48px 1fr;gap:18px;align-items:start;padding:18px 0;border-top:1px solid var(--line)}
.gets li:last-child{border-bottom:1px solid var(--line)}
.gets .ic{width:48px;height:48px;border-radius:16px;background:#fff;border:1px solid var(--line);display:grid;place-items:center}
.gets .ic svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.gets h3{font-size:18px;font-weight:600}
.gets p{margin-top:4px;font-size:15px;color:var(--ink-2)}
.sheet{padding:10px;border-radius:var(--r-lg);background:var(--stone-2);transform:rotate(-1.5deg)}
.sheet__paper{position:relative;padding:18px 18px 44px;border-radius:calc(var(--r-lg) - 10px);background:#fff;box-shadow:var(--shadow-lg);border:1px solid var(--line)}
.sheet__paper::before{content:"";position:absolute;inset:8px;border:1px solid var(--ink);pointer-events:none}
.sheet__paper svg{width:100%;height:auto;aspect-ratio:1160/970}
.sheet__stamp{position:absolute;right:16px;bottom:16px;left:16px;display:flex;justify-content:space-between;gap:12px;padding:6px 10px;border-top:1px solid var(--ink);font:500 10px var(--mono);letter-spacing:.04em;color:var(--ink-2)}
.cad-plan :is(polygon,polyline,circle,path,line){fill:none;stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke}
.cad-plan .p-wall{fill:#2b2f36;stroke:#111}.cad-plan .p-win{fill:#fff;stroke:#111}.cad-plan .p-win-l{stroke:#111}.cad-plan .p-door{stroke:#111}.cad-plan .p-fur{stroke:#8a8378;stroke-width:.8}
.cad-plan .p-name{font:600 26px var(--mono);fill:var(--ink)}.cad-plan .p-area{font:400 22px var(--mono);fill:var(--ink-2)}
.cad-plan .p-dim line{stroke:var(--ink-2)}.cad-plan .p-dim text{font:400 22px var(--mono);fill:var(--ink)}
.cad-plan .p-axis circle{stroke:var(--ink-2)}.cad-plan .p-axis text{font:400 22px var(--mono);fill:var(--ink)}.cad-plan .p-axis line{stroke:var(--ink-2)}
.cad-plan .p-el-box{fill:#f5d90a;stroke:#111}.cad-plan .p-el-cable{stroke:#b8860b;stroke-dasharray:.012 .006;stroke-width:1.4}.cad-plan .p-el-sym{stroke:#7a5c00;stroke-width:1.4}.cad-plan .p-el-t{font:400 20px var(--mono);fill:#7a5c00}
.cad-plan .lay-water,.cad-plan .lay-heat,.cad-plan .lay-vent,.cad-plan .lay-finish,.cad-plan .lay-sewer{display:none}

/* ---------- галерея ---------- */
.gallery{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:220px;gap:14px}
.gallery figure{position:relative;margin:0;overflow:hidden;border-radius:var(--r-lg);background:var(--stone-2)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.gallery figure:hover img{transform:scale(1.03)}
.gallery figcaption{position:absolute;left:14px;bottom:14px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.86);backdrop-filter:blur(8px);font:500 12px/1 var(--sans);color:var(--ink)}
.gallery .g1{grid-column:span 7;grid-row:span 2}.gallery .g2{grid-column:span 5;grid-row:span 2}.gallery .g3{grid-column:span 4;grid-row:span 2}.gallery .g4{grid-column:span 4;grid-row:span 2}.gallery .g5{grid-column:span 4;grid-row:span 2}

/* ---------- калькулятор ---------- */
.calc{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start}
.calc>*{min-width:0}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.calc form.panel{padding:clamp(20px,3vw,36px)}
.calc__prog{display:flex;gap:4px;margin-bottom:24px;overflow:auto;scrollbar-width:none;padding-bottom:2px}
.calc__prog::-webkit-scrollbar{display:none}
.calc__prog li{flex:1 0 auto}
.calc__prog button{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px 8px 8px;border:0;border-radius:999px;background:transparent;font:500 13px var(--sans);color:var(--ink-3);cursor:pointer;white-space:nowrap}
.calc__prog button i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--stone);font:600 11px var(--mono);font-style:normal;color:var(--ink-2)}
.calc__prog .is-done button{color:var(--ink)}
.calc__prog .is-done button i{background:var(--ink);color:#fff}
.calc__prog .is-active button{background:var(--accent-soft);color:var(--ink)}
.calc__prog .is-active button i{background:var(--accent);color:#fff}
.calc__prog button:disabled{cursor:default}
.calc__title{font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.step-panel h3{font-size:clamp(22px,2.4vw,28px);font-weight:600}
.hint{margin-top:8px;color:var(--ink-2);font-size:15px}
.opts{display:grid;gap:10px;margin-top:22px}
.opt{display:grid;grid-template-columns:22px 1fr auto;gap:14px;align-items:center;width:100%;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:#fff;text-align:left;cursor:pointer;transition:border-color var(--fast),background-color var(--fast),box-shadow var(--fast)}
.opt:hover{border-color:var(--line-2);background:var(--cream)}
.opt[aria-checked="true"]{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.opt__c{width:20px;height:20px;border-radius:50%;border:2px solid var(--line-2);position:relative}
.opt[role=checkbox] .opt__c{border-radius:6px}
.opt[aria-checked="true"] .opt__c{border-color:var(--accent);background:var(--accent)}
.opt[aria-checked="true"] .opt__c::after{content:"";position:absolute;inset:4px;border-radius:50%;background:#fff}
.opt[role=checkbox][aria-checked="true"] .opt__c::after{border-radius:2px}
.opt__b b{display:block;font-weight:600}
.opt__b span{display:block;font-size:14px;color:var(--ink-2);margin-top:2px}
.opt__r{font:500 13px var(--mono);color:var(--ink-2);white-space:nowrap}
.area{margin-top:28px}
.area output{display:block;font:600 clamp(44px,6vw,64px)/1 var(--head);letter-spacing:-.03em;margin-bottom:22px;font-variant-numeric:tabular-nums}
.area output small{font-size:.4em;font-weight:500;color:var(--ink-3)}
.range{-webkit-appearance:none;appearance:none;width:100%;height:44px;margin:0;background:transparent;cursor:pointer}
.range::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--accent) var(--p,30%),var(--stone-2) var(--p,30%))}
.range::-moz-range-track{height:6px;border-radius:3px;background:var(--stone-2)}
.range::-moz-range-progress{height:6px;border-radius:3px;background:var(--accent)}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-11px;border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:0 2px 8px rgba(0,0,0,.18)}
.range::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:0 2px 8px rgba(0,0,0,.18)}
.range__ticks{display:flex;justify-content:space-between;font:500 12px var(--mono);color:var(--ink-3);margin-top:4px}
.result{margin-top:24px}
.result__big{padding:24px;border-radius:18px;background:var(--ink);color:#fff}
.cap{font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.result__big .cap{color:#bdb5a8}
.result__big output{display:block;margin-top:8px;font:600 clamp(26px,3.4vw,40px)/1.1 var(--head);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.result__meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:12px;font-size:14px;color:#cfc7ba}
.result__meta b{color:#fff;font-weight:600}
.breakdown{margin-top:14px;display:grid}
.breakdown div{display:flex;justify-content:space-between;gap:16px;padding:12px 4px;border-bottom:1px solid var(--line);font-size:15px}
.breakdown div:last-child{border-bottom:0;font-weight:600}
.breakdown dt{color:var(--ink-2)}.breakdown div:last-child dt{color:var(--ink)}
.breakdown dd{margin:0;white-space:nowrap}
.result__note{margin-top:12px;font-size:13px;color:var(--ink-3)}
.fields{display:grid;gap:16px;margin-top:22px;max-width:520px}
.field label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.field input{width:100%;height:52px;padding:0 16px;border:1px solid var(--line-2);border-radius:14px;background:#fff;transition:border-color var(--fast),box-shadow var(--fast)}
.field input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field.has-error input{border-color:#b42318}
.err{display:block;margin-top:6px;font-size:13px;color:#b42318}
.consent{margin-top:14px;font-size:13px;color:var(--ink-3);max-width:520px}
.calc__nav{display:flex;justify-content:space-between;gap:12px;margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.done{text-align:center;padding:12px 0}
.done__ic{width:64px;height:64px;margin:0 auto 18px;border-radius:50%;background:var(--accent-soft);display:grid;place-items:center}
.done__ic svg{width:28px;height:28px;fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.done h3{font-size:26px;font-weight:600}
.done p{margin-top:10px;color:var(--ink-2)}
.done dl{margin:22px auto 0;max-width:460px;text-align:left;border-top:1px solid var(--line)}
.done dl div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.done dt{color:var(--ink-2)}.done dd{margin:0;font-weight:500;text-align:right}
.done .btn{margin-top:22px}
.summary{padding:24px;position:sticky;top:96px}
.summary__head{display:flex;flex-direction:column;gap:2px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.summary__head span{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.summary__head b{font-size:17px;font-weight:600}
.summary dl div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.summary dt{color:var(--ink-2)}.summary dd{margin:0;text-align:right;font-weight:500}
.summary__price{margin-top:18px;padding:18px;border-radius:14px;background:var(--stone)}
.summary__price output{display:block;margin-top:6px;font:600 22px/1.2 var(--head);letter-spacing:-.02em}
.summary__price .wk{margin-top:4px;font-size:13px;color:var(--ink-2)}
.summary__note{margin-top:14px;font-size:12px;color:var(--ink-3);line-height:1.5}

/* ---------- гарантии / отзывы ---------- */
.why{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.why li{padding:24px;border-radius:var(--r-lg);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.why b{display:block;font:500 12px var(--mono);color:#e8a06f;letter-spacing:.08em}
.why h3{margin-top:12px;font-size:19px;font-weight:600;color:#fff}
.why p{margin-top:8px;font-size:15px;color:#cfc7ba}
.reviews{margin-top:40px;padding:28px;border-radius:var(--r-lg);border:1px dashed rgba(255,255,255,.25)}
.reviews__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px}
.reviews__head h3{font-size:22px;font-weight:600;color:#fff}
.reviews__head span{font-size:14px;color:#bdb5a8}
.reviews ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:20px}
.reviews li{padding:18px;border-radius:16px;background:rgba(255,255,255,.05)}
.stars{color:#e8a06f;letter-spacing:.1em;font-size:14px}
.reviews li b{display:block;margin-top:8px;font-size:15px;color:#fff}
.reviews li p{margin-top:6px;font-size:14px;color:#cfc7ba}

/* ---------- вопросы ---------- */
.faq{max-width:820px;margin-inline:auto;display:grid;gap:8px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;font-weight:600;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 12px;width:12px;height:12px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg) translate(-2px,-2px);transition:transform var(--mid) var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.faq details p{padding:0 22px 20px;color:var(--ink-2);font-size:15px;line-height:1.55}

/* ---------- контакты ---------- */
.contacts{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px;align-items:stretch}
.contacts__card{padding:32px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.contacts dl{display:grid;gap:14px;margin:26px 0 28px}
.contacts dl div{display:grid;grid-template-columns:120px 1fr;gap:12px;font-size:15px;padding-top:14px;border-top:1px solid var(--line)}
.contacts dt{color:var(--ink-3)}.contacts dd{margin:0;font-weight:500}
.contacts dd a{text-decoration:none}
.contacts dd a:hover{text-decoration:underline}
.map{position:relative;min-height:340px;border-radius:var(--r-lg);overflow:hidden;background:var(--stone);border:1px solid var(--line)}
.map svg{position:absolute;inset:0;width:100%;height:100%}
.map .road{stroke:#fff;stroke-width:1.2;fill:none}
.map .bld{fill:#e2dbd0;stroke:#cdc4b6}
.map .lbl{font:600 12px var(--sans);fill:var(--ink)}
.map svg circle{stroke:var(--accent);stroke-width:2}
.map__cap{position:absolute;left:14px;bottom:14px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.86);font:500 12px var(--mono);color:var(--ink-2)}

/* ---------- подвал ---------- */
.foot{padding:40px 0 32px;background:var(--stone);border-top:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.foot__in{display:flex;flex-wrap:wrap;align-items:center;gap:20px 36px}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 18px}
.foot nav a{text-decoration:none}.foot nav a:hover{text-decoration:underline}
.foot__in>span{margin-left:auto}
.foot__demo{margin-top:22px;font-size:12px;color:var(--ink-3)}

/* ---------- плашка «← KODOR CODE · демо» ---------- */
.demo-pill{position:fixed;right:16px;bottom:16px;z-index:110;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border:1px solid var(--accent);border-radius:999px;background:var(--accent-soft);color:var(--accent-2);font:600 12px var(--mono);text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.1);transition:background-color var(--fast) var(--ease)}
.demo-pill:hover{background:#f7d8c4}
.demo-pill__tag{font-weight:400;color:var(--ink-3)}

/* ---------- появление ---------- */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}

/* ---------- адаптив ---------- */
@media (max-width:1180px){
  .steps{grid-template-columns:repeat(4,minmax(0,1fr))}
  .steps li{min-height:0}
  .why{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1100px){
  .nav__links,.nav__phone{display:none}
  .burger{display:block}
  .nav__right{gap:8px}
  .rooms{grid-template-columns:1fr}
  .room__info{position:static}
  .calc{grid-template-columns:1fr}
  .summary{position:static}
  .gets{grid-template-columns:1fr}
  .sheet{max-width:560px;transform:none}
  .contacts{grid-template-columns:1fr}
}
@media (min-width:1101px){.menu{display:none!important}}
@media (max-width:900px){
  .cmp--hero{height:60svh;min-height:420px;max-height:640px}
  .hero__offer{position:static;width:auto;border-radius:0;border:0;background:var(--cad);box-shadow:none;padding:28px var(--gutter) 36px;backdrop-filter:none}
  .hero__offer h1{font-size:clamp(24px,6.4vw,30px)}
  .hero__cta{gap:8px}
  .hero__cta .btn{min-height:48px;padding:0 16px;font-size:15px;flex:1 1 auto}
  .hero__cta .btn--primary{padding-right:6px}
  .cmp__cap{top:12px;font-size:11px;padding:7px 10px;backdrop-filter:none;-webkit-backdrop-filter:none}
  .cmp__cap em,.cmp__hint em{display:none}
  .only-s{display:inline;font-weight:inherit}
  .cmp__cap--l{left:12px}.cmp__cap--r{right:12px}
  .cmp--hero .cmp__cap{top:76px}
  .cmp__hint{top:calc(50% + 46px);padding:8px 12px;font-size:12px;white-space:nowrap;backdrop-filter:none;-webkit-backdrop-filter:none}
  .cmp__handle{box-shadow:0 4px 16px rgba(0,0,0,.35)}
  .sheet__paper{padding-bottom:54px}
  .sheet__stamp{flex-wrap:wrap;gap:2px 12px}
  .sheet__stamp span:first-child{display:none}
  .cmp--hero{height:56svh;min-height:400px}
  .hero__offer{padding:22px var(--gutter) 28px}
  .cmp__cap--l{left:12px}.cmp__cap--r{right:12px}
  .cmp--hero .cmp__handle{width:68px;height:68px;margin:-34px 0 0 -34px}
  .cadv__note{display:none}
  .frame{padding:6px;border-radius:24px}
  .frame .cmp{aspect-ratio:4/3;border-radius:18px}
  .gallery{grid-auto-rows:160px}
  .gallery .g1,.gallery .g2,.gallery .g3,.gallery .g4,.gallery .g5{grid-column:span 6}
  .reviews ul{grid-template-columns:1fr}
}
@media (max-width:640px){
  .steps{grid-template-columns:1fr 1fr}
  .why{grid-template-columns:1fr}
  .gallery{grid-auto-rows:200px}
  .gallery .g1,.gallery .g2,.gallery .g3,.gallery .g4,.gallery .g5{grid-column:span 12}
  .calc__nav{flex-direction:column-reverse}
  .calc__nav .btn{width:100%}
  .contacts dl div{grid-template-columns:1fr}
  .foot__in>span{margin-left:0}
  .nav__in{height:64px}
  .menu{inset:64px 0 0}
  html{scroll-padding-top:72px}
  .demo-pill{right:12px;bottom:12px;height:40px}
}
@media (max-width:420px){
  .steps{grid-template-columns:1fr}
  .btn{white-space:normal;text-align:center;line-height:1.2;padding-block:8px}
  .opt{grid-template-columns:22px 1fr;row-gap:6px}
  .opt__r{grid-column:2;white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .js .cmp--draw .cadv :is(line,polyline,polygon,path,rect,circle,ellipse),.js .cmp--draw .cadv__note text{animation:none;stroke-dasharray:none;stroke-dashoffset:0;opacity:1}
  .cmp__handle,.cmp__hint,.gallery img,.menu,.menu a,.btn,.btn__i{transition:none}
}

/* Кнопка «← KODOR CODE · демо» — во всех демо справа вверху; здесь под шапкой, чтобы не закрывать её кнопки (30.09.2026) */
.demo-pill{top:82px;right:12px;bottom:auto;left:auto}

/* Стандарт кнопки «← KODOR CODE · демо» во всех демо (30.09.2026): справа вверху, отступ 16px, высота 40px, шрифт от 11px; оформление — своё у каждого демо */
.demo-pill{right:16px;height:40px}