/* ==========================================================================
   VIRTUS — design system
   «Снаружи — сталь. Внутри — свет»
   ========================================================================== */

:root{
  /* — цвет: сталь и свет — */
  --ink:      #0c0d10;
  --ink-2:    #13151a;
  --ink-3:    #1b1e25;
  --line:     #242832;
  --line-2:   #32373f;
  --steel:    #a0a9b7;   /* AA для мелкого текста на угле */
  --steel-dk: #8a93a1;   /* было #5a6270 — не проходило контраст */
  --paper:    #ece7de;
  --paper-2:  #e3ddd2;
  --paper-3:  #f5f2ec;
  --on-paper: #16171b;
  --on-paper-2:#5c6068;  /* AA для мелкого текста на бумаге */
  --line-p:   #d3cdc0;
  --amber:    #d89a4e;
  --amber-2:  #a86f2d;
  --amber-lt: #e8b877;
  --amber-sm: #e3ab63;   /* янтарь для мелких подписей на тёмном */
  --amber-sm-p:#8a5a20;  /* и для мелких подписей на бумаге */

  /* — типографика — */
  --f-dis: 'Prata', Georgia, 'Times New Roman', serif;
  --f-txt: 'Onest', system-ui, -apple-system, sans-serif;
  --f-mono:'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* — ритм — */
  --pad: clamp(1.15rem, 4.2vw, 4.5rem);
  --sec: clamp(4.5rem, 9vw, 8.5rem);
  --max: 1440px;

  /* — motion — */
  --e:    cubic-bezier(.22,.61,.36,1);
  --e-io: cubic-bezier(.66,0,.34,1);
  --t1: 220ms;
  --t2: 620ms;
  --t3: 900ms;
  --t4: 1250ms;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}  /* плавный скролл — в JS, только для кликов по якорям */
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:var(--f-txt); font-weight:300; font-size:1rem; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
ul,ol{margin:0; padding:0; list-style:none}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
::selection{background:var(--amber); color:#17120a}
:focus-visible{outline:2px solid var(--amber); outline-offset:3px}

h1,h2,h3{font-family:var(--f-dis); font-weight:400; text-wrap:balance; letter-spacing:.002em}
.mono{
  font-family:var(--f-mono); font-weight:400;
  letter-spacing:.17em; text-transform:uppercase; font-feature-settings:'tnum';
}
.wrap{max-width:var(--max); margin-inline:auto; padding-inline:var(--pad)}

/* ---------- заголовки секций ---------- */
.eyebrow{
  font-size:.63rem; color:var(--amber-sm); display:flex; align-items:center; gap:.85rem;
  margin-bottom:1.5rem;
}
.eyebrow::before{content:''; width:2.2rem; height:1px; background:currentColor; opacity:.6}
.sec-head{
  display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(1.5rem,4vw,4rem);
  align-items:end; padding-bottom:clamp(2.5rem,5vw,4.5rem);
}
.sec-head h2{font-size:clamp(1.95rem,4.3vw,3.5rem); line-height:1.08}
.sec-note{font-size:.97rem; max-width:min(38ch,100%); color:var(--steel)}
@media(max-width:820px){
  .sec-head{grid-template-columns:1fr; gap:1.3rem}
  .sec-note{max-width:min(44ch,100%)}
}

/* ---------- кнопки и ссылки ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.7rem;
  padding:1.05rem 2.1rem; border-radius:2px;
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.19em; text-transform:uppercase;
  transition:background var(--t1) var(--e), color var(--t1) var(--e),
             box-shadow var(--t1) var(--e), transform var(--t1) var(--e), border-color var(--t1) var(--e);
  will-change:transform;
}
.btn i{font-style:normal; transition:transform var(--t1) var(--e)}
.btn:hover i{transform:translateX(4px)}
.btn-amber{background:var(--amber); color:#17120a}
.btn-amber:hover{background:var(--amber-lt); box-shadow:0 0 36px rgba(216,154,78,.42); transform:translateY(-2px)}
.btn-ghost{border:1px solid rgba(236,231,222,.32); color:var(--paper)}
.btn-ghost:hover{border-color:var(--amber); color:var(--amber); transform:translateY(-2px)}
.btn-dark{background:var(--on-paper); color:var(--paper)}
.btn-dark:hover{background:#000; box-shadow:0 14px 40px rgba(22,23,27,.28); transform:translateY(-2px)}

.link-arrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.19em; text-transform:uppercase;
  padding-bottom:.45rem; border-bottom:1px solid var(--amber-2);
  transition:color var(--t1) var(--e), border-color var(--t1) var(--e), gap var(--t1) var(--e);
}
.link-arrow::after{content:'→'; transition:transform var(--t1) var(--e)}
.link-arrow:hover{color:var(--amber); border-color:var(--amber); gap:.9rem}
.link-arrow.light{color:var(--paper); border-color:rgba(236,231,222,.4)}
.link-arrow.light:hover{color:var(--amber); border-color:var(--amber)}

/* ==========================================================================
   MOTION
   ========================================================================== */
.js .rv{opacity:0; transform:translateY(28px); transition:opacity var(--t2) var(--e), transform var(--t2) var(--e)}
.js .rv.in{opacity:1; transform:none}

.rv-img{position:relative; overflow:hidden}
.js .rv-img>img,
.js .rv-img>picture>img{transform:scale(1.07); transition:transform var(--t4) var(--e)}
.js .rv-img.in>img,
.js .rv-img.in>picture>img{transform:scale(1)}
.js .rv-img::after{
  content:''; position:absolute; inset:0; z-index:2;
  background:var(--mask, var(--ink));
  transform-origin:top; transition:transform var(--t3) var(--e-io);
}
.js .rv-img.in::after{transform:scaleY(0)}

/* построчный вылет заголовка */
.lines>span{display:block; overflow:hidden}
.js .lines>span>span{
  display:inline-block; transform:translateY(110%);
  transition:transform var(--t3) var(--e);
}
.lines>span>span{display:inline-block}
.in.lines>span:nth-child(2)>span{transition-delay:.1s}
.in.lines>span:nth-child(3)>span{transition-delay:.2s}
.in.lines>span:nth-child(4)>span{transition-delay:.3s}
.in.lines>span>span{transform:none}
/* заголовки, размеченные скриптом, стартуют скрытыми */
.lines[data-split]>span>span{transform:translateY(110%)}
.lines[data-split].in>span>span{transform:none}

.grain{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  opacity:.055; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Занавес загрузки.
   ВАЖНО: поднимается CSS-анимацией с forwards, а НЕ классом от JS.
   Раньше он зависел от body.ready + transition — если JS не успевал или
   падал, посетитель видел чёрный экран. Теперь занавес уходит всегда;
   без JS он вообще не показывается (см. .curtain{display:none} ниже). */
.curtain{
  position:fixed; inset:0; z-index:200; background:var(--ink);
  display:none; place-items:center; pointer-events:none;
}
.js .curtain{
  display:grid;
  animation:curtainLift 820ms 220ms var(--e) forwards;
}
@keyframes curtainLift{
  0%{opacity:1; visibility:visible}
  99%{opacity:0}
  100%{opacity:0; visibility:hidden}
}
/* переход между страницами: занавес возвращается */
body.leaving .curtain{
  animation:none; opacity:1; visibility:visible;
  transition:opacity 240ms var(--e);
}
.curtain .slit{
  width:2px; height:34vh; border-radius:2px;
  background:linear-gradient(180deg, transparent, var(--amber), transparent);
  animation:slitPulse 1.1s var(--e) infinite;
}
@keyframes slitPulse{0%,100%{opacity:.25; transform:scaleY(.7)}50%{opacity:1; transform:scaleY(1)}}


/* ==========================================================================
   НАВИГАЦИЯ
   ========================================================================== */
.nav{
  position:fixed; inset:0 0 auto; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  height:72px; padding:0 var(--pad); color:var(--paper);
  border-bottom:1px solid transparent;
  transition:background-color 520ms var(--e), border-color 520ms var(--e), color 520ms var(--e), box-shadow 520ms var(--e);
}
.nav.solid{
  background:rgba(245,242,236,.88); backdrop-filter:blur(18px) saturate(1.08);
  -webkit-backdrop-filter:blur(18px) saturate(1.08);
  border-bottom-color:rgba(22,23,27,.12); color:var(--on-paper);
  box-shadow:0 8px 28px rgba(16,18,22,.07);
}
.logo{display:flex; align-items:center; gap:.62rem; flex:none}
.logo svg{width:22px; height:22px; flex:none}
.logo span{font-weight:600; letter-spacing:.4em; font-size:.95rem}
.nav-links{display:flex; gap:2.2rem}
.nav-links .lnk{
  font-family:var(--f-mono); font-size:.65rem; letter-spacing:.21em; text-transform:uppercase;
  opacity:.72; padding:.4rem 0; position:relative;
  transition:opacity var(--t1) var(--e), color var(--t1) var(--e);
}
.nav-links .lnk::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--amber); transform:scaleX(0); transform-origin:left;
  transition:transform var(--t1) var(--e);
}
.nav-links .lnk:hover{opacity:1; color:var(--amber)}
.nav-links .lnk:hover::after{transform:scaleX(1)}
.nav-right{display:flex; align-items:center; gap:1.4rem; flex:none}
.nav-tel{
  font-family:var(--f-mono); font-size:.65rem; letter-spacing:.13em; opacity:.8;
  transition:color var(--t1) var(--e), opacity var(--t1) var(--e);
}
.nav-tel:hover{color:var(--amber); opacity:1}
.nav-cta{
  border:1px solid var(--amber-2); color:var(--amber);
  padding:.62rem 1.3rem; border-radius:2px;
  font-family:var(--f-mono); font-size:.63rem; letter-spacing:.18em; text-transform:uppercase;
  transition:background var(--t1) var(--e), color var(--t1) var(--e), box-shadow var(--t1) var(--e);
}
.nav-cta:hover{background:var(--amber); color:#17120a; box-shadow:0 0 26px rgba(216,154,78,.4)}
.nav.solid:not(.on-light) .nav-links .lnk,
.nav.solid:not(.on-light) .nav-tel{color:var(--on-paper)}
.nav.solid:not(.on-light) .nav-cta{color:var(--amber-sm-p); border-color:var(--amber-2)}
.nav.solid:not(.on-light) .nav-cta:hover{background:var(--on-paper); border-color:var(--on-paper); color:var(--paper); box-shadow:none}
.nav.solid:not(.on-light) .burger span{background:var(--on-paper)}
.burger{display:none; width:26px; height:16px; position:relative; flex:none}
.burger span{
  position:absolute; left:0; right:0; height:1.5px; background:var(--paper);
  transition:transform var(--t1) var(--e), opacity var(--t1) var(--e);
}
.burger span:first-child{top:2px}
.burger span:last-child{bottom:2px}
body.menu .burger span:first-child{transform:translateY(5px) rotate(45deg)}
body.menu .burger span:last-child{transform:translateY(-6px) rotate(-45deg)}

@media(max-width:1080px){ .nav-links{gap:1.5rem} .nav-tel{display:none} }
@media(max-width:900px){
  .nav{height:68px}
  .nav-links{display:none}
  .burger{display:block}
  .nav-cta{display:none}
}

/* мобильное меню */
.mobile-menu{
  position:fixed; inset:0; z-index:95; background:var(--ink);
  display:flex; flex-direction:column; justify-content:center; gap:2.5rem;
  padding:5.5rem var(--pad) 2.5rem;
  opacity:0; visibility:hidden; transition:opacity 380ms var(--e), visibility 380ms;
}
body.menu .mobile-menu{opacity:1; visibility:visible}
body.menu .nav{background:transparent; border-bottom-color:transparent; box-shadow:none; color:var(--paper)}
body.menu .nav .logo span{color:var(--paper)}
body.menu .nav .burger span{background:var(--paper)}
.mobile-menu nav{display:flex; flex-direction:column; gap:.2rem}
.mobile-menu nav a{
  font-family:var(--f-dis); font-size:clamp(1.7rem,7.5vw,2.4rem); line-height:1.5;
  display:flex; align-items:baseline; gap:1rem;
  opacity:0; transform:translateY(18px);
  transition:opacity 460ms var(--e), transform 460ms var(--e), color var(--t1) var(--e);
}
.mobile-menu nav a i{
  font-family:var(--f-mono); font-style:normal; font-size:.6rem;
  letter-spacing:.16em; color:var(--amber); opacity:.8;
}
body.menu .mobile-menu nav a{opacity:1; transform:none}
body.menu .mobile-menu nav a:nth-child(1){transition-delay:.08s}
body.menu .mobile-menu nav a:nth-child(2){transition-delay:.14s}
body.menu .mobile-menu nav a:nth-child(3){transition-delay:.2s}
body.menu .mobile-menu nav a:nth-child(4){transition-delay:.26s}
body.menu .mobile-menu nav a:nth-child(5){transition-delay:.32s}
.mm-foot{
  display:flex; flex-direction:column; gap:.55rem;
  padding-top:1.8rem; border-top:1px solid var(--line);
  font-size:.95rem; color:var(--steel);
}
.mm-foot .mono{font-size:.6rem; color:var(--steel-dk)}
body.menu{overflow:hidden}

/* райл разделов */
.rail{
  position:fixed; right:calc(var(--pad) * .5); top:50%; transform:translateY(-50%);
  z-index:60; display:flex; flex-direction:column; gap:.95rem; align-items:flex-end;
  mix-blend-mode:difference;
  opacity:0; visibility:hidden; transition:opacity 500ms var(--e), visibility 500ms;
}
body.scrolled .rail{opacity:1; visibility:visible}
.rail a{
  width:22px; height:1px; background:var(--paper); opacity:.28;
  position:relative; transition:opacity var(--t1) var(--e), width var(--t1) var(--e), background var(--t1) var(--e);
}
.rail a::after{
  content:attr(data-l); position:absolute; right:32px; top:50%; transform:translateY(-50%);
  font-family:var(--f-mono); font-size:.55rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--paper); white-space:nowrap; opacity:0; transition:opacity var(--t1) var(--e);
}
.rail a:hover{opacity:.9; width:30px}
.rail a:hover::after{opacity:.75}
.rail a.on{opacity:1; width:34px; background:var(--amber-lt)}
@media(max-width:1200px){ .rail{display:none} }

