/* «Облик сайта» · Бенто со светом — «Что мы делаем» и «Решения» на главной (assets/js/fx/oblik-bento.js).
   Плитки разного размера; курсор — лампа над сеткой: общий тёплый свет по сетке (--mx/--my),
   пятно на плитке и подсвеченная рамка (--x/--y), тень уходит от света (--sx/--sy), лёгкий наклон (--rx/--ry, ≤3°).
   Без курсора свет медленно обходит сетку; на телефоне идёт за пальцем, без наклона.
   Цвета — только токены: днём — тёплое золото на пергаменте, вечером — медь на графите. */

[data-look="oblik"][data-mode="light"] {
  --bn-light: color-mix(in srgb, var(--gold) 22%, transparent);
  --bn-spot: color-mix(in srgb, var(--gold) 15%, transparent);
  --bn-ring: color-mix(in srgb, var(--accent) 85%, var(--gold));
  --bn-shadow: color-mix(in srgb, var(--text) 30%, transparent);
  --bn-tile: var(--surface);
}
[data-look="oblik"][data-mode="dark"] {
  --bn-light: color-mix(in srgb, var(--accent) 19%, transparent);
  --bn-spot: color-mix(in srgb, var(--accent) 12%, transparent);
  --bn-ring: color-mix(in srgb, var(--accent) 82%, var(--text));
  --bn-shadow: color-mix(in srgb, var(--bg) 92%, transparent);
  --bn-tile: color-mix(in srgb, var(--surface) 90%, var(--bg));
}
[data-look="oblik"] { --bn-r: 16px; --bn-gap: 18px; }

[data-look="oblik"] #services, [data-look="oblik"] #cases { overflow-x: clip; }

/* ── сетка и общий свет ─────────────────────────────────────────── */
[data-look="oblik"] .bn-grid { position: relative; isolation: isolate; gap: var(--bn-gap); --mx: 70%; --my: 30%; }
[data-look="oblik"] .bn-grid::before {
  content: ""; position: absolute; z-index: -1; inset: -14px; pointer-events: none;
  background: radial-gradient(620px circle at calc(var(--mx) + 14px) calc(var(--my) + 14px), var(--bn-light), transparent 70%);
}

