/* ==========================================================================
   fx246 — публічна сторінка студії (/studio).
   1) дає сторінці право прокручуватися (у редакторі — рівно один екран);
   2) малює «вітрину» під редактором: живa анімація слова СТУДІО, сканер-макет,
      фічі, кроки, FAQ і заклик.
   У режимі ?embed=1 (кабінет, головна) весь блок ховається — iframe
   лишається чистим редактором.
   ========================================================================== */

/* ---------- 1. прокрутка сторінки (тільки поза iframe) ---------- */
html.studio-page { height: auto; overflow-y: auto; overflow-x: hidden; }
html.studio-page body.studio-body { height: auto; min-height: 100vh; overflow: visible; }
/* fx260: шапка студії тепер СТАНДАРТНА (header.top), а її висота залежить
   від шрифтів/переносу кнопок. Тому висоту редактора рахуємо як
   100vh − змінна --qrg-top-h, яку ставить маленький скрипт у /studio.html
   (85px — запасне значення до першого виміру). Раніше тут стояло жорстко
   45px від старої 44-піксельної шапки — через це сторінка вилазила за
   екран на 40px. */
@media (min-width: 1024px) {
  /* fx263: студія була «короткою» — рівно один екран. Додаємо запас висоти,
     щоб полотно прев’ю QR було більшим, а під ним починався SEO-блок. */
  html.studio-page .studio-shell {
    height: calc(100vh - var(--qrg-top-h, 85px) + 140px);
    min-height: 720px;
  }
}
html.studio-embed .studio-landing { display: none !important; }
/* fx263: у iframe кабінету/головної редактор лишається один-в-один без SEO-блоку. */
html.studio-embed .seo-section { display: none !important; }

