/* Neil Pro Studio — ногтевая студия, Красноярск.
   Гамма: почти монохром на стальном тоне, фон светлый с тёплым подтоном.
   Приёмы страницы: скошенные границы секций, плашки-подложки,
   капс с разрядкой в надзаголовках, зерно поверх фонов. */

:root{
  /* стальной тон одной статьи, разной светлоты */
  --steel-900: oklch(22% .018 250);
  --steel-700: oklch(36% .028 250);
  --steel-600: oklch(46% .034 250);
  --steel-500: oklch(56% .032 250);
  --steel-400: oklch(64% .028 250);
  --steel-200: oklch(84% .014 250);

  --bg:       oklch(96.4% .006 80);   /* светлый с тёплым подтоном, не крем */
  --bg-2:     oklch(93.2% .008 80);
  --plate:    oklch(99% .004 80);
  --ink:      var(--steel-900);
  --ink-2:    oklch(45% .02 255);
  --line:     oklch(87% .01 250);
  --accent:   var(--steel-600);
  --on-dark:  oklch(95% .006 80);

  --r: 4px;                /* острые скругления — характер формы */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4rem; --s6:6rem;
  --wrap: 1200px;
  --sans: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --ease: cubic-bezier(.2,.7,.3,1);
}

html[data-theme="dark"]{
  --bg:     oklch(19.5% .014 255);
  --bg-2:   oklch(24% .016 255);
  --plate:  oklch(23% .015 255);
  --ink:    oklch(94% .008 85);
  --ink-2:  oklch(76% .014 255);
  --line:   oklch(34% .018 255);
  --accent: oklch(74% .05 250);
  --on-dark: oklch(96% .006 85);
  --steel-900: oklch(14% .012 255);
  --steel-500: oklch(62% .03 255);
  --steel-200: oklch(38% .018 255);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 clamp(1rem,.96rem + .2vw,1.075rem)/1.6 var(--sans);
  overflow-x:hidden;
  font-synthesis-weight:none;
}
/* Зерно поверх фонов — фирменный приём страницы */
body::before{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
}
html[data-theme="dark"] body::before{mix-blend-mode:screen; opacity:.22}

img{max-width:100%; height:auto; display:block; -webkit-user-drag:none}
a{color:inherit}
::selection{background:var(--accent); color:var(--on-dark)}
:focus-visible{outline:2.5px solid var(--accent); outline-offset:3px; border-radius:2px}
.nb{white-space:nowrap; font-variant-numeric:tabular-nums}
.muted{color:var(--ink-2)}

.wrap{width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto}
@media (max-width:600px){ .wrap{width:min(100% - 1.75rem, var(--wrap))} }

.skip{position:absolute; left:-9999px}
.skip:focus{left:1rem; top:1rem; z-index:70; background:var(--accent); color:var(--on-dark); padding:.6rem 1rem}

/* иконки — свой набор, штрих 1.7, сетка 24 */
.ic{width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7;
    stroke-linecap:round; stroke-linejoin:round}

/* ---------- шапка ---------- */
.top{position:sticky; top:0; z-index:50; background:color-mix(in oklab, var(--bg) 88%, transparent);
     backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.top__in{width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; display:flex; align-items:center;
         gap:var(--s2); min-height:64px}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; margin-right:auto; padding:.4rem 0}
.brand img{width:34px; height:34px}
.brand__t{display:flex; flex-direction:column; line-height:1.15}
.brand__t b{font-size:.98rem; letter-spacing:-.01em}
.brand__t i{font-style:normal; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2)}
.nav{display:flex; gap:var(--s3)}
.nav a{text-decoration:none; font-size:.92rem; color:var(--ink-2); display:inline-flex; align-items:center;
       min-height:44px; border-bottom:1.5px solid transparent;
       transition:color .18s var(--ease), border-color .18s var(--ease)}
.nav a:hover{color:var(--ink); border-bottom-color:var(--accent)}
.top__act{display:flex; align-items:center; gap:.5rem}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
     background:var(--accent); color:var(--on-dark); text-decoration:none;
     border:1.5px solid var(--accent); border-radius:var(--r); cursor:pointer;
     font:600 .95rem/1.15 var(--sans); padding:.85rem 1.15rem; min-height:46px;
     transition:transform .18s var(--ease), background .18s var(--ease), color .18s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn--sm{padding:.6rem .8rem; min-height:44px; font-size:.88rem}
