/* «Tech Premium» поверх site.css: весь сайт и админка, кроме разделов кожи
   и фигурок — каталог и товар ждут своих тем (условие — в _base.html,
   там же body.tp).

   Шрифты — свои файлы из web/fonts (Inter и Manrope, OFL): CSP пускает
   шрифты только с нашего адреса. Clash Display и Geometria не взяли —
   у первой нет кириллицы, вторая платная; Manrope ExtraBold — ближайшая
   по характеру свободная гарнитура с кириллицей. Шрифт качается, только
   когда его кто-то использует, поэтому на остальных страницах ничего
   лишнего не грузится. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("fonts/manrope-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("fonts/manrope-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

body.tp {
  --bg: #121212;
  --bg-2: #18181a;
  --panel: #1c1c1f;
  --panel-2: #242428;
  --line: rgba(255, 255, 255, .08);
  --text: #f5f5f7;
  --dim: #a1a1a8;
  --leather: #c68b59;
  --figure: #8b5cf6;
  --service: #10b981;
  --ease: .35s ease-in-out;
  --r-tile: 24px;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.tp h1, .tp h2, .tp h3 { font-family: "Manrope", "Inter", system-ui, sans-serif; font-weight: 800;
  letter-spacing: -.025em; }

.tp .top { background: rgba(18, 18, 18, .72); }
.tp .brand b { font-family: "Manrope", system-ui, sans-serif; font-weight: 800; }

/* ---------- первый экран ---------- */

.tp-hero { padding: clamp(40px, 7vw, 88px) 0 clamp(28px, 4vw, 48px);
  background: radial-gradient(640px 320px at 12% 0%, rgba(198, 139, 89, .10), transparent 70%),
    radial-gradient(640px 320px at 55% 10%, rgba(139, 92, 246, .09), transparent 70%),
    radial-gradient(640px 320px at 95% 0%, rgba(16, 185, 129, .08), transparent 70%); }
.tp-kicker { color: var(--dim); letter-spacing: .16em; text-transform: uppercase;
  font-size: 13px; font-weight: 600; margin-bottom: 18px; }
.tp-hero h1 { font-size: clamp(34px, 5.6vw, 72px); line-height: 1.04; margin-bottom: 22px; max-width: 22ch; }
.tp-hero h1 span { color: var(--dim); }
.tp-lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--dim); max-width: 52ch; margin: 0; }

/* ---------- плитки ---------- */

.tp-bento-band { padding: 0 0 clamp(48px, 7vw, 88px); }
.bento { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile-suchok { grid-column: 1 / -1; }
}

.tile {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 420px; padding: clamp(22px, 3vw, 36px);
  border-radius: var(--r-tile); border: 1px solid var(--line);
  background: var(--panel); color: var(--text); text-decoration: none;
  transition: box-shadow var(--ease), border-color var(--ease), transform var(--ease);
}
@media (min-width: 1000px) { .tile-kozha, .tile-fig { min-height: 520px; } }

/* Фото — фоном, приглушённое: текст поверх должен читаться при любой
   обложке. Затемнение снизу гуще — там лежит текст. */
.tile-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 55%; filter: brightness(.5) saturate(.9);
  transition: filter var(--ease), transform var(--ease); }
.tile::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgba(12, 12, 12, .94) 0%, rgba(12, 12, 12, .7) 38%, rgba(12, 12, 12, .1) 75%); }
.tile-mk { position: absolute; top: 14%; left: 50%; z-index: -2; width: 34%; max-width: 180px;
  transform: translateX(-50%); opacity: .5; }

.tile-body { max-width: 46ch; }
.tile-tag { display: inline-block; margin-bottom: 14px; padding: 4px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--hue); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.tile h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.08; margin-bottom: 12px; }
.tile p { color: #c9c9cf; margin-bottom: 22px; }

.tile-btn { display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px;
  border-radius: 14px; border: 1px solid var(--hue); color: var(--hue);
  font-weight: 600; background: rgba(18, 18, 18, .35);
  transition: background-color var(--ease), color var(--ease), border-color var(--ease); }

.tile-kozha { --hue: var(--leather); }
.tile-fig { --hue: var(--figure); }
.tile-suchok { --hue: var(--service); }

/* Кожа: тёплое свечение изнутри, фото светлеет, кнопка заливается.
   Свечение — отдельным слоем ::after поверх фото и затемнения: внутренняя
   тень самой плитки рисуется под ними и не видна. */
.tile-kozha::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit; opacity: 0; transition: opacity var(--ease);
  box-shadow: inset 0 0 0 1px rgba(198, 139, 89, .35), inset 0 -120px 160px -40px rgba(198, 139, 89, .38); }
.tile-kozha:hover, .tile-kozha:focus-visible { border-color: rgba(198, 139, 89, .6); }
.tile-kozha:hover::after, .tile-kozha:focus-visible::after { opacity: 1; }
/* Фигурки: пурпурный ореол снаружи. */
.tile-fig:hover, .tile-fig:focus-visible {
  border-color: rgba(139, 92, 246, .65);
  box-shadow: 0 0 0 1px rgba(139, 92, 246, .35), 0 0 48px 4px rgba(139, 92, 246, .38); }