/* ==========================================================================
   HERO — Variant A, утверждён 20.08.2026
   Кадр: архитектурная визуализация, изделие по модели проекта № 13.
   Свет собран так, чтобы дом читался живым: у каждого окна своя длительность
   (37…89 с) и своя задержка, поэтому световые события не совпадают и общий
   рисунок не воспринимается как короткая петля. Тени — мягкие размытые пятна
   строго внутри стеклянных зон, без узнаваемых фигур.
   ========================================================================== */
.hero{position:relative; height:100svh; min-height:660px; overflow:hidden; background:#101722}
.hero-scene{position:absolute; inset:0; overflow:hidden}
.hero-scene>picture{position:absolute; inset:0}
.hero-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:52% 56%;
  animation:heroIn 2200ms var(--e) both;
}
@keyframes heroIn{from{transform:scale(1.025); opacity:.45}to{transform:scale(1.002); opacity:1}}

/* --- свет в окнах ------------------------------------------------------- */
.hero-lights,.hero-life{position:absolute; inset:0; pointer-events:none}
.hero-lights{z-index:2; mix-blend-mode:screen}
.hw,.hg{position:absolute; display:block; border-radius:2px}
.hw{
  background:linear-gradient(180deg, rgba(255,206,146,.5), rgba(255,182,108,.3) 62%, rgba(255,170,88,.16));
  filter:blur(7px);
  animation:winBreath 47s ease-in-out infinite;
}
/* окна дома: координаты снята по кадру, проценты — чтобы держались при cover */
.hw-1{left:12.3%; top:37.8%; width:2.7%; height:8.1%;  animation-duration:85s; animation-delay:-4s}
.hw-2{left:15.8%; top:37.0%; width:2.1%; height:7.4%;  animation-duration:97s; animation-delay:-19s}
.hw-3{left:31.3%; top:24.4%; width:2.5%; height:11.9%; animation-duration:113s; animation-delay:-33s}
.hw-4{left:37.5%; top:22.0%; width:3.3%; height:13.6%; animation-duration:71s; animation-delay:-11s}
.hw-5{left:12.5%; top:54.8%; width:2.1%; height:14.1%; animation-duration:107s; animation-delay:-27s}
.hw-6{left:21.5%; top:54.8%; width:2.7%; height:14.8%; animation-duration:61s; animation-delay:-6s}
.hw-7{left:30.8%; top:51.1%; width:2.9%; height:18.5%; animation-duration:95s; animation-delay:-41s}
.hw-8{left:37.3%; top:50.4%; width:3.6%; height:20.7%; animation-duration:127s; animation-delay:-14s}
.hw-9{left:85.8%; top:48.9%; width:1.7%; height:20.7%; animation-duration:143s; animation-delay:-52s}
@keyframes winBreath{
  0%,100%{opacity:.42}
  34%{opacity:.9}
  58%{opacity:.62}
  78%{opacity:.8}
}

/* --- свет через остекление входной группы -------------------------------- */
.hg{
  background:linear-gradient(180deg, rgba(255,214,158,.56), rgba(255,188,116,.34) 58%, rgba(255,176,96,.18));
  filter:blur(6px);
  animation:doorBreath 41s ease-in-out infinite;
}
.hg-transom{left:53.8%; top:22.2%; width:12.9%; height:12.6%; animation-duration:53s; animation-delay:-7s}
.hg-side-l {left:53.8%; top:36.3%; width:2.9%;  height:47.4%; animation-duration:71s; animation-delay:-21s}
.hg-side-r {left:67.5%; top:33.3%; width:2.9%;  height:51.1%; animation-duration:61s; animation-delay:-3s}
.hg-leaf   {left:58.8%; top:42.2%; width:5.8%;  height:38.5%; animation-duration:47s; animation-delay:-13s; filter:blur(4px)}
@keyframes doorBreath{
  0%,100%{opacity:.56}
  40%{opacity:.96}
  70%{opacity:.72}
}

