/* ===== Демо-сайты ниш (телефон на первом экране + полноэкранный просмотр) ===== */
.ns{--bg:#fff;--fg:#111;--sub:rgba(0,0,0,.6);--acc:#e51813;--accf:#fff;--card:#f4f4f2;--line:rgba(0,0,0,.12);--fd:"Dela Gothic One",sans-serif;--fb:"Onest",system-ui,sans-serif;--rad:22px;
  background:var(--bg);color:var(--fg);font:400 15px/1.5 var(--fb);min-height:100%;position:relative;overflow:hidden;-webkit-font-smoothing:antialiased}
.ns *{box-sizing:border-box}
.ns h1,.ns h2,.ns p,.ns figure,.ns blockquote{margin:0}
:where(.ns) button{font:inherit;color:inherit;cursor:pointer}
.ns-top{position:relative;z-index:3;display:flex;align-items:center;gap:10px;padding:46px 22px 14px}
.ns-logo{font:400 22px/1 var(--fd);letter-spacing:-.01em}
.ns-kind{font:500 11px/1.2 var(--fb);opacity:.6;max-width:120px}
.ns-burger{margin-left:auto;width:38px;height:38px;border-radius:50%;display:grid;place-content:center;gap:5px;border:1.5px solid var(--line)}
.ns-burger i{display:block;width:14px;height:1.8px;background:currentColor;border-radius:2px}
.ns-hero{position:relative;padding:8px 22px 30px;display:grid;gap:22px}
.h-kick{display:inline-flex;align-items:center;gap:8px;font:600 11px/1 "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.h-kick::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--acc)}
.h-title{font:400 44px/.98 var(--fd);letter-spacing:-.02em;margin:14px 0 14px!important}
.h-title em{font-style:normal;color:var(--acc)}
.h-sub{font-size:15px;line-height:1.5;color:var(--sub);max-width:42ch}
.h-cta{display:inline-flex;align-items:center;gap:12px;margin-top:20px;padding:16px 22px;border-radius:999px;background:var(--acc);color:var(--accf);font:700 15px var(--fb);text-decoration:none;box-shadow:0 18px 30px -16px var(--acc)}
.h-cta span{transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.h-cta:hover span{transform:translateX(5px)}
.h-art{position:relative;height:340px}
.h-img{position:absolute;inset:0;background:center 30%/cover;border-radius:var(--rad)}
.h-obj{position:absolute;width:118px;height:118px;right:-6px;bottom:-22px;border-radius:26px;background:center/cover;box-shadow:0 20px 34px -16px rgba(0,0,0,.5);animation:nsBob 6s ease-in-out infinite}
@keyframes nsBob{50%{transform:translateY(-10px) rotate(4deg)}}
.h-badge{position:absolute;left:14px;bottom:14px;display:grid;padding:10px 14px;border-radius:16px;background:var(--bg);color:var(--fg);font:400 20px/1 var(--fd);box-shadow:0 14px 30px -14px rgba(0,0,0,.45)}
.h-badge small{font:600 11px/1.3 var(--fb);opacity:.65;margin-top:4px}
.ns-tick{overflow:hidden;white-space:nowrap;border-block:1.5px solid var(--line);padding:12px 0;font:600 13px/1 "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase}
.ns-tick>div{display:inline-flex;animation:nsTick 26s linear infinite}
.ns-tick span{padding-right:0}
@keyframes nsTick{to{transform:translateX(-50%)}}
.ns-sec{padding:34px 22px 0}
.ns-sec h2{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font:400 30px/1 var(--fd);letter-spacing:-.015em;margin-bottom:18px}
.ns-sec h2 span{font:600 11px "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;opacity:.55}
.ns-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ns-feats div{padding:14px 12px;border-radius:calc(var(--rad) - 6px);background:var(--card)}
.ns-feats b{display:block;font:400 22px/1 var(--fd)}
.ns-feats span{display:block;font-size:12px;line-height:1.3;opacity:.7;margin-top:6px}
.ns-row{display:grid;grid-template-columns:34px auto 1fr auto;align-items:baseline;gap:10px;padding:15px 0;border-bottom:1.5px solid var(--line)}
.ns-row .n{font:600 12px "JetBrains Mono",monospace;opacity:.5}
.ns-row b{font:600 18px/1.2 var(--fb)}
.ns-row i{border-bottom:2px dotted var(--line);transform:translateY(-4px)}
.ns-row .p{font:600 16px "JetBrains Mono",monospace;color:var(--acc)}
.ns-form{position:relative;padding:20px;border-radius:var(--rad);background:var(--card);overflow:hidden}
.ns-l{font:600 11px "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;opacity:.55;margin:14px 0 8px}
.ns-l:first-child{margin-top:0}
.ns-chips{display:flex;flex-wrap:wrap;gap:7px}
.ns-chip{border:1.5px solid var(--line);background:transparent;border-radius:999px;padding:9px 14px;font:600 13.5px var(--fb)!important;display:inline-flex;flex-direction:column;align-items:flex-start;transition:background-color .35s,color .35s,border-color .35s,transform .35s cubic-bezier(.34,1.56,.64,1)}
.ns-chip small{font:500 11px "JetBrains Mono",monospace;opacity:.7}
.ns-chip.on{background:var(--acc);border-color:var(--acc);color:var(--accf)}
.ns-chip:active{transform:scale(.94)}
.ns-go{width:100%;margin-top:18px;border:0;border-radius:16px;padding:16px;background:var(--fg);color:var(--bg);font:700 15px var(--fb)!important;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.ns-go:active{transform:scale(.97)}
.ns-ok{position:absolute;inset:0;background:var(--acc);color:var(--accf);display:grid;place-content:center;justify-items:center;gap:8px;text-align:center;padding:20px}
.ns-ok[hidden]{display:none}
.ns-ck{width:64px;height:64px;border-radius:50%;background:var(--accf);color:var(--acc);display:grid;place-items:center;font:800 30px var(--fb)}
.ns-ok b{font:400 26px/1.1 var(--fd)}
.ns-ok small{opacity:.75;font-size:12px}
.ns-gal{display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:auto auto;gap:10px}
.ns-gal figure{position:relative}
.ns-gal figure div{height:180px;border-radius:calc(var(--rad) - 4px);background:center/cover}
.ns-gal figure:first-child{grid-row:span 2}
.ns-gal figure:first-child div{height:100%;min-height:370px}
.ns-gal figcaption{position:absolute;left:10px;bottom:10px;padding:5px 10px;border-radius:99px;background:rgba(0,0,0,.55);color:#fff;font:600 11px var(--fb);backdrop-filter:blur(6px)}
.ns-rev blockquote{padding:18px;border-radius:var(--rad);background:var(--card);margin-bottom:10px}
.ns-rev .st{color:var(--acc);letter-spacing:2px;font-size:14px}
.ns-rev p{margin:8px 0 10px;font-size:15.5px;line-height:1.45}
.ns-rev cite{font:600 12px var(--fb);font-style:normal;opacity:.6}
.ns-map{position:relative;height:170px;border-radius:var(--rad);background:var(--card);overflow:hidden}
.ns-map i{position:absolute;background:var(--line)}
.ns-map i:nth-child(1){left:-10%;right:-10%;top:42%;height:14px;transform:rotate(-8deg)}
.ns-map i:nth-child(2){top:-10%;bottom:-10%;left:38%;width:12px;transform:rotate(12deg)}
.ns-map i:nth-child(3){left:-10%;right:-10%;top:75%;height:8px;transform:rotate(5deg)}
.ns-map .pin{position:absolute;left:46%;top:24%;width:46px;height:46px;border-radius:50%;background:var(--acc);color:var(--accf);display:grid;place-items:center;box-shadow:0 0 0 10px color-mix(in srgb,var(--acc) 25%,transparent);animation:nsPin 2.2s ease-in-out infinite}
.ns-map .pin svg{width:24px;height:24px}
@keyframes nsPin{50%{box-shadow:0 0 0 18px color-mix(in srgb,var(--acc) 0%,transparent);transform:translateY(-4px)}}
.ns-addr{display:grid;margin:14px 0}
.ns-addr b{font:600 17px var(--fb)}
.ns-addr span{opacity:.65;font-size:14px}
.ns-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ns-msg{display:flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:14px;padding:13px 6px;background:var(--card);font:600 13px var(--fb)!important}
.ns-msg:first-child{background:var(--acc);color:var(--accf)}
.ns-msg svg{width:16px;height:16px}
.ns-foot{margin-top:40px;padding:26px 22px 40px;display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1.5px solid var(--line)}
.ns-foot b{font:400 20px var(--fd)}
.ns-foot span{font:600 11px "JetBrains Mono",monospace;opacity:.5;letter-spacing:.06em;text-align:right}

/* ----- 1. Кофейня «Зерно»: тёплая редакция, арка, бумага ----- */
.t-coffee{--bg:#f6efe4;--fg:#2b1d14;--sub:#6e5a4a;--acc:#d6331f;--card:#efe3d1;--line:rgba(43,29,20,.18);--fd:"Playfair Display",Georgia,serif;--rad:20px}
.t-coffee .ns-logo{font-size:28px;font-style:italic}
.t-coffee .h-title{font-size:46px;line-height:1;font-style:italic}
.t-coffee .h-art{height:360px}
.t-coffee .h-img{border-radius:220px 220px 22px 22px}
.t-coffee .h-obj{border-radius:50%;width:112px;height:112px;right:4px;bottom:-14px;border:5px solid var(--bg)}
.t-coffee .h-cta{border-radius:999px;box-shadow:5px 5px 0 var(--fg)}
.t-coffee .ns-tick{background:var(--fg);color:var(--bg);border:0}
.t-coffee .ns-row b{font:700 19px var(--fd)}
.t-coffee::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(43,29,20,.05) 1px,transparent 1px);background-size:5px 5px}

/* ----- 2. Барбершоп «БРИТВА»: ночь, сталь, полосатый шест ----- */
.t-barber{--bg:#0c0c0e;--fg:#f2ede4;--sub:#a6a29b;--acc:#2558ff;--card:#17171b;--line:rgba(242,237,228,.14);--fd:"Russo One",Impact,sans-serif;--rad:4px}
.t-barber .ns-logo{font-size:26px;letter-spacing:.04em}
.t-barber .h-title{font-size:41px;line-height:.98;text-transform:uppercase}
.t-barber .h-title em{color:transparent;-webkit-text-stroke:1.5px var(--fg)}
.t-barber .h-img{filter:grayscale(1) contrast(1.15);border-radius:4px}
.t-barber .h-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(37,88,255,.55));mix-blend-mode:screen}
.t-barber .h-obj{border-radius:4px;width:38px;height:150px;right:14px;top:-20px;bottom:auto;background:repeating-linear-gradient(135deg,#d52b2b 0 14px,#fff 14px 28px,#2558ff 28px 42px,#fff 42px 56px);background-size:100% 80px;animation:nsPole 1.2s linear infinite;box-shadow:0 0 0 4px #0c0c0e,0 0 0 6px #555}
@keyframes nsPole{to{background-position:0 80px}}
.t-barber .h-cta{border-radius:4px;text-transform:uppercase;letter-spacing:.06em;box-shadow:none}
.t-barber .ns-tick{color:var(--acc);border-color:var(--acc)}
.t-barber .ns-row b{font:400 17px var(--fd);text-transform:uppercase;letter-spacing:.04em}
.t-barber .ns-chip,.t-barber .ns-go,.t-barber .ns-msg{border-radius:3px}
.t-barber .ns-gal figure div{filter:grayscale(.6)}

/* ----- 3. Автосервис «ГАРАЖ 24»: жёлтый, разметка, моноширинный ----- */
.t-auto{--bg:#fde101;--fg:#111;--sub:#3b3612;--acc:#111;--accf:#fde101;--card:#f0d400;--line:rgba(0,0,0,.22);--fd:"Rubik Mono One",Impact,sans-serif;--rad:0px}
.t-auto .ns-top{border-bottom:3px solid #111}
.t-auto .ns-logo{font-size:20px}
.t-auto .h-title{font-size:32px;line-height:1.22;text-transform:uppercase}
.t-auto .h-title em{background:#111;color:#fde101;padding:0 6px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.t-auto .h-art{height:310px}
.t-auto .h-img{border:4px solid #111;border-radius:0;filter:contrast(1.05)}
.t-auto .h-art::before{content:"БОКС 03";position:absolute;z-index:2;left:-4px;top:-14px;padding:6px 10px;background:#111;color:#fde101;font:400 12px var(--fd)}
.t-auto .h-art::after{content:"";position:absolute;left:0;right:0;bottom:-26px;height:16px;background:repeating-linear-gradient(-45deg,#111 0 14px,#fde101 14px 28px);animation:nsHaz 1.2s linear infinite;background-size:40px 100%}
@keyframes nsHaz{to{background-position:40px 0}}
.t-auto .h-obj{border-radius:0;border:4px solid #111;right:14px;bottom:auto;top:20px;width:96px;height:96px}
.t-auto .h-cta{border-radius:0;box-shadow:6px 6px 0 #fff}
.t-auto .h-badge{border-radius:0;border:3px solid #111;background:#fde101}
.t-auto .ns-tick{background:#111;color:#fde101;border:0}
.t-auto .ns-row b{font:400 15px var(--fd);text-transform:uppercase}
.t-auto .ns-feats div,.t-auto .ns-form,.t-auto .ns-rev blockquote,.t-auto .ns-map{border:3px solid #111;background:#fde101}
.t-auto .ns-chip,.t-auto .ns-go,.t-auto .ns-msg{border-radius:0}

/* ----- 4. Клиника «Улыбка»: воздух, мята, мягкие формы ----- */
.t-clinic{--bg:#f3fcf8;--fg:#0e3b36;--sub:#4c726b;--acc:#12a17a;--card:#ffffff;--line:rgba(14,59,54,.12);--fd:Nunito,"Trebuchet MS",sans-serif;--rad:28px}
.t-clinic .ns-logo{font:800 26px var(--fd)}
.t-clinic .h-title{font:800 42px/1.02 var(--fd)}
.t-clinic .h-img{border-radius:50% 50% 34px 34px / 40% 40% 34px 34px}
.t-clinic .h-art::before{content:"";position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(circle at 50% 40%,rgba(18,161,122,.18),transparent 65%)}
.t-clinic .h-obj{border-radius:50%;border:6px solid #fff;background-color:#c9f0de}
.t-clinic .h-cta{box-shadow:0 18px 34px -14px rgba(18,161,122,.6)}
.t-clinic .h-badge{border-radius:20px}
.t-clinic .ns-tick{border:0;background:#dff5ec;color:var(--acc)}
.t-clinic .ns-feats div,.t-clinic .ns-form,.t-clinic .ns-rev blockquote{box-shadow:0 14px 34px -22px rgba(14,59,54,.35)}

/* ----- 5. Фитнес «пульс»: чёрный, лайм, линия пульса ----- */
.t-fit{--bg:#0a0a0b;--fg:#fff;--sub:#a3a3a8;--acc:#c6ff3d;--accf:#0a0a0b;--card:#161618;--line:rgba(255,255,255,.12);--fd:"Montserrat Alternates",Verdana,sans-serif;--rad:18px}
.t-fit .ns-logo{font-size:26px;text-transform:lowercase;color:var(--acc)}
.t-fit .h-title{font-size:40px;line-height:1;text-transform:uppercase}
.t-fit .h-img{border-radius:18px;filter:saturate(1.2)}
.t-fit .h-img::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(0deg,rgba(198,255,61,.35),transparent 55%);mix-blend-mode:screen}
.t-fit .h-art::after{content:"";position:absolute;left:-22px;right:-22px;top:46%;height:70px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40'%3E%3Cpath d='M0 20h60l8-16 10 32 10-28 7 12h105' fill='none' stroke='%23c6ff3d' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 0 50%/200px 40px repeat-x;animation:nsPulse 2.4s linear infinite;mix-blend-mode:screen}
@keyframes nsPulse{to{background-position:200px 50%}}
.t-fit .h-obj{border-radius:50%;background-color:var(--acc)}
.t-fit .h-badge{background:var(--acc);color:#0a0a0b}
.t-fit .ns-tick{background:var(--acc);color:#0a0a0b;border:0}
.t-fit .ns-row b{text-transform:uppercase;font:800 15px var(--fd)}
.t-fit .ns-go{background:var(--acc);color:#0a0a0b}

/* ----- 6. Цветы «Пион»: пудровый, курсив, полароид ----- */
.t-flowers{--bg:#fff3f7;--fg:#3a1f26;--sub:#7e5a63;--acc:#d93a72;--card:#ffe1eb;--line:rgba(58,31,38,.14);--fd:"Cormorant Garamond",Georgia,serif;--rad:4px}
.t-flowers .ns-logo{font:italic 600 32px/1 var(--fd)}
.t-flowers .h-title{font:italic 600 48px/.95 var(--fd);letter-spacing:-.01em}
.t-flowers .h-art{height:350px}
.t-flowers .h-img{inset:6px 30px 40px 6px;border:10px solid #fff;border-bottom-width:46px;border-radius:2px;transform:rotate(-4deg);box-shadow:0 26px 40px -22px rgba(58,31,38,.5)}
.t-flowers .h-art::before{content:"";position:absolute;z-index:2;left:40%;top:-2px;width:90px;height:26px;background:rgba(255,255,255,.65);transform:rotate(-8deg)}
.t-flowers .h-obj{border-radius:50%;right:2px;bottom:6px;width:120px;height:120px;border:6px solid #fff}
.t-flowers .h-cta{border-radius:999px;font:italic 600 19px var(--fd);box-shadow:none;border:1.5px solid var(--acc)}
.t-flowers .ns-tick{font:italic 600 18px var(--fd);text-transform:none;letter-spacing:0}
.t-flowers .ns-sec h2{font:italic 600 34px var(--fd)}
.t-flowers .ns-row b{font:italic 600 21px var(--fd)}
.t-flowers .ns-feats b{font:italic 600 26px var(--fd)}

/* ----- 7. База отдыха «Сосны»: лес, золото, рамка ----- */
.t-hotel{--bg:#12301f;--fg:#f3ead7;--sub:#bdb39c;--acc:#f0b85a;--accf:#12301f;--card:#1b4230;--line:rgba(243,234,215,.16);--fd:"Playfair Display",Georgia,serif;--rad:10px}
.t-hotel .ns-logo{font-size:28px;letter-spacing:.02em}
.t-hotel .h-title{font-size:42px;line-height:1.02}
.t-hotel .h-img{border-radius:999px 999px 10px 10px;outline:1.5px solid var(--acc);outline-offset:8px}
.t-hotel .h-obj{border-radius:50%;border:4px solid var(--acc)}
.t-hotel .h-cta{border-radius:10px}
.t-hotel .h-badge{background:var(--acc);color:var(--accf)}
.t-hotel .ns-tick{color:var(--acc)}
.t-hotel::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(1200px 500px at 80% -10%,rgba(240,184,90,.12),transparent 60%)}

/* ----- 8. Школа «Пятёрка»: тетрадь в клетку, стикеры ----- */
.t-school{--bg:#fffaf0;--fg:#1b2a6b;--sub:#56608f;--acc:#fd6c03;--card:#ffffff;--line:rgba(27,42,107,.14);--fd:Comfortaa,"Trebuchet MS",sans-serif;--rad:22px;background-image:linear-gradient(rgba(27,42,107,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(27,42,107,.06) 1px,transparent 1px);background-size:22px 22px}
.t-school .ns-logo{font:700 26px var(--fd)}
.t-school .h-title{font:700 40px/1.05 var(--fd)}
.t-school .h-title em{background:var(--acc);color:#fff;padding:0 8px;border-radius:10px}
.t-school .h-img{border-radius:40px 40px 40px 6px;box-shadow:8px 8px 0 var(--fg)}
.t-school .h-obj{width:92px;height:92px;border-radius:50%;background:var(--acc) none;display:grid;place-items:center}
.t-school .h-obj::after{content:"5";font:700 58px/1 var(--fd);color:#fff}
.t-school .h-cta{box-shadow:5px 5px 0 var(--fg)}
.t-school .ns-feats div,.t-school .ns-form,.t-school .ns-rev blockquote{border:2px solid var(--fg);box-shadow:4px 4px 0 var(--fg)}

/* ----- 9. Репетитор Hello Hallo: небо, облачка, флаги ----- */
.t-tutor{--bg:#eef7fe;--fg:#1b3f8f;--sub:#56709f;--acc:#2f7be0;--card:#ffffff;--line:rgba(27,63,143,.12);--fd:Montserrat,"Trebuchet MS",sans-serif;--rad:26px}
.t-tutor .ns-logo{font:800 24px var(--fd)}
.t-tutor .h-title{font:800 38px/1.04 var(--fd)}
.t-tutor .h-title em{color:#27a06b}
.t-tutor .h-img{border-radius:28px}
.t-tutor .h-art::before,.t-tutor .h-art::after{position:absolute;z-index:2;padding:8px 14px;border-radius:18px 18px 18px 4px;color:#fff;font:800 14px var(--fd);box-shadow:0 12px 24px -12px rgba(0,0,0,.4);animation:nsBob 4s ease-in-out infinite}
.t-tutor .h-art::before{content:"Hello!";left:-6px;top:20px;background:#2f7be0}
.t-tutor .h-art::after{content:"Hallo!";right:16px;top:70px;background:#27a06b;animation-delay:-2s}
.t-tutor .h-obj{border-radius:50%;border:6px solid #fff}
.t-tutor .ns-tick{background:#fff;color:var(--acc);border:0}

/* ----- телефон на первом экране ----- */
.ns-mini{position:absolute;inset:0;z-index:4;overflow:hidden;border-radius:inherit;background:#fff;pointer-events:none}
.ns-mini-in{width:390px;transform-origin:0 0;overflow:hidden}
.ns-mini .ns-top{padding-top:54px}
@media (prefers-reduced-motion:reduce){.ns *{animation:none!important}}