/* Lain — «Витрина». Мир клиентов — уличный малый бизнес: вывески, эмалированные таблички с заклёпками,
   полосатые маркизы над витринами. Палитра своя: бледная фисташка, баклажан, малиновый; ночью — витрина в темноте. */
:root{
  --ground:#e7edd6; --surface:#f5f7ec; --ink:#25142b; --ink-2:#4a3a50; --muted:#6a6070;
  --plum:#4b2352; --plum-2:#6b3a73; --raspberry:#c42c5f; --olive:#7b8a45; --pistachio:#b9cb7e;
  --sign:#4b2352; --sign-ink:#f1f5e3; --sign-accent:#c8dc8a; --line:#cdd5b6; --shadow:#25142b;
  --display:"Rubik Mono One","Arial Black",system-ui,sans-serif; --body:"Golos Text",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace; --wrap:1160px; --gut:clamp(16px,4vw,40px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#1b0f1f; --surface:#28172d; --ink:#eef2e0; --ink-2:#cfd3c0; --muted:#a79cad;
  --plum:#d9e6a8; --plum-2:#b9cb7e; --raspberry:#f15d8e; --olive:#b9cb7e; --pistachio:#8fa35a;
  --sign:#c42c5f; --sign-ink:#fff4f7; --sign-accent:#2b0f1d; --line:#3d2842; --shadow:#0c0610; color-scheme:dark}}
:root[data-theme="dark"]{
  --ground:#1b0f1f; --surface:#28172d; --ink:#eef2e0; --ink-2:#cfd3c0; --muted:#a79cad;
  --plum:#d9e6a8; --plum-2:#b9cb7e; --raspberry:#f15d8e; --olive:#b9cb7e; --pistachio:#8fa35a;
  --sign:#c42c5f; --sign-ink:#fff4f7; --sign-accent:#2b0f1d; --line:#3d2842; --shadow:#0c0610; color-scheme:dark}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ground);color:var(--ink);font:400 17px/1.6 var(--body);overflow-x:hidden}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.mono{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
h1,h2,h3{text-wrap:balance}

/* Эмалированная табличка: скругление, двойная рамка, заклёпки по углам */
.plate{position:relative;background:var(--sign);color:var(--sign-ink);border-radius:18px;
  box-shadow:inset 0 0 0 4px var(--sign),inset 0 0 0 6px color-mix(in srgb,var(--sign-ink) 55%,transparent)}
.plate::before,.plate::after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;top:14px;
  background:radial-gradient(circle at 35% 35%,color-mix(in srgb,var(--sign-ink) 90%,transparent),color-mix(in srgb,var(--sign-ink) 35%,transparent))}
.plate::before{left:14px}.plate::after{right:14px}

/* Шапка */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px;flex-wrap:wrap}
.brand{font:400 26px/1 var(--display);text-decoration:none;letter-spacing:.02em;color:var(--plum)}
.brand span{color:var(--raspberry)}
.nav{display:flex;gap:6px;flex-wrap:wrap}
.nav a{text-decoration:none;font-weight:500;padding:8px 12px;border-radius:999px}
.nav a:hover,.nav a:focus-visible{background:var(--surface);outline:none}

/* Первый экран — вывеска */
.hero{display:grid;grid-template-columns:1.35fr 1fr;gap:28px;align-items:stretch;padding-block:18px 56px}
.hero .plate{padding:clamp(28px,5vw,56px) clamp(22px,4vw,48px) clamp(26px,4vw,44px)}
.eyebrow{color:var(--sign-accent)}
h1{font:400 clamp(30px,4.6vw,58px)/1.08 var(--display);letter-spacing:-.01em;margin:18px 0 20px;text-transform:uppercase}
h1 em{font-style:normal;color:var(--sign-accent)}
.lead{font-size:clamp(17px,1.8vw,20px);max-width:36ch;opacity:.92}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 22px;border-radius:14px;border:0;cursor:pointer;
  font:600 16px/1 var(--body);text-decoration:none;background:var(--raspberry);color:#fff6f9;
  box-shadow:0 5px 0 color-mix(in srgb,var(--raspberry) 55%,var(--shadow));transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 color-mix(in srgb,var(--raspberry) 55%,var(--shadow))}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 color-mix(in srgb,var(--raspberry) 55%,var(--shadow))}