/* --- мягкие тени внутри: только за стеклом ------------------------------- */
.hero-life{z-index:3}
.hs{position:absolute; display:block; overflow:hidden}
.hs>i{
  position:absolute; top:4%; left:-52%; width:62%; height:92%; display:block;
  background:radial-gradient(52% 50% at 50% 50%, rgba(58,38,18,.72), rgba(48,32,16,.26) 58%, transparent 76%);
  filter:blur(9px); opacity:0;
}
.hs-leaf {left:58.8%; top:42.2%; width:5.8%; height:38.5%}
.hs-side {left:67.5%; top:33.3%; width:2.9%; height:51.1%}
.hs-win7 {left:30.8%; top:51.1%; width:2.9%; height:18.5%}
.hs-win4 {left:37.5%; top:22.0%; width:3.3%; height:13.6%}
/* разные периоды: за минуту проходит 2-3 события, но не по расписанию */
.hs-leaf>i {animation:pass 97s ease-in-out infinite}
.hs-side>i {animation:pass 113s ease-in-out infinite -34s}
.hs-win7>i {animation:pass 131s ease-in-out infinite -71s}
.hs-win4>i {animation:pass 149s ease-in-out infinite -19s}
@keyframes pass{
  0%,80%{opacity:0; transform:translateX(0)}
  83%{opacity:.26}
  87%{opacity:.4; transform:translateX(118%)}
  91%{opacity:.18; transform:translateX(202%)}
  94%,100%{opacity:0; transform:translateX(240%)}
}

/* --- воздух и скрим ------------------------------------------------------ */
.hero-ambient{
  position:absolute; inset:0; z-index:2; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(22% 26% at 61% 48%, rgba(255,190,112,.14), transparent 74%);
  animation:ambient 34s ease-in-out infinite;
}
@keyframes ambient{0%,100%{opacity:.5}46%{opacity:1}}
.hero-scrim{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(9,12,19,.74) 0%, rgba(9,12,19,.42) 27%, rgba(9,12,19,.04) 47%, transparent 61%),
    linear-gradient(180deg, rgba(10,14,22,.14) 0%, transparent 18%, transparent 72%, rgba(9,12,19,.42) 100%);
}
.hero-body{
  position:absolute; z-index:6; left:var(--pad); right:var(--pad);
  bottom:clamp(4.2rem,10vh,8rem); max-width:min(44rem,62vw);
}
.hero-kick{
  font-size:.68rem; color:var(--amber-lt); margin-bottom:1.4rem;
  letter-spacing:.11em; display:flex; align-items:center; gap:.8rem;
}
.hero-kick::before{content:''; width:2.4rem; height:1px; background:var(--amber); flex:none}
.hero h1{
  font-size:clamp(2.1rem,5.4vw,4.6rem); line-height:1.06; letter-spacing:-.015em;
  opacity:0; animation:rise 1200ms 420ms var(--e) forwards;
}
.hero h1 em{font-style:normal; color:var(--amber-lt)}
.hero-sub{
  margin-top:1.4rem; max-width:min(40ch,100%); font-size:1.04rem; color:rgba(255,255,255,.9);
  opacity:0; animation:rise 1100ms 700ms var(--e) forwards;
}
.hero-act{margin-top:2.1rem; display:flex; gap:.9rem; flex-wrap:wrap; opacity:0; animation:rise 1100ms 880ms var(--e) forwards}
@keyframes rise{from{opacity:0; transform:translateY(24px)}to{opacity:1; transform:none}}
.hero-meta{
  position:absolute; z-index:6; right:var(--pad); bottom:clamp(1.6rem,4vh,2.6rem);
  text-align:right; font-size:.56rem; letter-spacing:.11em; text-transform:uppercase;
  color:rgba(236,231,222,.66); line-height:2;
}
.hero-meta .b{color:rgba(236,231,222,.86)}

@media(max-width:1000px){
  .hero-img{object-position:50% 54%}
  .hero-kick{font-size:.58rem; margin-bottom:1rem}
  .hero-body{max-width:min(38rem,calc(100vw - var(--pad)*2)); bottom:clamp(2.8rem,7vh,4.6rem)}
  .hero-scrim{background:linear-gradient(180deg, rgba(9,12,19,.3) 0%, transparent 24%, rgba(9,12,19,.84) 74%, #0c0d10 100%)}
  .scroll-cue{display:none}
  .hero-meta{display:none}
}
/* мобильный кадр — свой кроп, поэтому и координаты света свои */
@media(max-width:620px){
  .hw-1,.hw-2,.hw-3,.hw-5,.hw-6,.hw-9{display:none}
  .hw-4{left:6%;  top:19%; width:9%;  height:13%}
  .hw-7{left:2%;  top:48%; width:8%;  height:17%}
  .hw-8{left:16%; top:46%; width:10%; height:19%}
  .hg-transom{left:41%; top:19%; width:34%; height:12%}
  .hg-side-l {left:41%; top:34%; width:7%;  height:44%}
  .hg-side-r {left:76%; top:31%; width:7%;  height:47%}
  .hg-leaf   {left:53%; top:40%; width:15%; height:36%}
  .hs-leaf   {left:53%; top:40%; width:15%; height:36%}
  .hs-side   {left:76%; top:31%; width:7%;  height:47%}
  .hs-win7   {left:2%;  top:48%; width:8%;  height:17%}
  .hs-win4   {left:6%;  top:19%; width:9%;  height:13%}
}
@media(max-width:560px){
  .hero h1{font-size:clamp(1.9rem,8.4vw,2.2rem)}
  .hero-sub{font-size:.95rem}
  .hero-act{gap:.65rem}
  .hero-act .btn{flex:1 1 100%; justify-content:center; padding:.95rem 1.2rem}
}

/* Уважаем системную настройку: движение выключено, но кадр остаётся
   тёплым и живым — свет просто зафиксирован во включённом состоянии. */
@media(prefers-reduced-motion:reduce){
  .hero-img,.hw,.hg,.hero-ambient{animation:none}
  .hero h1,.hero-sub,.hero-act{animation:none; opacity:1}
  .hw{opacity:.72} .hg{opacity:.86} .hero-ambient{opacity:.8}
  .hs>i{animation:none; opacity:0}
}

/* ==========================================================================
   МАНИФЕСТ
   ========================================================================== */
.manifesto{
  padding:clamp(3.8rem,7vw,6.5rem) 0 clamp(3.2rem,6vw,5rem);
  text-align:center; background:var(--paper-3); color:var(--on-paper);
}
.manifesto h2{
  font-size:clamp(1.85rem,4.4vw,3.5rem); line-height:1.3;
  max-width:min(26ch,100%); margin-inline:auto; color:var(--on-paper);
}
.manifesto h2 em{font-style:normal; color:var(--amber-sm-p)}
.man-facts{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--line-p);
  margin-top:clamp(2.5rem,5vw,4rem); border-top:1px solid var(--line-p); border-bottom:1px solid var(--line-p);
}
.man-facts>div{background:var(--paper-3); padding:1.9rem 1.2rem}
.man-facts b{
  display:block; font-family:var(--f-dis); font-weight:400;
  font-size:clamp(1.5rem,2.8vw,2.15rem); color:var(--amber-sm-p);
}
.man-facts span{
  display:block; margin-top:.55rem; font-family:var(--f-mono);
  font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--on-paper-2);
  line-height:1.75;
}
@media(max-width:760px){ .man-facts{grid-template-columns:1fr 1fr} }

/* ==========================================================================
   КОЛЛЕКЦИИ — светлая «бумага»
   ========================================================================== */
.collections{
  --mask:var(--paper);
  background:var(--paper); color:var(--on-paper);
  padding:clamp(4rem,8vw,7rem) 0 clamp(3rem,6vw,5rem);
}
.collections .eyebrow{color:var(--amber-sm-p)}
.collections .sec-note{color:var(--on-paper-2)}
.collections .link-arrow{color:var(--on-paper)}

.feat{
  position:relative; display:grid; grid-template-columns:1.14fr .86fr;
  gap:clamp(2rem,5vw,5.5rem); align-items:center;
  padding:clamp(3rem,6.5vw,5.5rem) 0; border-top:1px solid var(--line-p);
}
.feat.rev{grid-template-columns:.86fr 1.14fr}
.feat.rev .feat-media{order:2}
.ghost{
  position:absolute; top:clamp(1rem,3vw,2.5rem); right:0; z-index:0; pointer-events:none;
  font-family:var(--f-dis); font-size:clamp(6rem,15vw,13rem); line-height:.85;
  color:transparent; -webkit-text-stroke:1px rgba(22,23,27,.11);
}
.feat.rev .ghost{right:auto; left:0}

