/* ============================================================================
   MY PORTALS — стилевой слой «как в кабинете». 20.09.2026, задача Ильдуса:
   «поймай тот вайб, что в админке, и примени на сайте: простота и
   респектабельность в одном флаконе, премиум».

   Что было: лендинг 2026-08-13 в приёме glassmorphism — полупрозрачные плашки
   поверх фото, розовые кнопки-пилюли с цветным заревом, карточки «прыгают» при
   наведении. Кабинет за сентябрь ушёл в другую сторону: плоско, контурные
   линии, спокойный фон, розовый ровно один раз за экран.

   Этот файл — НАДСТРОЙКА поверх исходных стилей страниц, не замена. Подключается
   последним, поэтому перебивает их. Откат — убрать одну строку <link> со страницы.

   Принципы, по которым здесь всё и сделано:
   1. Цвет — событие. Розовый остаётся только на главном действии страницы.
   2. Нет «стекла». Текст лежит на плотной поверхности, а не поверх фотографии.
   3. Движение сдержанное: тень и цвет меняются, элементы не прыгают.
   4. Один радиус (16 у карточек, 13 у кнопок) и одна тень на весь сайт.
   ========================================================================== */

:root{
  --line:#e6ecf1;         /* граница карточек — та же, что в кабинете */
  --soft:#f4f7fa;
  --shadow:0 2px 12px rgba(20,60,100,.07);
  --shadow-up:0 8px 26px rgba(20,60,100,.13);
}