.btn--big{padding:1.05rem 1.5rem; font-size:1rem; min-height:54px}
.btn--wide{width:100%}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn--ghost:hover{border-color:var(--accent); color:var(--accent)}
.btn--inv{background:var(--on-dark); color:var(--steel-900); border-color:var(--on-dark)}
.btn--line{background:transparent; color:var(--on-dark); border-color:color-mix(in oklab, var(--on-dark) 45%, transparent)}
.btn--line:hover{border-color:var(--on-dark)}
/* WhatsApp — равноправное второе действие: тот же кегль, контурная подача */
.btn--wa{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn--wa:hover{background:var(--ink); color:var(--bg)}
.btn .arr{transition:transform .2s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}

.icon-btn{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
          background:transparent; border:1.5px solid var(--line); border-radius:var(--r);
          color:var(--ink); cursor:pointer; transition:border-color .18s var(--ease), color .18s var(--ease)}
.icon-btn:hover{border-color:var(--accent); color:var(--accent)}
.ic--moon{display:none}
html[data-theme="dark"] .ic--sun{display:none}
html[data-theme="dark"] .ic--moon{display:block}
.burger{display:none}

@media (max-width:980px){
  .nav{position:absolute; top:100%; left:0; right:0; background:var(--bg); border-bottom:1px solid var(--line);
       flex-direction:column; gap:0; padding:.5rem 1.25rem 1rem; display:none}
  .nav.open{display:flex}
  .nav a{padding:.75rem 0; border-bottom:1px solid var(--line)}
  .burger{display:inline-flex}
  /* на узких экранах номер прячем визуально, доступное имя остаётся на ссылке */
  .top__act .btn--sm .tl{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
  .top__act .btn--sm{padding:.6rem; width:44px}
}
@media (max-width:600px){ .top__in{width:min(100% - 1.75rem, var(--wrap))} }

/* ---------- первый экран: типографика во весь экран ---------- */
.hero{
  width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto;
  padding:clamp(2.5rem,7vw,5rem) 0 clamp(2.5rem,6vw,4.5rem);
  min-height:calc(100svh - 64px); display:flex; flex-direction:column; justify-content:center;
}
@media (max-width:600px){ .hero{width:min(100% - 1.75rem, var(--wrap)); min-height:0} }

.over{
  font:600 .68rem/1.4 var(--sans); letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-2); margin:0 0 var(--s2); display:flex; align-items:center; gap:.65rem; flex-wrap:wrap;
}
.over .num{font-family:var(--mono); letter-spacing:.06em; color:var(--accent)}
.over--inv{color:color-mix(in oklab, var(--on-dark) 70%, transparent)}
.hero__over{font:600 .68rem/1.5 var(--sans); letter-spacing:.26em; text-transform:uppercase;
            color:var(--ink-2); margin:0 0 clamp(1rem,3vw,2rem)}

/* кегль подобран так, чтобы «в Красноярске» вставало в одну строку */
.hero__h{margin:0; font-weight:800; letter-spacing:-.035em; line-height:.92;
         font-size:clamp(2.3rem, 9.2vw, 8.4rem); text-transform:none}
.hero__h .l{display:block}
.hero__h .l2{color:var(--steel-500)}
.hero__h .l3{color:var(--steel-400)}   /* заливка с падением насыщенности, без контура */
html[data-theme="dark"] .hero__h .l2{color:oklch(72% .04 250)}
html[data-theme="dark"] .hero__h .l3{color:oklch(56% .03 250)}
.hero__sig{
  display:block; margin-top:clamp(.6rem,1.6vw,1.1rem);
  font:600 clamp(.72rem,1.1vw,.9rem)/1 var(--sans); letter-spacing:.32em; text-transform:uppercase;
  color:var(--ink-2);
}

.hero__foot{margin-top:clamp(2rem,5vw,3.5rem); display:grid; gap:var(--s3);
            grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:end}
.hero__lead{margin:0; max-width:56ch; color:var(--ink-2); font-size:clamp(1rem,.95rem + .3vw,1.15rem)}
.hero__lead b{color:var(--ink)}
.hero__cta{display:flex; flex-wrap:wrap; gap:.75rem; align-content:end}
.hero__cta .btn{flex:1 1 15rem}
.hero__meta{grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:var(--s1) clamp(1.5rem,4vw,3.5rem);
            margin:var(--s3) 0 0; padding-top:var(--s2); border-top:1px solid var(--line)}
.hero__meta dt{font:600 .62rem/1.4 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2)}
.hero__meta dd{margin:.2rem 0 0; font-weight:600}
.hero__meta a{display:inline-block; padding:.5rem 0; text-decoration:none; border-bottom:1.5px solid var(--accent)}
@media (max-width:860px){
  .hero__foot{grid-template-columns:1fr; align-items:start}
}