.feat-media{position:relative}
.plate{position:relative; aspect-ratio:16/10; background:#d8d4ca; box-shadow:0 24px 58px rgba(22,23,27,.13)}
.plate>.scene-picture{position:absolute; inset:0; display:block; width:100%; height:100%}
.plate>.scene-picture>img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform var(--t4) var(--e);
}
.feat-media:hover .plate>.scene-picture>img{transform:scale(1.018)}
.scene-badge{
  position:absolute; z-index:3; left:.85rem; top:.85rem;
  padding:.45rem .6rem; border:1px solid rgba(255,255,255,.34); border-radius:999px;
  background:rgba(12,13,16,.55); backdrop-filter:blur(9px); color:#fff;
  font-size:.58rem; letter-spacing:.08em;
}
.det{transition:box-shadow var(--t2) var(--e)}
.feat-media:hover .det{box-shadow:0 34px 66px rgba(22,23,27,.3)}

.det{
  position:absolute; z-index:2; width:23%; left:-1%; right:auto; bottom:-4%;
  box-shadow:0 26px 54px rgba(22,23,27,.22);
}
.feat.rev .det{left:-1%; right:auto}
.det>img{aspect-ratio:4/5; width:100%; object-fit:contain; background:#f7f5f0}
.det figcaption{
  position:absolute; inset:auto 0 0; z-index:3;
  padding:1.5rem .85rem .7rem;
  background:linear-gradient(180deg, transparent, rgba(10,11,14,.86));
  color:#fff; font-size:.56rem; line-height:1.65; letter-spacing:.11em;
}

.feat-info{position:relative}
.feat-info .num{font-size:.62rem; letter-spacing:.22em; color:var(--amber-sm-p); margin-bottom:1.1rem}
.feat-info h3{font-size:clamp(2rem,4vw,3.15rem); line-height:1.05; margin-bottom:1.1rem}
.feat-info .lead{font-size:1.02rem; color:var(--on-paper-2); max-width:min(34ch,100%)}
.specs{
  margin-top:1.6rem; display:flex; flex-direction:column; gap:.62rem;
  font-family:var(--f-txt); font-weight:400; text-transform:none;
}
.specs li{
  font-size:.72rem; letter-spacing:.07em; line-height:1.65;
  padding-left:1.35rem; position:relative; color:var(--on-paper);
}
.specs li::before{
  content:''; position:absolute; left:0; top:.52em; width:.7rem; height:1px; background:var(--amber-2);
}
.feat-info .link-arrow{margin-top:1.9rem}

.col-more{
  display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap;
  padding-top:clamp(2.5rem,5vw,4rem); border-top:1px solid var(--line-p);
}
.col-more .mono{font-size:.6rem; color:var(--on-paper-2); letter-spacing:.14em}

@media(max-width:880px){
  .feat, .feat.rev{grid-template-columns:1fr; gap:1.5rem}
  .feat.rev .feat-media{order:0}
  .plate{aspect-ratio:4/3}
  .det{width:24%; left:0; right:auto; bottom:-4%}
  .feat.rev .det{left:0; right:auto}
}
@media(max-width:520px){
  .plate{aspect-ratio:5/4}
  .det{display:none}
  .scene-badge{left:.55rem; top:.55rem; padding:.38rem .5rem}
}

/* ==========================================================================
   АРХИТЕКТУРНАЯ ПАУЗА
   ========================================================================== */
.interlude{
  --mask:var(--ink);
  position:relative; height:clamp(58vh,64vw,80vh); overflow:hidden;
  display:flex; align-items:flex-end;
}
.interlude>img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.il-veil{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(12,13,16,.55) 0%, transparent 34%, rgba(12,13,16,.82) 100%);
}
.il-body{position:relative; z-index:4; width:100%; padding-bottom:clamp(2rem,5vw,4rem)}
.il-body p{
  font-size:clamp(.6rem,1.5vw,.72rem); letter-spacing:.24em; color:var(--paper);
  max-width:min(30ch,100%); line-height:2;
}

/* ==========================================================================
   МАТЕРИЯ
   ========================================================================== */