/* ---------- 1. Верхняя панель: ссылки, а не стеклянные пилюли ---------- */
.topnav a.nl{
  background:none;border:none;backdrop-filter:none;
  padding:10px 14px;border-radius:10px;letter-spacing:.2px;
  opacity:.94;transition:opacity .2s, color .2s, background .2s;
}
.topnav a.nl:hover{background:rgba(255,255,255,.14);transform:none;box-shadow:none;opacity:1}
.top.scrolled .topnav a.nl{background:none;border:none;color:var(--blue-d)}
.top.scrolled .topnav a.nl:hover{background:#eef4f9;color:var(--blue-d)}

/* кнопка кабинета: плотная, без цветного зарева вокруг */
.top a.cab,.top.scrolled a.cab{
  background:var(--pink);border:none;color:#fff !important;
  border-radius:12px;padding:10px 18px;box-shadow:none;letter-spacing:.2px;
}
.top a.cab:hover{background:#c40069;box-shadow:none;transform:none}

/* ---------- 2. Кнопки: форма и вес как в кабинете ---------- */
.cta,.form button,a.cta{
  border-radius:13px;padding:15px 30px;font-size:15.5px;letter-spacing:.2px;
  box-shadow:none;transition:background .2s, color .2s;
}
.cta:hover{transform:none;box-shadow:none;background:#c40069}
.cta.ghost{
  background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.55);
  backdrop-filter:none;
}
.cta.ghost:hover{background:rgba(255,255,255,.2)}
.form button{border-radius:13px}
.form button:hover{background:#c40069}

/* ---------- 3. Первый экран: спокойнее и дороже ---------- */
/* подпись над заголовком — просто разрядка букв, коробка ей не нужна */
.hero .kicker{
  background:none;border:none;backdrop-filter:none;padding:0 0 2px;
  letter-spacing:5px;font-size:11.5px;opacity:.9;
}
/* выделенные слова: белым, а розовым — только тонкая черта под ними.
   Ярко-розовый текст поверх фотографии читается тяжело и удешевляет кадр */
.hero h1 .pink{
  color:#fff;
  box-shadow:inset 0 -.1em 0 rgba(230,0,126,.9);
  padding-bottom:.02em;
}
.hero h1{letter-spacing:0;text-shadow:0 3px 26px rgba(0,25,50,.5)}
.hero p.sub{opacity:.92}
/* цифры без стеклянных коробок: числа и тонкие разделители между ними */
.hero-stats{gap:0;margin-top:52px;border-top:1px solid rgba(255,255,255,.22);
  border-bottom:1px solid rgba(255,255,255,.22);display:inline-flex;padding:4px 0}
.hs{
  background:none;border:none;backdrop-filter:none;border-radius:0;
  padding:14px 30px;min-width:0;position:relative;
}
.hs + .hs{border-left:1px solid rgba(255,255,255,.22)}
.hs b{font-size:34px;line-height:1.1}
.hs span{font-size:11.5px;letter-spacing:.6px;opacity:.85}
@media(max-width:560px){.hs{padding:12px 16px}.hs b{font-size:26px}}

/* ---------- 4. Карточки продуктов: фото отдельно, текст отдельно ---------- */
/* было: подпись в полупрозрачной плашке поверх фотографии — текст спорил с кадром */
.pcard{
  min-height:0;border-radius:16px;display:block;color:var(--ink);
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);
}
.pcard:hover{transform:none;box-shadow:var(--shadow-up)}
.pcard .bg{position:relative;inset:auto;height:230px;border-radius:0}
.pcard:hover .bg{transform:none}
.pcard .shade{display:none}
.pcard .in{padding:18px 20px 20px}
.pcard .glass{background:none;border:none;backdrop-filter:none;border-radius:0;padding:0}
.pcard h3{color:var(--blue-d);font-size:19px}
.pcard p{color:var(--mut);opacity:1;font-size:13.5px}
/* цена — строка, а не розовая наклейка: в премиуме цену не выкрикивают */
.pcard .price{
  background:none;color:var(--blue-d);padding:0;border-radius:0;
  font-size:15px;margin-top:12px;display:block;
  border-top:1px solid var(--line);padding-top:12px;
}

/* ---------- 5. Мелкие карточки, работы, шаги — один ритм ---------- */
.pli,.work,.step{border-radius:16px;border:1px solid var(--line);box-shadow:var(--shadow)}
.work:hover{transform:none;box-shadow:var(--shadow-up)}
.work .bg{height:190px}
/* номер шага контурный — как значки в кабинете */
.step::before{
  background:none;color:var(--blue);border:1.5px solid var(--blue);
  width:32px;height:32px;font-size:14px;
}
/* галочки принципов — тоже контурные */
.plist2 li::before{background:none;color:var(--blue);border:1.5px solid var(--blue)}
.plist2 li{border-bottom:1px solid var(--line)}

/* ---------- 6. Плашки-приглашения: белые, без розовых градиентов ---------- */
.appline,.banner{
  background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);
}
.appline .cta,.banner .cta{box-shadow:none}

/* ---------- 7. Блок обслуживания ---------- */
.tocard{border-radius:20px}
.toprice{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:none;border-radius:14px}

/* ---------- 8. Форма ---------- */
.form{border-radius:20px;box-shadow:var(--shadow-up);border:1px solid var(--line)}
.form input,.form select{border-radius:12px;border:1.5px solid var(--line)}

/* ---------- 9. Типографика секций ---------- */
.sec-k{font-size:11.5px;letter-spacing:3.4px}
h2{letter-spacing:-.01em}
.lead{font-size:16.5px}
section{padding:72px 0}

/* ---------- 10. Общее: убираем «прыжки» ---------- */
.pcard,.work,.pli,.step,.cta,.top a.cab{will-change:auto}


/* ---------- 11. Телефон: две кнопки первого экрана одной ширины ----------
   Было: вторая кнопка с margin-left уезжала вбок и выглядела короче первой */
@media(max-width:560px){
  .hero .cta{display:block;width:100%;max-width:320px;margin:10px auto 0}
  .hero .cta.ghost{margin-left:auto}
}


/* ---------- 12. Поля по краям на телефоне ----------
   🔴 2026-09-20 (Ильдус, снимок журнала): текст прилипал к краю экрана. Причина не в
   контейнере, а в том, что правила вроде .head{padding:116px 0 8px} идут в файле позже
   .wrap{padding:0 20px} и обнуляют боковые поля. На широком экране это незаметно —
   там поля держит max-width, а на телефоне буквы упираются в рамку.
   Этот слой подключён последним, поэтому возвращает поля всем таким блокам. */
@media(max-width:700px){
  .wrap,.head,.rwrap,.cols,.rubrics{padding-left:16px;padding-right:16px}
  .top .wrap{padding-left:10px;padding-right:10px}
  /* колонки статей и сетки не должны добавлять поля поверх родительских */
  .cols{padding-left:0;padding-right:0}
}


/* ---------- 13. Тамга DIGRIZ ----------
   Канон ops/digriz-tamga-standard.md: знак стоит на всех наших работах и ведёт на digriz.ru.
   🔴 2026-09-20 (Ильдус: «выбивается из вайба, выглядит инородно; должна органично
   встраиваться в любое пространство и выглядеть премиально»). На светлом футере HalalAuto
   белая пилюля с зелёной рамкой смотрится родной — на тёмном футере MY PORTALS та же
   заливка превратила её в наклейку.
   Решение: узнаваемое оставляем неизменным (форма-пилюля, зелёная рамка, зелёное имя,
   знак), а то, что спорит с фоном, делаем отзывчивым:
   • заливка — белая полупрозрачная: на светлом фоне её попросту не видно (он и так
     белый), на тёмном она даёт лёгкую подложку вместо белого пятна;
   • текст наследует цвет окружения, поэтому читается и на тёмном, и на светлом. */
.digriz-tamga{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(16,185,129,.38);border-radius:999px;
  padding:8px 16px;text-decoration:none;
  font-size:12.5px;line-height:1;letter-spacing:.2px;
  color:inherit;opacity:.88;
  transition:opacity .2s, border-color .2s, background .2s;
}
.digriz-tamga:hover{opacity:1;border-color:rgba(16,185,129,.75);
  background:rgba(255,255,255,.12)}
.digriz-tamga,.digriz-tamga span{white-space:nowrap}
/* знак перекрашиваем маской из канонического файла: форма эталонная, цвет — один на
   любом фоне (тёмно-зелёный PNG на тёмном футере пропадал) */
.digriz-tamga .dt-mark{
  width:16px;height:16px;flex:none;background:#10b981;
  -webkit-mask:url('/digriz-mark.png') center/contain no-repeat;
  mask:url('/digriz-mark.png') center/contain no-repeat;
}
.digriz-tamga b{color:#10b981;font-weight:700;display:inline;margin:0}
/* footer b{display:block} в футере главной превращал имя в блок и переносил его */
footer .digriz-tamga{margin-top:16px;grid-column:1/-1;justify-self:start}
@media(max-width:700px){footer .digriz-tamga{justify-self:center}}