.btn:focus-visible{outline:3px solid var(--pistachio);outline-offset:3px}
.btn.ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.btn.ghost:hover{box-shadow:inset 0 0 0 2px currentColor;background:color-mix(in srgb,currentColor 10%,transparent)}
.hero-side{display:grid;gap:14px;align-content:start}
.hours{background:var(--surface);border-radius:18px;padding:22px}
.hours h2{font:400 15px/1.3 var(--display);text-transform:uppercase;color:var(--plum);margin-bottom:12px}
.hours dl{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-variant-numeric:tabular-nums}
.hours dt{font-family:var(--mono);font-size:13px;color:var(--muted);padding-top:2px}
.promise{background:var(--pistachio);color:#25142b;border-radius:18px;padding:20px 22px;font-weight:500}
.promise b{font:400 14px/1.3 var(--display);text-transform:uppercase;display:block;margin-bottom:6px}

/* Маркиза — полосатый навес над витриной */
.awning{height:30px;border-radius:12px 12px 0 0;
  background:repeating-linear-gradient(90deg,var(--plum) 0 26px,var(--pistachio) 26px 52px);
  -webkit-mask:radial-gradient(13px at 13px 30px,#0000 98%,var(--shadow)) -13px 0/26px 100% repeat-x;
          mask:radial-gradient(13px at 13px 30px,#0000 98%,var(--shadow)) -13px 0/26px 100% repeat-x}
.awning.r{background:repeating-linear-gradient(90deg,var(--raspberry) 0 26px,var(--surface) 26px 52px)}

section{padding-block:72px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:30px}
h2{font:400 clamp(24px,3.4vw,40px)/1.1 var(--display);text-transform:uppercase;color:var(--plum)}
.sec-head .mono{color:var(--muted)}

/* Витрины кейсов */
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:34px 28px}
.case{display:flex;flex-direction:column;text-decoration:none}
.case.wide{grid-column:1 / -1}
.shop{background:var(--surface);border-radius:0 0 18px 18px;padding:16px 16px 22px;display:grid;gap:14px;flex:1}
.case.wide .shop{grid-template-columns:1.3fr 1fr;align-items:center;gap:26px}
.glass{position:relative;aspect-ratio:16/10;max-width:100%;overflow:hidden;border-radius:12px;background:var(--ground);
  box-shadow:inset 0 0 0 2px var(--line)}
.glass iframe{position:absolute;top:0;left:0;width:250%;height:250%;border:0;transform:scale(.4);transform-origin:0 0;pointer-events:none}
.glass::after{content:"Открыть демо ↗";position:absolute;right:10px;bottom:10px;background:var(--ink);color:var(--ground);
  font:600 13px/1 var(--body);padding:9px 12px;border-radius:10px;opacity:0;transform:translateY(8px);transition:.18s}
.case:hover .glass::after,.case:focus-visible .glass::after{opacity:1;transform:none}
.case:focus-visible{outline:3px solid var(--raspberry);outline-offset:4px;border-radius:18px}
.niche{display:flex;justify-content:space-between;gap:10px;color:var(--muted)}
.case h3{font:600 clamp(20px,2.2vw,26px)/1.2 var(--body);color:var(--ink)}
.case p{color:var(--ink-2);max-width:56ch}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{font:500 11.5px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;padding:6px 9px;border-radius:999px;
  box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink-2)}
.tag.new{background:var(--raspberry);color:#fff6f9;box-shadow:none}

/* Как работаю — настоящая последовательность */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:s}
.step{background:var(--surface);border-radius:18px;padding:22px 20px;counter-increment:s}
.step::before{content:counter(s);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--plum);color:var(--ground);font:400 16px/1 var(--display);margin-bottom:14px}
.step h3{font:600 18px/1.3 var(--body);margin-bottom:6px}
.step p{color:var(--ink-2);font-size:15.5px}
.guarantee{margin-top:22px;padding:18px 22px;border-radius:18px;box-shadow:inset 0 0 0 2px var(--line);color:var(--ink-2)}

/* Направления */
.dirs{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.dir{display:grid;grid-template-columns:48px 1fr;gap:14px;padding:20px;border-radius:18px;background:var(--surface)}
.dir svg{width:44px;height:44px}
.dir h3{font:600 19px/1.3 var(--body);margin-bottom:4px}
.dir p{color:var(--ink-2)}

/* Заявка */
.contact{display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:start}
.contact .plate{padding:34px 28px 30px}
.contact .lead{max-width:32ch}
.direct{margin-top:22px;font:600 18px/1.4 var(--body)}
form{background:var(--surface);border-radius:18px;padding:26px;display:grid;gap:14px}
.field{display:grid;gap:6px}
label{font-weight:600;font-size:15px}
input,textarea,select{font:inherit;color:var(--ink);background:var(--ground);border:2px solid var(--line);border-radius:12px;padding:12px 13px;width:100%}
input:focus,textarea:focus,select:focus{outline:3px solid color-mix(in srgb,var(--raspberry) 50%,transparent);outline-offset:1px;border-color:var(--raspberry)}
textarea{min-height:110px;resize:vertical}
.consent{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-size:14px;color:var(--ink-2);font-weight:400}
.consent input{width:18px;height:18px;margin-top:3px;accent-color:var(--raspberry)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{font-weight:600;min-height:1.5em}
.form-status.ok{color:var(--olive)} .form-status.err{color:var(--raspberry)}

footer{padding-block:28px 40px;color:var(--muted)}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* Вывеска «зажигается» при загрузке — один момент движения; без анимации всё видно сразу */
@media (prefers-reduced-motion:no-preference){
  .hero .plate h1{animation:neon 1.1s ease-out both}
  @keyframes neon{0%{opacity:.25}12%{opacity:1}18%{opacity:.4}26%,100%{opacity:1}}
}

@media (max-width:900px){
  .hero,.contact{grid-template-columns:1fr}
  .case.wide .shop{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  body{font-size:16px}
  section{padding-block:52px}
  .cases,.dirs,.steps{grid-template-columns:1fr}
  form{padding:18px}
  .nav a{padding:6px 9px}
}

/* «Кто делает» */
#about{padding:clamp(40px,7vw,80px) 0 0}
.about{display:grid;gap:14px;max-width:860px}
.about p{color:var(--ink-2)}
.about .lead{color:var(--ink);font-size:clamp(18px,2vw,21px);max-width:none}
.trust{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:8px}
@media(max-width:640px){.trust{grid-template-columns:1fr}}
.trust li{background:var(--surface);border-radius:16px;padding:16px 18px;color:var(--ink-2);font-size:15.5px}
.trust b{display:block;color:var(--ink);margin-bottom:4px}