.materia{--mask:var(--ink); padding:var(--sec) 0; border-bottom:1px solid var(--line)}
.mat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line)}
.mat{position:relative; background:var(--ink); aspect-ratio:4/3}
.mat>img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.78) brightness(.82) contrast(1.06);
  transition:transform var(--t4) var(--e), filter var(--t3) var(--e);
}
.mat:hover>img{transform:scale(1.06); filter:saturate(1) brightness(1) contrast(1)}
.mat figcaption{
  position:absolute; inset:auto 0 0; z-index:3; padding:2.4rem 1.25rem 1.15rem;
  background:linear-gradient(180deg, transparent, rgba(10,11,14,.92));
}
.mat figcaption b{
  display:block; font-weight:500; font-size:.87rem; color:#fff; margin-bottom:.3rem;
}
.mat figcaption .mono{font-size:.55rem; color:var(--steel); letter-spacing:.13em; line-height:1.7}
@media(max-width:880px){ .mat-grid{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .mat-grid{grid-template-columns:1fr} .mat{aspect-ratio:16/10} }

/* ==========================================================================
   AI
   ========================================================================== */
.ai{
  --mask:var(--ink);
  position:relative; padding:var(--sec) 0; overflow:hidden;
  background:radial-gradient(58% 76% at 74% 48%, rgba(216,154,78,.11), transparent 62%), var(--ink);
  border-bottom:1px solid var(--line);
}
.ai-grid{display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(2.5rem,6vw,6rem); align-items:center}
.ai h2{font-size:clamp(2rem,4.3vw,3.4rem); line-height:1.08; color:#fff; margin-bottom:1.4rem}
.ai h2 em{font-style:normal; color:var(--amber)}
.ai .lead{font-size:1.02rem; color:var(--steel); max-width:min(42ch,100%)}

.ai-steps{display:flex; flex-direction:column; gap:0; margin-top:2.2rem}
.ai-steps li{
  display:grid; grid-template-columns:2.6rem 1fr; column-gap:1rem; align-items:baseline;
  padding:.95rem 0; border-top:1px solid var(--line);
}
.ai-steps li:last-child{border-bottom:1px solid var(--line)}
.ai-steps b{
  grid-row:1 / span 2; font-family:var(--f-mono); font-size:.66rem; font-weight:500;
  color:var(--amber-sm); letter-spacing:.14em;
}
.ai-steps .t{grid-column:2; font-size:.98rem; color:var(--paper)}
.ai-steps .s{
  grid-column:2; font-family:var(--f-mono); font-size:.56rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--steel-dk); margin-top:.3rem; line-height:1.7;
}

.quiz-demo{
  margin-top:2.4rem; border:1px solid var(--line); border-radius:3px; padding:1.5rem;
  background:rgba(19,21,26,.72); backdrop-filter:blur(8px);
}
.qd-head{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:1.1rem}
.qd-head span:first-child{font-size:.98rem; font-weight:500; color:#fff}
.qd-head .mono{font-size:.56rem; color:var(--steel-dk)}
.qd-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:.65rem}
.qc{
  border:1px solid var(--line); border-radius:2px; padding:1.05rem .7rem;
  text-align:center; background:var(--ink-2);
  transition:border-color var(--t1) var(--e), box-shadow var(--t1) var(--e),
             background var(--t1) var(--e), transform var(--t1) var(--e);
}
.qc svg{
  width:30px; height:30px; margin:0 auto .6rem; stroke:var(--steel); fill:none;
  stroke-width:1.3; stroke-linecap:round; transition:stroke var(--t1) var(--e);
}
.qc>span{display:block; font-size:.8rem; margin-bottom:.2rem}
.qc small{font-size:.56rem; color:var(--steel); letter-spacing:.1em}
.qc:hover{border-color:var(--line-2); transform:translateY(-2px)}
.qc.on{border-color:var(--amber); background:rgba(216,154,78,.07); box-shadow:0 0 24px rgba(216,154,78,.2)}
.qc.on svg{stroke:var(--amber)}
.qd-bar{margin-top:1.2rem; height:2px; background:var(--line); position:relative; overflow:hidden}
.qd-bar i{
  position:absolute; inset:0 auto 0 0; width:11%; background:var(--amber);
  box-shadow:0 0 14px rgba(216,154,78,.7); transition:width 480ms var(--e);
}
.qd-go{margin-top:1.4rem; width:100%; justify-content:center}

.ai-visual{position:relative}
.slit-l{
  position:absolute; z-index:0; left:50%; top:-6%; bottom:-6%; width:2px;
  transform:translateX(-50%); filter:blur(1px);
  background:linear-gradient(180deg, transparent, var(--amber), transparent);
  animation:slitBreathe 6s ease-in-out infinite;
}
@keyframes slitBreathe{0%,100%{opacity:.3}50%{opacity:.85}}
.ai-visual .ph{
  position:relative; z-index:1; aspect-ratio:4/5; max-height:78vh; overflow:hidden; border-radius:3px;
  box-shadow:0 0 90px rgba(216,154,78,.16), 0 30px 70px rgba(0,0,0,.55);
}
.ai-visual .ph img{width:100%; height:100%; object-fit:cover}
.ai-visual figcaption{
  position:absolute; z-index:2; left:1.1rem; right:1.1rem; bottom:1.1rem;
  padding:.9rem 1rem; border-left:2px solid var(--amber);
  background:rgba(12,13,16,.8); backdrop-filter:blur(10px);
  font-size:.55rem; letter-spacing:.13em; line-height:1.9; color:var(--paper);
}
.ai-visual figcaption b{display:block; color:var(--amber-sm); font-weight:500; margin-bottom:.2rem}
@media(max-width:960px){
  .ai-grid{grid-template-columns:1fr}
  .ai-visual{order:-1}
  .ai-visual .ph{aspect-ratio:3/4; max-height:60vh}
}
@media(max-width:600px){
  /* шаги: убираем «лестницу» из моноширинного текста */
  .ai-steps li{grid-template-columns:2.1rem 1fr}
  .ai-steps .t{font-size:.92rem}
  .ai-steps .s{font-size:.5rem; letter-spacing:.07em}
  /* карточки мини-квиза становятся строками — читаемо на узком экране */
  .qd-cards{grid-template-columns:1fr; gap:.5rem}
  .qc{
    display:grid; grid-template-columns:2rem 1fr; align-items:center;
    gap:.85rem; text-align:left; padding:.8rem .9rem;
  }
  .qc svg{width:26px; height:26px; margin:0}
  .qc>span{font-size:.85rem; margin:0}
  .qc small{display:block; margin-top:.15rem}
  .qc.on::after{right:.6rem; top:50%; transform:translateY(-50%); animation:none}
  .quiz-demo{padding:1.1rem}
  .qd-head span:first-child{font-size:.9rem}
}

/* ==========================================================================
   ПРОЕКТЫ
   ========================================================================== */
.projects{
  --mask:var(--paper-2);
  background:var(--paper-2); color:var(--on-paper); padding:var(--sec) 0;
}
.projects .eyebrow{color:var(--amber-sm-p)}
.projects .sec-note{color:var(--on-paper-2)}
.projects .link-arrow{color:var(--on-paper)}
.projects .sec-head{align-items:end}
.proj-grid{display:grid; grid-template-columns:1.32fr 1fr; gap:1.2rem}
.proj{position:relative; overflow:hidden; display:block; background:var(--ink-2)}
.proj>img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/5}
.proj.big>img{aspect-ratio:auto; height:100%; min-height:100%}
.proj-col{display:flex; flex-direction:column; gap:1.2rem}
.proj-cap{
  position:absolute; inset:auto 0 0; z-index:3; padding:3rem 1.4rem 1.3rem;
  background:linear-gradient(180deg, transparent, rgba(8,9,12,.9));
  color:var(--paper);
  transform:translateY(6px); opacity:.96;
  transition:transform var(--t2) var(--e);
}
.proj-cap b{display:block; font-weight:500; color:#fff; font-size:1rem; margin-bottom:.35rem}
.proj-cap span{display:block; font-size:.55rem; letter-spacing:.13em; color:var(--steel); line-height:1.75}
.proj:hover .proj-cap{transform:translateY(0)}
.proj:hover>img{transform:scale(1.045)}
.proj>img{transition:transform var(--t4) var(--e)}
.quote{
  margin:clamp(3rem,6vw,5rem) auto 0; max-width:min(46ch,100%); text-align:center;
}
.quote p{font-family:var(--f-dis); font-size:clamp(1.1rem,2.3vw,1.62rem); line-height:1.58}
.quote footer{margin-top:1.2rem; font-size:.58rem; letter-spacing:.18em; color:var(--on-paper-2)}
@media(max-width:880px){
  .proj-grid{grid-template-columns:1fr}
  .proj.big>img{aspect-ratio:4/3}
}

/* ==========================================================================
   ПРОИЗВОДСТВО
   ========================================================================== */
.factory{--mask:var(--ink); background:var(--ink)}
.fact-hero{position:relative; min-height:clamp(62vh,60vw,78vh); display:flex; align-items:flex-end; overflow:hidden}
.fact-hero>img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(.62) brightness(.62) contrast(1.1);
}
.fh-veil{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(12,13,16,.6) 0%, rgba(12,13,16,.18) 34%, rgba(12,13,16,.95) 100%);
}
.fh-body{position:relative; z-index:4; width:100%; padding-bottom:clamp(2.5rem,6vw,4.5rem)}
.fact-hero h2{font-size:clamp(1.95rem,4.4vw,3.5rem); line-height:1.08; color:#fff}
.fact-hero .sub{margin-top:1.1rem; max-width:min(44ch,100%); color:rgba(236,231,222,.78); font-size:.99rem}
.fact-hero .link-arrow{margin-top:1.8rem}
.fact-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line)}
.fact-strip figure{position:relative; background:var(--ink); overflow:hidden}
.fact-strip img{
  width:100%; aspect-ratio:3/2; object-fit:cover;
  filter:saturate(.7) brightness(.8); transition:transform var(--t4) var(--e), filter var(--t3) var(--e);
}
.fact-strip figure:hover img{transform:scale(1.05); filter:saturate(.95) brightness(.96)}
.fact-strip figcaption{
  position:absolute; z-index:3; left:1.2rem; bottom:1rem; font-size:.57rem; color:var(--paper);
  text-shadow:0 1px 10px rgba(0,0,0,.9);
}
.fact-nums{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border-top:1px solid var(--line);
}
.fn{background:var(--ink); padding:clamp(1.8rem,3.5vw,2.6rem) 1.4rem}
.fn b{
  display:block; font-family:var(--f-dis); font-weight:400;
  font-size:clamp(1.9rem,3.6vw,2.9rem); color:var(--amber); line-height:1;
}
.fn span{
  display:block; margin-top:.75rem; font-family:var(--f-mono);
  font-size:.57rem; letter-spacing:.13em; text-transform:uppercase; color:var(--steel); line-height:1.8;
}
.fact-note{
  padding:1.4rem var(--pad); font-size:.55rem; letter-spacing:.12em;
  color:var(--steel-dk); border-top:1px solid var(--line); line-height:1.9;
}
@media(max-width:880px){
  .fact-strip{grid-template-columns:1fr 1fr}
  .fact-nums{grid-template-columns:1fr 1fr}
}

/* ==========================================================================
   ФИНАЛ
   ========================================================================== */
.final{
  position:relative; min-height:clamp(80vh,90vw,94vh); overflow:hidden;
  display:grid; place-items:center; text-align:center;
}
.final .bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 34%;
}
.fin-veil{
  position:absolute; inset:0; z-index:1;
  /* центр тоже притемняем: заголовок ложится поверх светящегося стекла */
  background:
    radial-gradient(46% 34% at 50% 44%, rgba(10,11,14,.62), transparent 72%),
    radial-gradient(76% 86% at 50% 56%, rgba(12,13,16,.34), rgba(12,13,16,.94));
}
.fin-body{position:relative; z-index:4; padding:4rem var(--pad)}
.fin-body .eyebrow{justify-content:center}
.fin-body .eyebrow::after{content:''; width:2.2rem; height:1px; background:currentColor; opacity:.6}
.final h2{font-size:clamp(2.5rem,5.6vw,4.8rem); line-height:1.02; color:#fff; margin-bottom:1.3rem; text-shadow:0 2px 30px rgba(0,0,0,.55)}
.fin-sub{color:rgba(236,231,222,.92); font-size:1.05rem; margin-bottom:2.5rem; text-shadow:0 1px 16px rgba(0,0,0,.6)}
.fin-act{display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap}

/* ==========================================================================
   ФУТЕР
   ========================================================================== */
.site{border-top:1px solid var(--line); padding:clamp(3rem,6vw,4.5rem) 0 2.2rem; background:var(--ink)}
.foot-top{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.35fr; gap:clamp(1.5rem,4vw,3rem);
  padding-bottom:clamp(2.5rem,5vw,3.5rem);
}
.foot-brand .logo{margin-bottom:1.1rem}
.foot-brand p{font-size:.9rem; color:var(--steel); max-width:min(26ch,100%)}
.foot-col{display:flex; flex-direction:column; gap:.6rem; align-items:flex-start}
.foot-col .ttl{font-size:.57rem; color:var(--steel-dk); margin-bottom:.5rem}
.foot-col a{font-size:.92rem; color:var(--paper); opacity:.82; transition:color var(--t1) var(--e), opacity var(--t1) var(--e)}
.foot-col a:hover{color:var(--amber); opacity:1}
.foot-col.contacts a.big{font-size:1.22rem; font-weight:400; opacity:1}
.foot-col .sm{font-size:.55rem; color:var(--steel-dk); letter-spacing:.13em; margin-top:-.25rem}
.foot-col .addr{font-size:.88rem; color:var(--steel); margin-top:.6rem; line-height:1.7}
.foot-bot{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding-top:1.6rem; border-top:1px solid var(--line);
  font-size:.55rem; color:var(--steel-dk);
}
@media(max-width:880px){
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1 / -1}
}
@media(max-width:520px){
  .foot-top{grid-template-columns:1fr}
}

