/* Общая основа сайта: те же цвета, шрифты, кнопки и бегущий по рамке свет, что в панели (static/app.css). */
@import url('/static/fonts/nous.css');

@property --frame-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
:root {
  color-scheme: dark;
  --bg: #00002e;
  --bg-deep: #000022;
  --raised: rgb(242 242 255 / 5%);
  --text: #f3f3f0;
  --muted: #b6b8d2;
  --dim: #8f92b8;
  --line: rgb(202 204 246 / 26%);
  --line-strong: rgb(217 219 255 / 55%);
  --green: #c8e5b0;
  --red: #ffaca6;
  --blue: #0000f2;
  --font-ui: 'Aeonik Fono', ui-monospace, monospace;
  --font-display: 'Rules Gothic Condensed', 'Roboto Condensed', sans-serif;
  --gutter: 16px;
  font: 16px/1.6 var(--font-ui);
  background: var(--bg);
  color: var(--text);
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; isolation: isolate; overflow-x: hidden; background: var(--bg); }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--bg) url('/static/fxbot-nous-background.png') center / cover no-repeat; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--text); text-underline-offset: 4px; }
a:hover { color: #fff; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
strong { font-weight: 400; color: #fff; }

/* Метки разделов в духе Nous: «// РАЗДЕЛ», «#1 ЗАГРУЗКА». */
.crumb { font: 400 14px/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .02em; color: var(--muted); }
.crumb::before { content: '// '; color: var(--dim); }
.tag { display: inline-block; font: 400 14px/1.2 var(--font-display); text-transform: uppercase; color: var(--muted); }
.chip { display: inline-block; padding: 2px 7px; font: 400 14px/1.2 var(--font-display); text-transform: uppercase; color: var(--bg); background: var(--text); }

.display { font: 400 clamp(46px, 7.4vw, 104px)/.98 var(--font-display); letter-spacing: -.02em; }
.h2 { font: 400 clamp(36px, 4.4vw, 60px)/1.02 var(--font-display); letter-spacing: -.015em; }
.h3 { font: 400 24px/1.15 var(--font-display); }
.lead { font-size: 17px; line-height: 1.7; color: #dcdcf0; max-width: 34em; }
.muted { color: var(--muted); }
.mono-num { font-variant-numeric: tabular-nums; }

/* Кнопки — как .btn в панели: без скруглений, верхний регистр, светлая основная. */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 11px 20px; border: 1px solid var(--line-strong); background: transparent; color: var(--text); font: 400 18px/1.15 var(--font-display); text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background-color .18s, color .18s; }
.btn:hover { background: rgb(196 201 255 / 12%); color: #fff; }
.btn.primary { background: var(--text); border-color: var(--text); color: #0b0b38; --frame-color: #15155e; }
.btn.primary:hover { background: #d5d8ff; color: #030325; }
.btn.blue { background: var(--blue); border-color: var(--blue); color: #f2f2f2; }
.btn.blue:hover { background: #2a2aff; color: #fff; }
.btn.small { min-height: 38px; padding: 8px 14px; font-size: 16px; }
.btn.wide { width: 100%; }
.link-arrow { font: 400 17px/1.2 var(--font-display); text-transform: uppercase; text-decoration: underline; text-underline-offset: 5px; }

/* Бегущий по контуру свет при наведении — тот же приём, что в панели. */
.btn::after, .frame::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; padding: 1.5px;
  background: conic-gradient(from var(--frame-angle), transparent 0deg 45deg, var(--frame-color, #e9ebff) 80deg, transparent 120deg 225deg, var(--frame-color, #e9ebff) 260deg, transparent 300deg);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  opacity: 0; animation: frame-orbit 4.5s linear infinite paused; transition: opacity .2s;
}
.frame { position: relative; border: 1px solid var(--line); }
@keyframes frame-orbit { to { --frame-angle: 360deg; } }
@media (hover: hover) {
  .btn:hover::after, .frame:hover::after { opacity: 1; animation-play-state: running; }
}
.btn:focus-visible::after { opacity: 1; animation-play-state: running; }

/* Снимок панели в тонкой рамке с подписью. */
.shot { position: relative; border: 1px solid var(--line); background: var(--bg-deep); }
.shot img { width: 100%; }
.shot figcaption { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.shot figcaption span + span { white-space: nowrap; }
.display .line { display: inline-block; }

/* Вопросы: нативные details, без скриптов. */
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 18px 0; cursor: pointer; list-style: none; font: 400 21px/1.25 var(--font-display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font: 400 20px/1 var(--font-ui); color: var(--muted); }
.faq details[open] summary::after { content: '−'; }
.faq details p { padding: 0 0 20px; max-width: 46em; color: #d6d7ea; }

/* Галочки в тарифах — текстовые, без иконок-эмодзи. */
.ticks li { position: relative; padding: 7px 0 7px 22px; border-top: 1px dotted var(--line); }
.ticks li:first-child { border-top: 0; }
.ticks li::before { content: '▪'; position: absolute; left: 2px; top: 7px; color: var(--muted); }
.ticks li.off { color: var(--dim); }
.ticks li.off::before { content: '–'; }

.price { font: 400 56px/1 var(--font-display); letter-spacing: -.01em; }
.price small { font: 400 15px/1 var(--font-ui); color: var(--muted); letter-spacing: 0; margin-left: 6px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 99; background: var(--text); color: var(--bg); padding: 8px 12px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn::after, .frame::after { animation: none; }
}