/* Минималистичная заглушка FHQM */
* { box-sizing: border-box; }
html, body { height: 100%; }
body.blank {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: #000;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  overflow: hidden;
}

.container { width: min(1100px, 92%); margin: 0 auto; }

/* Центрированный заголовок */
.center { flex: 1; display: grid; place-items: center; text-align: center; padding: 12vh 0; }
.brand-title { font-size: clamp(48px, 10vw, 120px); letter-spacing: 0.06em; margin: 0; font-weight: 800; }
.brand-subtitle { margin: 12px 0 24px; font-size: clamp(14px, 2.8vw, 18px); color: rgba(255,255,255,.7); letter-spacing: .06em; text-transform: none; }

/* Иллюстрация φ */
.phi-figure { margin: 0 auto; width: min(900px, 92vw); }
.phi-illustration { width: 100%; height: auto; display: block; }
.phi-line-a { stroke: #f87171; /* красный */ stroke-width: 3; }
.phi-line-b { stroke: #94a3b8; /* slate-400 */ stroke-width: 3; }
.phi-tick { stroke: currentColor; opacity: .8; }
.phi-text { fill: rgba(255,255,255,.9); font-size: 16px; letter-spacing: .02em; }
.phi-math { fill: rgba(255,255,255,.92); font-weight: 700; font-size: 28px; }
.phi-small { fill: rgba(255,255,255,.8); font-size: 14px; }

/* Золотой прямоугольник */
.phi-rect { fill: none; stroke: rgba(255,255,255,.9); stroke-width: 2; }
.phi-rect-line { fill: none; stroke: rgba(255,255,255,.9); stroke-width: 2; }
.phi-arc { fill: none; stroke: rgba(255,255,255,.9); stroke-width: 2; }
.phi-num { fill: rgba(255,255,255,.92); font-weight: 700; font-size: 32px; }

/* Адаптация */
@media (max-width: 600px) {
  .phi-text { font-size: 14px; }
  .phi-math { font-size: 22px; }
  .phi-small { font-size: 12px; }
  .phi-num { font-size: 24px; }
}

/* Фоновая графика */
.bg-art { position: fixed; inset: -10% -10% -10% -10%; width: 120%; height: 120%; z-index: -1; opacity: 0.14; }
.bg-art .phi-illustration { position: absolute; pointer-events: none; width: min(1100px, 92vw); height: auto; display: block; }
.bg-art .art-top { left: 50%; top: 6%; transform: translateX(-50%) scale(1.12); }
.bg-art .art-bottom { left: 50%; bottom: 6%; transform: translateX(-50%); }

/* Геометрия π */
.circle { fill: none; stroke: rgba(255,255,255,.25); stroke-width: 1.5; }
.pi-line { stroke: rgba(125,207,255,.9); stroke-width: 2; }
.tick { stroke: rgba(255,255,255,.35); stroke-width: 1; }
.pi-arc { fill: none; stroke: rgba(122,162,247,.7); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0.3183 0.01 0.3183 0.01 0.3183 0.01 0.045 10; }

/* Геометрия φ (устар.) */
.phi-line { stroke: rgba(52,211,153,.85); stroke-width: 2; }
.phi-tick { stroke: rgba(255,255,255,.45); stroke-width: 1.2; }
.phi-rect { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 1; }
.phi-rect.light { stroke: rgba(255,255,255,.08); }
.phi-arc-guide { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 1; stroke-linecap: round; }

/* Фон золотого сечения */
.golden-rect { fill: none; stroke: rgba(255,255,255,.10); stroke-width: 1.2; }
.golden-line { stroke: rgba(255,255,255,.08); stroke-width: 1; }
.golden-arc { fill: none; stroke: rgba(255,255,255,.28); stroke-width: 2; stroke-linecap: round; }

/* Синусоида */
.sine-axis { stroke: rgba(255,255,255,.16); stroke-width: 1; }
.sine-tick { stroke: rgba(255,255,255,.12); stroke-width: 1; }
.sine-curve { fill: none; stroke: rgba(255,255,255,.32); stroke-width: 2; }
.sine-label { fill: rgba(255,255,255,.4); font-size: 12px; letter-spacing: .03em; }

/* Центрированный заголовок */
.center { flex: 1; display: grid; place-items: center; text-align: center; padding: 12vh 0; }
.brand-title { font-size: clamp(48px, 10vw, 120px); letter-spacing: 0.06em; margin: 0; font-weight: 800; }
.brand-subtitle { margin: 12px 0 0; font-size: clamp(14px, 2.8vw, 18px); color: rgba(255,255,255,.7); letter-spacing: .06em; text-transform: none; }

/* Нижняя строка (пока не используется) */
.bottom { border-top: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.02); }
.bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; color: rgba(255,255,255,.8); }
.bottom-brand { font-weight: 700; letter-spacing: .06em; }
.bottom-copy { color: rgba(255,255,255,.6); }