/* ==========================================================================
   ДОСТУПНОСТЬ
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important; transition-duration:1ms!important}
  .rv{opacity:1; transform:none}
  .rv-img>img,
  .rv-img>picture>img{transform:none}
  .rv-img::after{display:none}
  .lines>span>span{transform:none}
  .curtain{display:none}
  .hero-kick,
  .hero h1,
  .hero-sub,
  .hero-proof,
  .hero-act,
  .hero-meta{opacity:1; transform:none}
  .hero-glass-panes{opacity:.34}
  .hero-human-shadow{opacity:0}
  .hero-ambient{opacity:.62}
}

/* ==========================================================================
   ГЕОГРАФИЯ — карта производства и отзывы
   Плитки OSM светлые, поэтому переводим их в тёмную гамму фильтром:
   так карта живёт в палитре сайта и не требует стороннего тайл-сервера.
   ========================================================================== */
.geo{padding:var(--sec) 0; background:var(--ink-2); border-top:1px solid var(--line)}
.geo-head{padding-bottom:clamp(2.2rem,4.5vw,3.4rem)}

.geo-grid{display:grid; grid-template-columns:1.55fr 1fr; gap:clamp(1.25rem,2.6vw,2.4rem); align-items:stretch}

.geo-mapwrap{position:relative; border:1px solid var(--line-2); background:var(--ink-3); overflow:hidden}
.geo-map{width:100%; height:clamp(24rem,42vw,34rem); background:var(--ink-3)}
.geo-map .leaflet-tile-pane{filter:grayscale(1) invert(.93) brightness(.92) contrast(1.06) sepia(.12)}
.geo-map .leaflet-container{background:var(--ink-3); font-family:var(--f-mono)}
.geo-map .leaflet-control-attribution{
  background:rgba(12,13,16,.72); color:var(--steel-dk); font-size:.58rem; padding:.2rem .5rem;
}
.geo-map .leaflet-control-attribution a{color:var(--steel)}
.geo-map .leaflet-bar a{
  background:var(--ink-2); color:var(--paper); border-bottom-color:var(--line-2);
  width:2rem; height:2rem; line-height:2rem;
}
.geo-map .leaflet-bar a:hover{background:var(--ink-3); color:var(--amber)}
.geo-noscript{padding:1.5rem; color:var(--steel); font-size:.7rem}

/* метки */
.geo-pin{display:grid; place-items:center}
.geo-pin b{
  display:block; width:10px; height:10px; border-radius:50%;
  background:var(--amber); box-shadow:0 0 0 4px rgba(216,154,78,.22);
  transition:transform .25s var(--e), box-shadow .25s var(--e);
}
.geo-pin.is-sel b{
  transform:scale(1.5);
  background:var(--amber-lt); box-shadow:0 0 0 6px rgba(216,154,78,.45);
}
.geo-pin--prod b{
  width:30px; height:30px; border-radius:50%; background:var(--amber); color:#17120a;
  font-family:var(--f-mono); font-size:.8rem; font-weight:700; line-height:30px; text-align:center;
  box-shadow:0 0 0 8px rgba(216,154,78,.16);
}
.geo-pin--prod i{
  position:absolute; top:calc(50% + 1.5rem); left:50%; transform:translateX(-50%);
  white-space:nowrap; font-family:var(--f-mono); font-style:normal;
  font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--paper);
  background:rgba(12,13,16,.82); padding:.28rem .55rem; border:1px solid var(--line-2);
}
.geo-pop .leaflet-popup-content-wrapper{
  background:var(--ink); color:var(--paper); border:1px solid var(--line-2); border-radius:0; box-shadow:none;
}
.geo-pop .leaflet-popup-content{margin:.75rem .95rem; font-size:.8rem; line-height:1.5}
.geo-pop .leaflet-popup-content b{font-family:var(--f-mono); font-size:.63rem; letter-spacing:.14em; text-transform:uppercase; color:var(--amber-sm)}
.geo-pop .leaflet-popup-tip{background:var(--ink); border:1px solid var(--line-2)}
.geo-pop .leaflet-popup-content{max-width:16.5rem}
.geo-pop-stars{display:block; margin-top:.3rem; color:var(--amber-sm); letter-spacing:.22em; font-size:.78rem}
.geo-pop-text{display:block; margin-top:.45rem; color:var(--paper)}
.geo-pop-meta{
  display:block; margin-top:.55rem; font-family:var(--f-mono); font-style:normal;
  font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--steel);
}

/* правая колонка */
.geo-side{display:flex; flex-direction:column; gap:clamp(1.25rem,2.4vw,1.8rem)}
.geo-card{border:1px solid var(--line-2); background:var(--ink); padding:clamp(1.5rem,2.6vw,2.1rem)}
.geo-lbl{font-size:.62rem; letter-spacing:.19em; text-transform:uppercase; color:var(--amber-sm); margin-bottom:1.1rem}
.geo-addr{font-family:var(--f-dis); font-size:clamp(1.15rem,2vw,1.45rem); line-height:1.3}
.geo-note{margin-top:.9rem; color:var(--steel); font-size:.92rem}
.geo-card .link-arrow{margin-top:1.5rem}
.geo-mgr{margin-top:.9rem; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--steel-dk)}

.geo-facts{display:grid; gap:1px; background:var(--line); border:1px solid var(--line-2)}
.gf{background:var(--ink); padding:1.25rem clamp(1.5rem,2.6vw,2.1rem); display:flex; align-items:baseline; gap:1.1rem}
.gf b{font-family:var(--f-dis); font-size:1.5rem; color:var(--paper); min-width:3.2rem}
.gf span{color:var(--steel); font-size:.88rem; line-height:1.45}

.geo-revs{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line-2)}
.geo-revs .geo-lbl{background:var(--ink); margin:0; padding:1.1rem clamp(1.5rem,2.6vw,2.1rem) .6rem}
.geo-rev{background:var(--ink); padding:1.15rem clamp(1.5rem,2.6vw,2.1rem)}
.geo-rev[data-geo-focus]{cursor:pointer; transition:background var(--t1) var(--e)}
.geo-rev[data-geo-focus]:hover,.geo-rev[data-geo-focus]:focus-visible{background:var(--ink-3)}
.geo-rev blockquote{font-size:.94rem; line-height:1.55; color:var(--paper)}
.geo-rev figcaption{margin-top:.7rem; font-size:.61rem; letter-spacing:.16em; text-transform:uppercase; color:var(--amber-sm)}

/* рейтинг организации на Яндекс.Картах в боковой карточке */
.geo-ya-rating{display:flex; align-items:baseline; gap:.7rem; margin-bottom:.4rem}
.geo-ya-rating b{font-family:var(--f-dis); font-size:2rem; line-height:1; color:var(--paper)}
.geo-stars{color:var(--amber-sm); letter-spacing:.22em; font-size:.82rem}

/* лента всех отзывов под картой: крутится вбок, карточка ↔ точка на карте */
.geo-reviews{margin-top:clamp(1.5rem,3vw,2.6rem)}
.geo-reviews-head{display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1rem}
.geo-reviews-head .geo-lbl{margin-bottom:0}
.geo-reviews .geo-hint{display:inline; margin:0}
.geo-rev-nav{display:flex; gap:.5rem}
.geo-rev-nav[aria-hidden="true"]{visibility:hidden}
.geo-rev-btn{
  width:2.6rem; height:2.6rem; border:1px solid var(--line-2); background:var(--ink);
  color:var(--paper); font-size:1rem; line-height:1; cursor:pointer;
  transition:color var(--t1) var(--e), border-color var(--t1) var(--e);
}
.geo-rev-btn:hover{color:var(--amber); border-color:var(--amber)}
.geo-rev-track{
  position:relative; display:flex; gap:1px; background:var(--line); border:1px solid var(--line-2);
  overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:var(--line-2) transparent;
}
.geo-revcard{
  margin:0; flex:0 0 clamp(17rem,26vw,22rem); scroll-snap-align:center;
  background:var(--ink); padding:clamp(1.2rem,2vw,1.7rem);
  display:flex; flex-direction:column; gap:.65rem;
  transition:background var(--t1) var(--e), box-shadow var(--t1) var(--e);
}
.geo-revcard[data-geo-focus]{cursor:pointer}
.geo-revcard[data-geo-focus]:hover,
.geo-revcard[data-geo-focus]:focus-visible{background:var(--ink-3)}
.geo-revcard.is-selected{background:var(--ink-3); box-shadow:inset 0 0 0 2px var(--amber-sm)}
.geo-revcard-photo{width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--ink-3)}
.geo-rev-meta{display:flex; justify-content:space-between; gap:1rem; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase}
.geo-rev-meta .geo-rev-city{color:var(--paper)}
.geo-rev-meta .geo-rev-date{color:var(--steel)}
.geo-revcard .geo-stars{font-size:.78rem}
.geo-revcard blockquote{
  margin:0; font-size:.92rem; line-height:1.55; color:var(--paper);
  display:-webkit-box; -webkit-line-clamp:7; -webkit-box-orient:vertical; overflow:hidden;
}
.geo-revcard figcaption{margin-top:auto; font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; color:var(--amber-sm)}
.geo-revcard .geo-rev-src{color:var(--steel); text-transform:none; letter-spacing:.06em}
.geo-rev-link{font-size:.78rem}
@media (max-width: 640px){ .geo-revcard{flex-basis:min(85vw,20rem)} }