.tile:hover .tile-bg, .tile:focus-visible .tile-bg { filter: brightness(.72) saturate(1); transform: scale(1.03); }
.tile:hover .tile-btn, .tile:focus-visible .tile-btn { background: var(--hue); color: #121212; }
.tile:focus-visible { outline: 2px solid var(--hue); outline-offset: 3px; }

/* ---------- СУЧОК: текст слева, набросок экрана справа ---------- */

.tile-suchok { min-height: 0; justify-content: center; gap: 32px;
  background: radial-gradient(520px 300px at 85% 50%, rgba(16, 185, 129, .13), transparent 70%), var(--panel); }
.tile-suchok .tile-btn { background: var(--service); border-color: var(--service); color: #062018; }
.tile-suchok:hover, .tile-suchok:focus-visible { border-color: rgba(16, 185, 129, .55);
  box-shadow: 0 0 40px rgba(16, 185, 129, .16); }
.tile-suchok:hover .tile-btn, .tile-suchok:focus-visible .tile-btn { background: #34d399; border-color: #34d399; }
@media (min-width: 900px) {
  .tile-suchok { flex-direction: row; align-items: center; justify-content: space-between; }
  .tile-suchok .tile-body { flex: 1 1 0; }
  .tile-suchok .dash { flex: 0 1 440px; }
}

.dash { display: grid; gap: 12px; width: 100%; }
.dash-chart, .dash-orders li { background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px; }
.dash-chart { padding: 16px 18px 10px; }
.dash-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dash-head span { flex-basis: 100%; font-size: 12px; color: var(--dim); }
.dash-head b { font-family: "Manrope", system-ui, sans-serif; font-size: 26px; font-weight: 800; }
.dash-head i { font-style: normal; font-size: 13px; font-weight: 600; color: var(--service);
  padding: 2px 8px; border-radius: 999px; background: rgba(16, 185, 129, .14); }
.dash-svg { display: block; width: 100%; height: 110px; margin-top: 6px; overflow: visible; }
.dash-grid line { stroke: rgba(255, 255, 255, .06); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dash-area { fill: url(#dash-fill); transform-origin: 50% 100%; transition: transform var(--ease); }
.dash-line { fill: none; stroke: var(--service); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke; transform-origin: 50% 100%; transition: transform var(--ease); }

.dash-orders { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dash-orders li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 14px;
  transition: transform var(--ease), border-color var(--ease); }
.dash-orders .what { flex: 1; color: #c9c9cf; }
.dash-orders .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot.paid { background: var(--service); }
.dot.work { background: var(--leather); }
.dot.ozon { background: var(--figure); }

/* Микродвижения: график чуть подрастает, заказы расходятся лесенкой. */
.tile-suchok:hover .dash-line, .tile-suchok:hover .dash-area { transform: scaleY(1.08); }
.tile-suchok:hover .dash-orders li { border-color: rgba(16, 185, 129, .3); }
.tile-suchok:hover .dash-orders li:nth-child(1) { transform: translateX(-6px); }
.tile-suchok:hover .dash-orders li:nth-child(2) { transform: translateX(-12px); transition-delay: .04s; }
.tile-suchok:hover .dash-orders li:nth-child(3) { transform: translateX(-18px); transition-delay: .08s; }

/* На телефоне от наброска — только график: три строки заказов растянули бы
   плитку на полтора экрана. */
@media (max-width: 560px) {
  .dash-orders li:nth-child(n+2) { display: none; }
  .tile { min-height: 380px; }
}

/* ---------- ниже плиток ---------- */

.tp-band { padding: clamp(44px, 6vw, 72px) 0; border-top: 1px solid var(--line); }
.tp-sub { color: var(--dim); max-width: 62ch; font-size: 17px; margin-bottom: 26px; }
.tp-steps { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.tp-step { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 20px 22px; }
.tp-step b { display: block; margin-bottom: 6px; font-family: "Manrope", system-ui, sans-serif; font-weight: 800; font-size: 18px; }
.tp-step p { color: var(--dim); margin: 0; }
.tp-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.tp-cta .tp-sub { margin-bottom: 0; }
@media (max-width: 760px) { .tp-cta { grid-template-columns: 1fr; } }
.tp-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px;
  border-radius: 14px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06);
  color: var(--text); font-weight: 600; text-decoration: none;
  transition: background-color var(--ease), border-color var(--ease); }
.tp-btn:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); }

.tp .card { border-radius: 20px; background: var(--panel); }
.tp .card:hover { border-color: rgba(255, 255, 255, .22); }
.tp .card .price { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .tp *, .tp *::before, .tp *::after { transition: none !important; }
  .tile:hover .tile-bg, .tile-suchok:hover .dash-line, .tile-suchok:hover .dash-area,
  .tile-suchok:hover .dash-orders li { transform: none !important; }
}