/* ── плитка ─────────────────────────────────────────────────────── */
[data-look="oblik"] .bn-grid > .bn-tile,
[data-look="oblik"] .bn-grid > .bn-tile:hover {
  position: relative;
  border-radius: var(--bn-r);
  background: var(--bn-tile);
  overflow: hidden;
  outline: none;
  transform: perspective(1400px) rotateX(calc(var(--rx, 0) * 1deg)) rotateY(calc(var(--ry, 0) * 1deg));
  box-shadow: 0 1px 2px color-mix(in srgb, var(--bn-shadow) 40%, transparent), calc(var(--sx, 0) * 1px) calc(var(--sy, 0) * 1px + 18px) 52px -28px var(--bn-shadow);
  transition: border-color .3s, background-color .5s, opacity .8s var(--ease);
}
[data-look="oblik"] .bn-grid > .bn-tile:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
[data-look="oblik"] .bn-tile::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(360px circle at var(--x, -999px) var(--y, -999px), var(--bn-spot), transparent 66%);
}
[data-look="oblik"] .bn-tile::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; padding: 1.5px;
  background: radial-gradient(260px circle at var(--x, -999px) var(--y, -999px), var(--bn-ring), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
[data-look="oblik"] .bn-tile > * { position: relative; z-index: 1; }

/* ── «Что мы делаем»: учёт крупно, рядом призыв; календарь и задачи — пополам ── */
[data-look="oblik"] .bn-svcs {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-areas: "u u u u c c" "k k k z z z";
}
[data-look="oblik"] .bn-svcs > .bn-u { grid-area: u; }
[data-look="oblik"] .bn-svcs > .bn-k { grid-area: k; }
[data-look="oblik"] .bn-svcs > .bn-z { grid-area: z; }
[data-look="oblik"] .bn-svcs > .bn-c { grid-area: c; }
[data-look="oblik"] .bn-svcs > .bn-u {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  grid-template-rows: auto auto auto 1fr;
  grid-template-areas: "h d" "s d" "p d" "l d";
  column-gap: 30px;
}
[data-look="oblik"] .bn-u > .row { grid-area: h; }
[data-look="oblik"] .bn-u > .svc-s { grid-area: s; }
[data-look="oblik"] .bn-u > p { grid-area: p; }
[data-look="oblik"] .bn-u > ul { grid-area: l; align-self: start; }
[data-look="oblik"] .bn-u > .svc-demo { grid-area: d; margin-top: 0; display: flex; flex-direction: column; justify-content: center; }
[data-look="oblik"] .bn-svcs .svc-demo { border-radius: calc(var(--bn-r) - 6px); background: color-mix(in srgb, var(--bg-2) 70%, transparent); }

/* призыв: короткий, с линией пульса и «магнитной» кнопкой */
[data-look="oblik"] .bn-grid > .bn-c { justify-content: space-between; gap: 18px; background: color-mix(in srgb, var(--accent) 8%, var(--bn-tile)); }
[data-look="oblik"] .bn-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
[data-look="oblik"] .bn-cta-t { font-family: var(--font-display); font-weight: 500; font-size: clamp(28px, 2.5vw, 38px); line-height: 1.06; letter-spacing: -.01em; margin: 12px 0 10px; text-wrap: balance; }
[data-look="oblik"] .bn-cta-t em { font-style: italic; }
[data-look="oblik"] .bn-c p { color: var(--text-2); font-size: 15px; }
[data-look="oblik"] .bn-cta-row { display: flex; align-items: center; gap: 14px; }
[data-look="oblik"] .bn-pw { position: relative; flex: 1; min-width: 40px; height: 26px; }
[data-look="oblik"] .bn-pw svg { position: absolute; inset: 0; width: 100%; height: 100%; }
[data-look="oblik"] .bn-pw path { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
[data-look="oblik"] .bn-pw .base { stroke: var(--line-2); }
[data-look="oblik"] .bn-pw .run { stroke: var(--accent); stroke-dasharray: 26 200; animation: bn-run 2.8s linear infinite; }
@keyframes bn-run { from { stroke-dashoffset: 226; } to { stroke-dashoffset: 0; } }
[data-look="oblik"] .bn-mag { will-change: transform; }
[data-look="oblik"] .bn-mag > span { display: inline-flex; align-items: center; gap: 8px; will-change: transform; }

/* ── «Решения»: Publo крупно, Каркас рядом; Школа и Задачи — зеркально ── */
[data-look="oblik"] .bn-cases {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-areas: "a a a a b b" "c c d d d d";
}
[data-look="oblik"] .bn-cases > .bn-p1 { grid-area: a; }
[data-look="oblik"] .bn-cases > .bn-p2 { grid-area: b; }
[data-look="oblik"] .bn-cases > .bn-p3 { grid-area: c; }
[data-look="oblik"] .bn-cases > .bn-p4 { grid-area: d; }
[data-look="oblik"] .bn-cases .cc-prev { border-radius: calc(var(--bn-r) - 6px) calc(var(--bn-r) - 6px) 0 0; display: flex; flex-direction: column; justify-content: center; }
[data-look="oblik"] .bn-cases .cc-foot { background: transparent; }

/* ── узкие экраны ───────────────────────────────────────────────── */
@media (max-width: 1080px) {
  [data-look="oblik"] .bn-svcs { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "u u" "k z" "c c"; }
  [data-look="oblik"] .bn-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "a a" "b c" "d d"; }
}
@media (max-width: 700px) {
  [data-look="oblik"] { --bn-r: 14px; --bn-gap: 14px; }
  [data-look="oblik"] .bn-svcs { grid-template-columns: minmax(0, 1fr); grid-template-areas: "u" "k" "z" "c"; }
  [data-look="oblik"] .bn-cases { grid-template-columns: minmax(0, 1fr); grid-template-areas: "a" "b" "c" "d"; }
  [data-look="oblik"] .bn-svcs > .bn-u { display: flex; flex-direction: column; }
  [data-look="oblik"] .bn-u > .svc-demo { margin-top: auto; }
}
@media (prefers-reduced-motion: reduce) {
  [data-look="oblik"] .bn-pw .run { animation: none; stroke-dasharray: none; }
}