/* появление строк первого экрана — только при живом скрипте */
.js .rise{opacity:0; transform:translateY(18px)}
.js .rise.on{opacity:1; transform:none; transition:opacity .55s var(--ease), transform .55s var(--ease)}
.js .r2.on{transition-delay:.06s} .js .r3.on{transition-delay:.12s}
.js .r4.on{transition-delay:.18s} .js .r5.on{transition-delay:.24s}
.js .r6.on{transition-delay:.3s}

/* ---------- секции со скошенными границами ---------- */
.sec{position:relative; padding:clamp(3rem,7vw,6rem) 0}
.h2{margin:0 0 var(--s2); font-weight:750; letter-spacing:-.025em; line-height:1.04;
    font-size:clamp(1.7rem,1.15rem + 2.4vw,3.1rem)}
.sec__lead{margin:0 0 var(--s4); max-width:62ch; color:var(--ink-2)}

/* услуги — плашка-подложка со скосом снизу */
.sec--slab{
  background:var(--bg-2);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 3.5vw), 0 100%);
  padding-bottom:clamp(5rem,10vw,8rem);
}
.sec--facts{background:var(--steel-900); color:var(--on-dark);
  clip-path:polygon(0 3.5vw, 100% 0, 100% 100%, 0 100%);
  margin-top:-2vw; padding-top:clamp(5rem,10vw,7rem)}
.sec--facts .over{color:color-mix(in oklab, var(--on-dark) 62%, transparent)}
.sec--facts .over .num{color:var(--steel-400)}
html[data-theme="dark"] .sec--facts{background:oklch(14% .012 255)}

/* колонки не растягиваем: плитка с тремя пунктами не тянется до пяти */
.grid-serv{display:grid; gap:var(--s2); align-items:start;
           grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.plate{background:var(--plate); border:1px solid var(--line); border-radius:var(--r);
       padding:clamp(1.25rem,2.5vw,1.75rem)}
.plate__h{margin:0 0 var(--s2); font:600 .68rem/1 var(--sans); letter-spacing:.24em;
          text-transform:uppercase; color:var(--ink-2)}
.plate__h--2{margin-top:var(--s3)}
.plate--dark{background:var(--accent); color:var(--on-dark); border-color:var(--accent);
             display:flex; flex-direction:column; gap:var(--s2)}
.plate__acts{display:grid; gap:.6rem}
.plate--flat{background:transparent}
.sec--facts .plate--flat{border-color:color-mix(in oklab, var(--on-dark) 22%, transparent)}

.list{list-style:none; margin:0; padding:0}
.list li{display:grid; grid-template-columns:2.2rem 1fr; gap:.15rem .5rem; align-items:baseline;
         padding:.7rem 0; border-top:1px solid var(--line)}
.list li:first-child{border-top:0; padding-top:0}
.list__n{font:500 .72rem/1.5 var(--mono); color:var(--accent)}
.list__t{font-weight:600}
.list__d{grid-column:2; font-size:.85rem; color:var(--ink-2)}
.ask{margin:0; font-size:.95rem; color:color-mix(in oklab, var(--on-dark) 88%, transparent)}
.ask--sm{font-size:.82rem}
.plain{margin:0; color:var(--ink-2)}
.sec--facts .plain{color:color-mix(in oklab, var(--on-dark) 78%, transparent)}

/* три шага записи */
.steps{list-style:none; margin:0 0 var(--s4); padding:0; display:grid; gap:var(--s2);
       grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); align-items:start}
.step{padding-top:var(--s2); border-top:2px solid color-mix(in oklab, var(--on-dark) 30%, transparent)}
.step__n{display:block; font-weight:800; letter-spacing:-.04em; line-height:.85;
         font-size:clamp(3.4rem,7vw,5.5rem); font-variant-numeric:tabular-nums;
         color:color-mix(in oklab, var(--on-dark) 92%, transparent)}