.studio-landing {
  position: relative;
  z-index: 3;
  background: #070707;
  color: #f2f2f2;
  font-family: "JetBrains Mono", Consolas, monospace;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.studio-landing * { box-sizing: border-box; }
.studio-landing a { color: inherit; }

/* ---------- 2. герой ---------- */
.sl-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 96px) clamp(18px, 4vw, 48px) clamp(30px, 5vw, 64px);
}
.sl-kicker {
  margin: 0 0 18px;
  font: 700 11px/1 "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #8f8f9a;
}
.sl-title {
  margin: 0 0 20px;
  font-weight: 800;
  line-height: 1;
}
.sl-title .studio-brand-studio.sl-word {
  font-size: clamp(40px, 7.4vw, 104px);
  letter-spacing: 0.06em;
  margin: 0;
}
.sl-lead {
  max-width: 60ch;
  margin: 0 0 26px;
  font-size: clamp(13px, 1.15vw, 15px);
  line-height: 1.75;
  color: #b8b8c2;
}
.sl-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  font: 700 11px/1 "JetBrains Mono", Consolas, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: #d8d8de;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.03);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.sl-btn:hover, .sl-btn:focus-visible { color: #070707; background: #fff200; border-color: #fff200; transform: translateY(-1px); }
.sl-btn.is-primary { color: #070707; background: #fff200; border-color: #fff200; }
.sl-btn.is-primary:hover { filter: brightness(1.06); }

.sl-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin: 34px 0 0;
  padding: 22px 0 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.sl-stats b { display: block; font-size: clamp(18px, 2vw, 24px); color: #fff200; }
.sl-stats span { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #86868f; }

/* ---------- 3. жива анімація QR ---------- */
.sl-orbit { position: relative; display: grid; place-items: center; width: 100%; min-height: 260px; }
.sl-orbit::before {
  content: "";
  position: absolute;
  width: min(330px, 74%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255, 242, 0, 0.55), transparent 32%, rgba(46, 49, 146, 0.75) 58%, transparent 78%, rgba(255, 242, 0, 0.55));
  filter: blur(26px);
  animation: sl-spin 14s linear infinite;
}
.sl-qr {
  position: relative;
  width: min(270px, 62%);
  aspect-ratio: 1;
  border-radius: 16px;
  background: #0a0a0a;
  border: 1px solid rgba(255, 242, 0, 0.34);
  box-shadow: inset 0 0 60px rgba(255, 242, 0, 0.08), 0 30px 70px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  isolation: isolate;
}
.sl-qr::before {
  content: "";
  position: absolute;
  inset: 14%;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 12% 12%;
  animation: sl-tiles 7s steps(7) infinite;
}
.sl-qr i {
  position: absolute;
  z-index: 2;
  width: 22%;
  aspect-ratio: 1;
  border: 3px solid #fff200;
  border-radius: 5px;
  box-shadow: 0 0 16px rgba(255, 242, 0, 0.45);
}
.sl-qr i:nth-child(1) { top: 8%; left: 8%; }
.sl-qr i:nth-child(2) { top: 8%; right: 8%; }
.sl-qr i:nth-child(3) { bottom: 8%; left: 8%; }
.sl-qr .sl-qr-laser {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #fff200, transparent);
  box-shadow: 0 0 20px 2px rgba(255, 242, 0, 0.75);
  animation: sl-scan 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes sl-scan { 0%, 100% { top: 6%; } 50% { top: 92%; } }
@keyframes sl-tiles { 0% { background-position: 0 0, 0 0; } 100% { background-position: 24% 24%, 24% 24%; } }
@keyframes sl-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) {
  .sl-orbit::before, .sl-qr::before, .sl-qr .sl-qr-laser { animation: none; }
}

/* ---------- 4. фічі ---------- */
.sl-section {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 56px) clamp(18px, 4vw, 48px);
}
.sl-h2 {
  margin: 0 0 10px;
  font-size: clamp(18px, 2.4vw, 28px);
  letter-spacing: 0.02em;
}
.sl-sub { margin: 0 0 28px; font-size: 12px; line-height: 1.7; color: #86868f; max-width: 70ch; }

.sl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sl-card {
  position: relative;
  padding: 22px 20px 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  border: 1px solid rgba(255, 255, 255, 0.1);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition: border-color 0.22s ease, transform 0.22s ease;
}
.sl-card:hover { border-color: rgba(255, 242, 0, 0.42); transform: translateY(-2px); }
.sl-card svg { width: 22px; height: 22px; fill: none; stroke: #fff200; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sl-card h3 { margin: 14px 0 8px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.sl-card p { margin: 0; font-size: 12px; line-height: 1.7; color: #9a9aa4; }

/* ---------- 5. кроки ---------- */
.sl-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: sl; }
.sl-step { position: relative; padding: 20px; border: 1px solid rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.02); }
.sl-step::before {
  counter-increment: sl;
  content: "0" counter(sl);
  display: block;
  margin-bottom: 12px;
  font: 800 22px/1 "JetBrains Mono", Consolas, monospace;
  color: rgba(255, 242, 0, 0.85);
}
.sl-step b { display: block; margin-bottom: 6px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.sl-step span { font-size: 12px; line-height: 1.7; color: #9a9aa4; }

/* ---------- 6. FAQ ---------- */
.sl-faq { display: grid; gap: 10px; }
.sl-faq details {
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.022);
}
.sl-faq summary { cursor: pointer; font-size: 12.5px; line-height: 1.5; letter-spacing: 0.02em; color: #e6e6ec; }
.sl-faq summary::marker { color: #fff200; }
.sl-faq p { margin: 12px 0 0; font-size: 12px; line-height: 1.75; color: #9a9aa4; }

/* ---------- 7. фінальний заклик ---------- */
.sl-cta {
  position: relative;
  max-width: 1280px;
  margin: 0 auto clamp(34px, 5vw, 64px);
  padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 44px);
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(255, 242, 0, 0.3);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255, 242, 0, 0.12), transparent 60%),
    radial-gradient(120% 140% at 100% 100%, rgba(46, 49, 146, 0.35), transparent 62%),
    #0a0a0b;
}
.sl-cta h2 { margin: 0 0 8px; font-size: clamp(17px, 2.2vw, 26px); }
.sl-cta p { margin: 0; font-size: 12px; line-height: 1.7; color: #a9a9b3; max-width: 62ch; }

/* ---------- 8. адаптив ---------- */
@media (max-width: 980px) {
  .sl-hero { grid-template-columns: minmax(0, 1fr); }
  .sl-orbit { order: -1; min-height: 220px; }
  .sl-grid, .sl-steps { grid-template-columns: minmax(0, 1fr); }
  /* fx256: НЕ фіксуємо висоту — полотно мусить мати власну висоту, інакше
     grid-рядок стискається і панель керування лягає поверх листка. */
  html.studio-page .studio-shell { height: auto; min-height: 0; }
}

/* ==========================================================================
   fx250 / fx253 — підвал студії (/studio).
   Розмітка підвала та сама, що під сканером і генератором (.site-footer зі
   styles.css). fx253: власні кольори, шрифт і розміри прибрано — на сторінці
   діють рівно ті самі правила, що й під /generator та /scanner (13px,
   --muted, емблема 15x21, посилання праворуч). Лишається тільки z-index,
   щоб декор студії не наїжджав на підвал, і ховання в режимі ?embed=1.
   ========================================================================== */
html.studio-embed .site-footer { display: none !important; }

html.studio-page .site-footer {
  position: relative;
  z-index: 3;
  /* fx253: тонка лінія над підвалом така сама, як під /generator (#2a2a2a):
     студія перевизначає --line на rgba(255,255,255,.14), тому фіксуємо колір. */
  border-top: 1px solid #2a2a2a;
}

/* fx265: розкладка підвалу (емблема + рік → один рядок унизу, мова по центру
   між двома колонками посилань) тепер ГЛОБАЛЬНА — див. styles.css, блок
   «fx265: футер на телефоні та планшеті». Тут нічого дублювати не потрібно. */