@media(max-width:1000px){
  .geo-grid{grid-template-columns:1fr}
  .geo-map{height:clamp(20rem,58vw,26rem)}
}
@media(max-width:520px){
  .geo-pin--prod i{font-size:.52rem}
}

/* ==========================================================================
   ДОВОДКА ЦВЕТА — 20 августа 2026
   Замечание заказчика: «цвета тусклые, глаза устают».
   Дизайн-система не меняется: используются уже существующие токены бумаги.
   Задачи: разорвать длинные тёмные участки, снять приглушающий фильтр
   с фотографий, поднять контраст текста, вернуть янтарь в роль акцента.
   Замер до правок: самая длинная непрерывная тёмная полоса — 3492px (3.9 экрана).
   ========================================================================== */

/* --- контраст текста: меньше «серого по серому» ------------------------- */
:root{
  --steel:      #b7bec9;   /* было #a0a9b7 — основной текст на угле */
  --steel-dk:   #9aa3b1;   /* было #8a93a1 */
  --on-paper-2: #4a4e56;   /* было #5c6068 — мелкий текст на бумаге */
}

/* --- 1. МАТЕРИЯ на бумаге ---------------------------------------------
   Разрывает тёмную связку interlude → materia → ai (было 3010px подряд). */
.materia{
  background:var(--paper-3); color:var(--on-paper);
  --mask:var(--paper-3); border-bottom-color:var(--line-p);
}
.materia .eyebrow{color:var(--amber-sm-p)}
.materia .sec-note, .materia .mono{color:var(--on-paper-2)}
.materia h2, .materia h3, .materia b, .materia .light{color:var(--on-paper)}
.materia .mat{border-color:var(--line-p)}
.materia .link-arrow{color:var(--on-paper)}
/* фактура и цвет материала — часть продукта, приглушать их незачем */
.mat>img{filter:saturate(.98) brightness(1.02) contrast(1.02)}

/* --- 2. ПРОИЗВОДСТВО на бумаге ----------------------------------------
   Фотогерой сверху остаётся тёмным (там текст поверх кадра),
   а числа и полоса кадров переходят на бумагу. */
.factory{background:var(--paper-2); color:var(--on-paper); --mask:var(--paper-2)}
.factory .eyebrow{color:var(--amber-sm-p)}
.factory .sub, .factory .mono{color:var(--on-paper-2)}
.factory .fn b{color:var(--amber-sm-p)}
.factory .fn span{color:var(--on-paper-2)}
.factory .fn{border-color:var(--line-p)}
.factory .fact-nums{border-color:var(--line-p)}
.factory .fact-strip{border-color:var(--line-p)}
.factory .fact-strip figcaption{color:var(--on-paper-2)}
.factory .link-arrow, .factory .light{color:var(--on-paper)}
.fact-strip figure img{filter:saturate(.94) brightness(1)}
.fact-strip figure:hover img{filter:saturate(1) brightness(1.03)}

/* --- 3. ГЕОГРАФИЯ на бумаге, карта в светлой гамме ---------------------
   Убран invert: плитки больше не выворачиваются в ночную гамму. */
.geo{background:var(--paper-3); color:var(--on-paper); border-top-color:var(--line-p)}
.geo .eyebrow{color:var(--amber-sm-p)}
.geo .sec-note, .geo .mono{color:var(--on-paper-2)}
.geo h2, .geo h3, .geo b{color:var(--on-paper)}
.geo-mapwrap{border-color:var(--line-p); background:var(--paper-2)}
.geo-map{background:var(--paper-2)}
.geo-map .leaflet-tile-pane{filter:grayscale(.55) brightness(1.03) contrast(.96) saturate(.8)}
.geo-map .leaflet-container{background:var(--paper-2)}
.geo-map .leaflet-control-attribution{background:rgba(245,242,236,.86); color:var(--on-paper-2)}
.geo-map .leaflet-control-attribution a{color:var(--amber-sm-p)}
.geo-map .leaflet-bar a{background:var(--paper-3); color:var(--on-paper); border-color:var(--line-p)}
.geo-map .leaflet-bar a:hover{background:var(--paper-2); color:var(--amber-sm-p)}
.geo-noscript{color:var(--on-paper-2)}

/* --- 4. мелкие разреженные подписи: крупнее и плотнее -------------------
   Их стало меньше визуально не за счёт удаления смысла, а за счёт того,
   что они перестали быть «пылью» — читаемый размер и спокойный трекинг. */
.mono{letter-spacing:.1em}
.eyebrow{font-size:.68rem; letter-spacing:.11em}
.sec-note{font-size:.82rem}

/* --- 5. приглушение фотографий снято в остальных местах ---------------- */
.interlude>img{filter:saturate(.9) brightness(.9) contrast(1.04)}

/* --- доводка внутренних блоков перекрашенных секций ---------------------
   Первый проход перевёл секции на бумагу, но внутри остались карточки
   с угольным фоном: на них светлый текст стал тёмным по тёмному.
   Здесь эти карточки переводятся на бумагу целиком и согласованно. */

/* подписи на карточках материалов должны читаться и на светлом кадре */
.mat figcaption{
  background:linear-gradient(180deg, transparent 0%, rgba(9,10,13,.16) 38%, rgba(9,10,13,.66) 100%);
  padding-top:2.6rem;
}

/* карточка адреса и факты производства — на бумаге */
.geo-card{background:var(--paper-2); border-color:var(--line-p)}
.geo-card .geo-lbl{color:var(--amber-sm-p)}
.geo-card .geo-addr{color:var(--on-paper)}
.geo-card .geo-note{color:var(--on-paper-2)}
.geo-card .geo-mgr{color:var(--on-paper-2)}
.geo-card .link-arrow{color:var(--on-paper)}
.geo-facts{background:var(--line-p); border-color:var(--line-p)}
.gf{background:var(--paper-2)}
.gf b{color:var(--amber-sm-p)}
.gf span{color:var(--on-paper-2)}

/* блок отзывов у карты — тоже на бумаге */
.geo-revs{background:var(--line-p); border-color:var(--line-p)}
.geo-revs .geo-lbl{background:var(--paper-2); color:var(--amber-sm-p)}
.geo-rev{background:var(--paper-2)}
.geo-rev[data-geo-focus]:hover,
.geo-rev[data-geo-focus]:focus-visible{background:var(--paper-3)}
.geo-rev blockquote{color:var(--on-paper)}
.geo-rev figcaption{color:var(--amber-sm-p)}
.geo-ya-rating b{color:var(--on-paper)}
.geo-stars{color:var(--amber-sm-p)}
.geo-reviews .geo-lbl{color:var(--amber-sm-p)}
.geo-rev-btn{background:var(--paper-3); color:var(--on-paper); border-color:var(--line-p)}
.geo-rev-btn:hover{color:var(--amber-sm-p); border-color:var(--amber-sm-p)}
.geo-rev-track{background:var(--line-p); border-color:var(--line-p); scrollbar-color:var(--line-p) transparent}
.geo-revcard{background:var(--paper-2)}
.geo-revcard[data-geo-focus]:hover,
.geo-revcard[data-geo-focus]:focus-visible{background:var(--paper-3)}
.geo-revcard.is-selected{background:var(--paper-3); box-shadow:inset 0 0 0 2px var(--amber-sm-p)}
.geo-revcard-photo{background:var(--paper-3)}
.geo-revcard .geo-rev-link{color:var(--on-paper)}
.geo-rev-meta .geo-rev-city{color:var(--on-paper)}
.geo-rev-meta .geo-rev-date{color:var(--on-paper-2)}
.geo-revcard blockquote{color:var(--on-paper)}
.geo-revcard figcaption{color:var(--amber-sm-p)}
.geo-revcard .geo-rev-src{color:var(--on-paper-2)}