.step__h{margin:.8rem 0 .35rem; font-size:1.05rem; font-weight:700; letter-spacing:-.01em}
.step__p{margin:0; font-size:.9rem; line-height:1.5; max-width:32ch;
         color:color-mix(in oklab, var(--on-dark) 72%, transparent)}
.step__a{margin:.7rem 0 0; font-size:.92rem; display:flex; flex-wrap:wrap; gap:.2rem 1rem;
         color:color-mix(in oklab, var(--on-dark) 72%, transparent)}
.step__a a{display:inline-block; padding:.5rem 0; font-weight:600; text-decoration:none;
           color:var(--on-dark); border-bottom:1.5px solid color-mix(in oklab, var(--on-dark) 55%, transparent)}
.step__a a:hover{border-bottom-color:var(--on-dark)}
.facts__row{display:grid; gap:var(--s2); grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
            align-items:start}

/* фото студии — компактный разворот: текст слева, кадр справа */
.sec--look{padding-top:clamp(3.5rem,8vw,6rem)}
.look__in{display:grid; gap:clamp(1.25rem,3vw,2.5rem); grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
          align-items:center}
@media (max-width:860px){ .look__in{grid-template-columns:1fr} }
.look__t .h2{margin-bottom:var(--s2)}
.shot{margin:0}
.shot__btn{display:block; width:100%; padding:0; border:1px solid var(--line); background:var(--bg-2);
           border-radius:var(--r); overflow:hidden; cursor:zoom-in; position:relative}
.shot__btn img{width:100%; aspect-ratio:4/3; max-height:420px; object-fit:cover;
               transition:transform .35s var(--ease); filter:saturate(.85) contrast(1.02)}
.shot__btn:hover img{transform:scale(1.02)}
.shot__zoom{position:absolute; right:1rem; bottom:1rem; width:44px; height:44px; display:grid; place-items:center;
            background:var(--accent); color:var(--on-dark); border-radius:var(--r)}
.shot figcaption{margin-top:.75rem; font-size:.85rem; color:var(--ink-2)}

/* контакты: карта во всю ширину, карточка поверх неё */
.cc{position:relative; margin-top:var(--s3)}
.info{background:var(--plate); border:1px solid var(--line); border-radius:var(--r);
      padding:clamp(1.25rem,2.5vw,1.75rem); display:flex; flex-direction:column; gap:var(--s2);
      width:min(100% - 2.5rem, var(--wrap)); margin:calc(-1 * var(--s4)) auto 0; position:relative; z-index:2;
      box-shadow:0 14px 40px color-mix(in oklab, var(--steel-900) 18%, transparent)}
.status{display:flex; align-items:center; gap:.55rem; margin:0; font-weight:600}
.status .dot{width:9px; height:9px; border-radius:50%; background:var(--accent); flex:none}
.info__dl{margin:0; display:grid; gap:var(--s2)}
.info__dl dt{font:600 .62rem/1.4 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2)}
.info__dl dd{margin:.3rem 0 0; overflow-wrap:anywhere}
.info__dl a{display:inline-block; padding:.35rem 0; text-decoration:none; border-bottom:1.5px solid var(--accent)}
.info__acts{display:grid; gap:.6rem; margin-top:auto}
@media (min-width:901px){
  .cc{display:grid; grid-template-columns:1fr min(100% - 2.5rem, var(--wrap)) 1fr}
  .map{grid-column:1 / -1; grid-row:1}
  .info{grid-column:2; grid-row:1; align-self:center; justify-self:end;
        width:min(100%, 390px); margin:0}
}

/* карта */
.map{position:relative; overflow:hidden; border-block:1px solid var(--line);
     min-height:clamp(360px, 52vw, 620px); background:var(--bg-2); touch-action:pan-y;
     user-select:none; -webkit-user-select:none; cursor:grab}
.map.grabbing{cursor:grabbing}
.map__layer{position:absolute; inset:0}
.map__layer img{position:absolute; width:256px; height:256px; max-width:none;
                will-change:transform; -webkit-user-drag:none}
