/*
 * Статический лендинг Tronergy — макет v93.
 * Тёмная тема по умолчанию, светлая — через [data-theme="light"] на <html>.
 * Структура: шапка (Инструкция/API/separator/лампа/язык) → H1 «Tronergy.app» → телефон (iframe)
 * → <details> «Как это работает» (с «Цена и условия» внутри, для SEO) → статьи → footer.
 * API — модалка .shade, не блок на странице.
 */

/* ─── PT Root UI локально (не jsdelivr) ─── */
@font-face {
  font-family: 'PT Root UI';
  src: url('/fonts/pt-root-ui/PT-Root-UI_Light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'PT Root UI';
  src: url('/fonts/pt-root-ui/PT-Root-UI_Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'PT Root UI';
  src: url('/fonts/pt-root-ui/PT-Root-UI_Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'PT Root UI';
  src: url('/fonts/pt-root-ui/PT-Root-UI_Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* ─── Токены двух тем (из wheel-v93 / landing-v93) ─── */
[data-theme="dark"] {
  color-scheme: dark;
  --paper: #07090F;
  --ink: #EDF1F7;
  --mute: #A7B4C9;
  --rule: rgba(255, 255, 255, 0.12);
  --green: #00FFAA;
  --g1: #00FFAA;
  --g2: #00B8FF;
  --amb: #FFB547;
  --amb-bg: rgba(255, 181, 71, 0.12);
  --amb-bg2: rgba(255, 181, 71, 0.20);
  --frame: #1B211F;
  --shadow: 0 30px 60px -30px rgba(14, 23, 20, 0.55);
  --glow: transparent;
  --demo-bg: #07090F;
}
[data-theme="light"] {
  color-scheme: light;
  --paper: #F4F6F9;
  --ink: #0E1422;
  --mute: #5B6679;
  --rule: rgba(15, 25, 45, 0.10);
  --green: #00A36C;
  --g1: #00A36C;
  --g2: #0A86C9;
  --amb: #C27A00;
  --amb-bg: rgba(194, 122, 0, 0.10);
  --amb-bg2: rgba(194, 122, 0, 0.17);
  --frame: #0B0E14;
  --shadow: 0 50px 90px -35px rgba(15, 25, 45, 0.45), 0 18px 40px -20px rgba(15, 25, 45, 0.25), 0 0 0 1.5px #2A303B;
  --glow: transparent;
  --demo-bg: #F4F6F9;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  background: var(--paper);
  background-image: var(--glow);
  background-repeat: no-repeat;
  color: var(--ink);
  font: 17px/1.55 'PT Root UI', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  transition: background 0.25s, color 0.25s;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ─── Шапка (v93): текстом, без рамок; лампочка — SVG; язык — select ─── */
header.top {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 20px 0;
}

.hr {
  display: flex;
  gap: 22px;
  align-items: center;
  font-size: 15px;
  color: var(--mute);
}

.hr a, .hr button {
  color: inherit;
  text-decoration: none;
  background: none;
  border: 0;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
}

.hr a:hover, .hr button:hover { color: var(--ink); }

.hr .sep {
  width: 1px;
  height: 18px;
  background: var(--rule);
}

select {
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 5px 10px;
}
/* В шапке — без рамки (как в v93). */
.hr select { border: 0; padding: 5px 4px; }

select option { color: #0E1714; }

/* ─── Сцена в одну колонку ─── */
.stage {
  display: grid;
  justify-items: center;
  gap: 36px;
  padding: 24px 0 56px;
}

.intro {
  text-align: center;
  max-width: 560px;
}

/* .brand-h1 — не h1, а div (единственный h1 на странице — заголовок раскрывашки .howh).
   display:block + width:fit-content + margin auto — перенос без <br>, центрирование. */
.intro .brand-h1 {
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.025em;
  display: block;
  width: fit-content;
  margin: 0 auto 18px;
  transform: skewX(-12deg);
  padding: 0 0.06em;
}

/* Цвета по теме: color — для «Tronergy», span — для «.app». */
[data-theme="dark"] .intro .brand-h1 { color: #4CC3F0; }
[data-theme="dark"] .intro .brand-h1 span { color: #2ECC91; }
[data-theme="light"] .intro .brand-h1 { color: #0E1422; }
[data-theme="light"] .intro .brand-h1 span { color: #00A36C; }

.btn {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  background: #3C7CF3;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 15px 24px;
  border-radius: 999px;
}
.btn:hover { background: #135DCD; }
.btn svg { width: 18px; height: 18px; color: #fff; }

/* ─── Телефон (iframe с демо) ─── */
.phone {
  width: 380px;
  height: 720px;
  max-width: 100%;
  border-radius: 46px;
  background: var(--demo-bg);
  border: 10px solid var(--frame);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.phone iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--demo-bg);
}

/* ─── <details> «Как это работает» (SEO: контент в HTML, не скриптом) ─── */
.how {
  max-width: 560px;
  margin: 0 auto;
}
.how summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 0 22px;
  cursor: pointer;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--amb);
  user-select: none;
}
.how summary::-webkit-details-marker { display: none; }
/* H1 внутри summary — убить все браузерные дефолты и наследовать от summary (26px/500/amber).
   text-align:center — чтобы при переносе на мобильном текст был по центру, а не слева. */
.how summary .howh {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-align: center;
}
.how .chev {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--amb-bg);
  color: var(--amb);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.2s;
}
.how summary:hover .chev { background: var(--amb-bg2); transform: translateY(2px); }
.how[open] .chev { transform: rotate(180deg); }
.how[open] summary:hover .chev { transform: rotate(180deg) translateY(2px); }
.how[open] .body { animation: howIn 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes howIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.how .body { padding: 0 0 24px; }
.disc {
  font-size: 17px;
  line-height: 1.55;
  margin: 0 0 12px;
  color: var(--ink);
}
.howsub {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 10px;
  color: var(--ink);
}
.how .howsub.sub { margin: 22px 0 10px; }

/* ─── Статьи (.below) ─── */
.below {
  max-width: 560px;
  margin: 0 auto;
  padding: 40px 0 64px;
}
.below h3 {
  font-size: 19px;
  margin: 0 0 8px;
  color: var(--ink);
}
.below p {
  margin: 0;
  color: var(--mute);
  font-size: 16px;
}
.below p a {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 6px 0;
  text-decoration: none;
  color: var(--mute);
  transition: color 0.15s;
}
.below p a::after {
  content: "→";
  color: var(--green);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.15s, transform 0.15s;
}
.below p a:hover { color: var(--ink); }
.below p a:hover::after { opacity: 1; transform: none; }
.below p br { display: none; }

/* ─── Футер ─── */
footer {
  border-top: 1px solid var(--rule);
  color: var(--mute);
  font-size: 15px;
}
footer .wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 30px;
  padding-top: 28px;
  padding-bottom: 40px;
}
footer a {
  color: var(--ink);
  text-decoration: none;
}

/* ─── API: модалка .shade ─── */
.shade {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 30;
  padding: 16px;
}
.shade.open { display: flex; }

.sheet {
  width: 100%;
  max-width: 480px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: 24px;
}
.sheet .howsub { margin-bottom: 10px; }
.sheet p {
  color: var(--mute);
  font-size: 17px;
  margin: 0 0 22px;
}
.sheet .row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.sheet .btn { background: #3A4440; }
.sheet .x {
  margin-left: auto;
  font: inherit;
  font-size: 15px;
  color: var(--mute);
  background: none;
  border: 0;
  cursor: pointer;
}

@media (max-width: 480px) {
  .wrap { padding: 0 16px; }
  .phone {
    width: 100%;
    max-width: 380px;
    height: 700px;
    border-width: 8px;
    border-radius: 40px;
  }
}