/* производство: числа и полоса кадров на бумаге, фотогерой не тронут */
.fact-strip{background:var(--line-p)}
.fact-strip figure{background:var(--paper-2)}
.fact-strip figcaption{
  background:linear-gradient(180deg, transparent 0%, rgba(9,10,13,.16) 38%, rgba(9,10,13,.66) 100%);
  padding-top:2.2rem; color:#fff;
}

/* фотогерой производства остаётся тёмным — ссылка и подписи на нём светлые */
.fact-hero .link-arrow{color:var(--paper)}
.fact-hero .link-arrow:hover{color:var(--amber-lt)}
.fact-strip figcaption b{color:#fff}
.fact-strip figcaption .mono{color:rgba(236,231,222,.9)}

/* --- каталог: реальное фото изделия — главный кадр -----------------------
   Продуктовый кадр вертикальный и показывается целиком (contain) на светлой
   подложке. Визуализация окружения — вторым, меньшим кадром. */
.plate.product{aspect-ratio:4/5; background:#f7f5f0}
.plate.product>.scene-picture>img{object-fit:contain; padding:clamp(.6rem,1.6vw,1.4rem)}
.det>img{aspect-ratio:16/10; object-fit:cover; background:#e9e5dd}
/* карточка без визуализации: продуктовый кадр занимает всю медиа-колонку */
.feat-solo .plate.product{aspect-ratio:4/5}

/* --- карточка отзыва у карты: город, тип проекта, фото двери ------------
   На мобильном список — основной способ навигации: карта ниже по высоте,
   а города выбираются крупными тапабельными карточками, не мелкими маркерами. */
.geo-hint{
  display:block; margin-top:.4rem; font-size:.55rem; letter-spacing:.1em;
  color:var(--on-paper-2); text-transform:none;
}
.geo-rev{display:grid; grid-template-columns:5.5rem 1fr; gap:1rem; align-items:start}
.geo-rev-photo{width:100%; aspect-ratio:4/5; object-fit:cover; background:var(--paper-3)}
.geo-rev:not(:has(.geo-rev-photo)){grid-template-columns:1fr}
.geo-rev-city{font-family:var(--f-dis); font-size:1.05rem; line-height:1.25; color:var(--on-paper)}
.geo-rev-type{
  margin-top:.2rem; font-size:.56rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--amber-sm-p);
}
.geo-rev blockquote{margin-top:.55rem}
.geo-rev[data-geo-focus]{cursor:pointer}

@media(max-width:900px){
  .geo-grid{grid-template-columns:1fr}
  .geo-map{height:clamp(15rem,44vw,20rem)}
  .geo-rev{grid-template-columns:4.6rem 1fr; padding:1rem clamp(1rem,4vw,1.5rem)}
  .geo-rev-city{font-size:1rem}
  .geo-rev blockquote{font-size:.9rem}
}

/* --- читаемость навигации над светлым Hero -------------------------------
   Кадр Variant A светлый в верхней части, поэтому шапке нужна опора:
   мягкий градиент сверху и подложка под кнопкой. На тёмных страницах
   градиент незаметен, а подложка совпадает с фоном. */
.hero-scrim{
  background:
    linear-gradient(180deg, rgba(9,12,19,.52) 0%, rgba(9,12,19,.22) 9%, transparent 18%),
    linear-gradient(100deg, rgba(9,12,19,.74) 0%, rgba(9,12,19,.42) 27%, rgba(9,12,19,.04) 47%, transparent 61%),
    linear-gradient(180deg, transparent 72%, rgba(9,12,19,.42) 100%);
}
.nav:not(.solid) .nav-cta{
  background:rgba(12,13,16,.34); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
}
.nav:not(.solid) .nav-links .lnk,
.nav:not(.solid) .nav-tel{text-shadow:0 1px 14px rgba(6,9,14,.6)}
.nav:not(.solid) .logo span{text-shadow:0 1px 14px rgba(6,9,14,.55)}
.hero-meta{color:rgba(236,231,222,.82); text-shadow:0 1px 12px rgba(6,9,14,.75)}
.hero-meta .b{color:#fff}

@media(max-width:1000px){
  .hero-scrim{
    background:
      linear-gradient(180deg, rgba(9,12,19,.5) 0%, rgba(9,12,19,.16) 11%, transparent 22%),
      linear-gradient(180deg, transparent 24%, rgba(9,12,19,.84) 74%, #0c0d10 100%);
  }
}

/* --- финальный CTA на тёплой бумаге -------------------------------------
   Раньше страница заканчивалась двумя тёмными экранами подряд (846 + 419 px).
   Теперь финал светлый и тёплый, тёмным остаётся только футер. */
.final.final-light{
  min-height:auto; padding:clamp(4.5rem,10vw,8rem) 0;
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(216,154,78,.15), transparent 62%),
    linear-gradient(180deg, var(--paper-3) 0%, var(--paper-2) 100%);
  color:var(--on-paper);
}
.final-light .eyebrow{color:var(--amber-sm-p)}
.final-light h2{color:var(--on-paper); text-shadow:none}
.final-light .fin-sub{color:var(--on-paper-2)}
.final-light .fin-note{margin-top:2.2rem; color:var(--on-paper-2); font-size:.6rem; letter-spacing:.1em}
.final-light .btn-dark{background:var(--on-paper); color:var(--paper); border:1px solid var(--on-paper)}
.final-light .btn-dark:hover{background:#000; border-color:#000}

/* продуктовые кадры каталога: цвет и фактура двери насыщеннее, но естественно */
.plate.product>.scene-picture>img{filter:saturate(1.06) contrast(1.03) brightness(1.01)}

.final-light .fin-sub{text-shadow:none}
.final-light .grain{display:none}
/* ==== Hero: большой CTA справа + попап квиза ==== */
.hero-quiz-cta{position:absolute; right:4.5vw; top:50%; transform:translateY(-50%); z-index:6}
.hero-quiz-btn{
  display:flex; flex-direction:column; align-items:flex-start; gap:.55rem;
  padding:1.5rem 1.7rem 1.4rem; min-width:19rem; cursor:pointer; text-align:left;
  color:#16171b; background:linear-gradient(135deg,#f2b56b,#e09a43 58%,#cf8830);
  border:1px solid rgba(255,255,255,.35); border-radius:1.1rem;
  box-shadow:0 22px 55px rgba(0,0,0,.45), 0 4px 14px rgba(224,154,67,.35);
  transition:transform .25s ease, box-shadow .25s ease;
  animation:heroQuizPulse 3.2s ease-in-out infinite;
}
.hero-quiz-btn:hover{transform:translateY(-3px); box-shadow:0 28px 65px rgba(0,0,0,.5), 0 8px 22px rgba(224,154,67,.5); animation-play-state:paused}
.hero-quiz-btn__kick{font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; opacity:.72}
.hero-quiz-btn__title{font-size:1.5rem; line-height:1.16; font-weight:700; letter-spacing:-.01em}
.hero-quiz-btn__go{display:inline-flex; align-items:center; gap:.45rem; margin-top:.35rem; padding:.55rem 1rem; font-size:.8rem; font-weight:600; color:#f6ede0; background:#16171b; border-radius:.6rem}
.hero-quiz-btn__go i{font-style:normal; transition:transform .2s}
.hero-quiz-btn:hover .hero-quiz-btn__go i{transform:translateX(4px)}
@keyframes heroQuizPulse{0%,100%{box-shadow:0 22px 55px rgba(0,0,0,.45),0 4px 14px rgba(224,154,67,.35)}50%{box-shadow:0 22px 55px rgba(0,0,0,.45),0 6px 26px rgba(224,154,67,.6)}}
@media(max-width:900px){
  .hero-quiz-cta{position:static; transform:none; margin:1.6rem 1rem 0; display:flex; justify-content:center}
  .hero-quiz-btn{min-width:0; width:100%; max-width:26rem}
}
/* Попап */
.quiz-modal{position:fixed; inset:0; z-index:1000}
.quiz-modal[hidden]{display:none}
.quiz-modal__backdrop{position:absolute; inset:0; background:rgba(10,11,14,.78); backdrop-filter:blur(4px)}
.quiz-modal__window{position:absolute; inset:2.5vh 2.5vw; background:#101116; border-radius:1rem; overflow:hidden; box-shadow:0 40px 120px rgba(0,0,0,.6)}
.quiz-modal__frame{width:100%; height:100%; border:0; display:block; background:#101116}
.quiz-modal__close{position:absolute; top:.6rem; right:.6rem; z-index:2; width:2.6rem; height:2.6rem; border:0; border-radius:.7rem; background:rgba(255,255,255,.12); color:#fff; font-size:1.5rem; line-height:1; cursor:pointer; transition:background .2s}
.quiz-modal__close:hover{background:#e09a43; color:#16171b}
@media(max-width:700px){ .quiz-modal__window{inset:0; border-radius:0} }