html[data-theme="dark"] .map__layer{filter:invert(.92) hue-rotate(180deg) saturate(.6)}
.map__pin{position:absolute; left:50%; top:50%; width:34px; height:34px; margin:-34px 0 0 -17px;
          color:var(--accent); pointer-events:none; filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}
.map__pin svg{width:100%; height:100%; fill:currentColor}
.map__pin .pin-eye{fill:var(--plate)}
.map__ui{position:absolute; left:.6rem; top:.6rem; display:flex; flex-direction:column; gap:.4rem; z-index:3}
.map__ui button{width:44px; height:44px; display:grid; place-items:center; cursor:pointer;
                background:var(--plate); color:var(--ink); border:1px solid var(--line);
                border-radius:var(--r); font:600 1.2rem/1 var(--sans)}
.map__ui button:hover{border-color:var(--accent); color:var(--accent)}
.map__cr{position:absolute; left:.5rem; bottom:.4rem; margin:0; font-size:.62rem; color:var(--ink-2);
         background:color-mix(in oklab, var(--plate) 78%, transparent); padding:.1rem .3rem; border-radius:2px}

/* призыв со скосом */
.cutout{background:var(--accent); color:var(--on-dark); padding:clamp(3rem,7vw,5rem) 0;
        clip-path:polygon(0 3vw, 100% 0, 100% 100%, 0 calc(100% - 3vw)); margin:2vw 0}
.cutout .wrap{display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center; justify-content:space-between}
.cutout__h{margin:0; font-weight:800; letter-spacing:-.03em; line-height:1.02;
           font-size:clamp(1.6rem,1.1rem + 2.2vw,2.9rem)}
.cutout__h span{color:color-mix(in oklab, var(--on-dark) 78%, transparent)}
.cutout__acts{display:flex; flex-wrap:wrap; gap:.75rem}

/* подвал */
.foot{border-top:1px solid var(--line); padding:clamp(2.5rem,5vw,3.5rem) 0 6.5rem; background:var(--bg-2)}
.foot__in{display:grid; gap:var(--s3); grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
          align-items:start}
.foot__b{margin:0 0 .5rem; font-weight:700}
.foot__p{margin:0; font-size:.86rem; line-height:1.75; color:var(--ink-2)}
.foot__p a{display:inline-block; padding:.4rem 0; text-decoration:none; border-bottom:1px solid var(--line)}
.foot__p a:hover{border-bottom-color:var(--accent); color:var(--ink)}

/* постоянные кнопки записи на телефоне: звонок и WhatsApp равны */
.callbar{display:none}
@media (max-width:700px){
  .callbar{display:grid; grid-template-columns:1fr 1fr; gap:.5rem;
           position:fixed; left:.75rem; right:.75rem; bottom:.75rem; z-index:55}
  .callbar__b{display:flex; align-items:center; justify-content:center; gap:.45rem; min-height:52px;
              background:var(--accent); color:var(--on-dark); text-decoration:none;
              border:1.5px solid var(--accent); border-radius:var(--r); font:600 .95rem/1 var(--sans);
              box-shadow:0 6px 22px color-mix(in oklab, var(--steel-900) 35%, transparent)}
  .callbar__b--wa{background:var(--plate); color:var(--ink); border-color:var(--ink)}
  .foot{padding-bottom:6.5rem}
}

/* лайтбокс */
.lb{position:fixed; inset:0; z-index:80; background:color-mix(in oklab, var(--steel-900) 92%, transparent);
    display:grid; place-items:center; padding:clamp(1rem,4vw,3rem)}
.lb[hidden]{display:none}
.lb img{max-width:100%; max-height:88vh; object-fit:contain; border-radius:var(--r)}
.lb__x{position:absolute; top:1rem; right:1rem; width:44px; height:44px; display:grid; place-items:center;
       background:transparent; border:1.5px solid color-mix(in oklab, #fff 45%, transparent);
       color:#fff; border-radius:var(--r); cursor:pointer}
.lb__x:hover{border-color:#fff}

/* появление блоков: скрытие живёт только под классом .js */
.js .reveal{opacity:0; transform:translateY(14px)}
.js .reveal.in{opacity:1; transform:none; transition:opacity .5s var(--ease), transform .5s var(--ease)}
@media (prefers-reduced-motion: reduce){
  .js .reveal, .js .rise{opacity:1; transform:none}
  .btn:hover{transform:none}
  .shot__btn:hover img{transform:none}
}