/* ============================================
   PH-CU-S Landing Page Styles
   Pure Vanilla CSS
   ============================================ */

/* --- Design Tokens --- */
:root {
  /* Colors */
  --color-black:       #000;
  --color-gray-900:    #18181b;
  --color-gray-800:    #1f1f1f;
  --color-gray-700:    #27272a;
  --color-gray-600:    #3f3f46;
  --color-gray-500:    #52525b;
  --color-gray-400:    #71717a;
  --color-gray-300:    #d4d4d8;
  --color-white:       #fff;

  /* Accent colors */
  --color-blue-400:    #60a5fa;
  --color-blue-500:    #3b82f6;
  --color-blue-600:    #2563eb;
  --color-blue-700:    #1d4ed8;

  --color-green-400:   #4ade80;
  --color-green-600:   #16a34a;
  --color-green-700:   #15803d;

  --color-red-900:     #7f1d1d;
  --color-red-200:     #fecaca;
  --color-red-700:     #b91c1c;

  /* Typography */
  --font-base:         system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:         ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Spacing scale */
  --space-xs:          .25rem;    /* 4px */
  --space-sm:          .5rem;     /* 8px */
  --space-md:          1rem;      /* 16px */
  --space-lg:          1.25rem;   /* 20px */
  --space-xl:          1.5rem;    /* 24px */
  --space-2xl:         2rem;      /* 32px */
  --space-3xl:         2.5rem;    /* 40px */
  --space-4xl:         3rem;      /* 48px */
  --space-5xl:         4rem;      /* 64px */

  /* Radii */
  --radius-sm:         .25rem;    /* 4px */
  --radius-md:         .5rem;     /* 8px */
  --radius-lg:         .75rem;    /* 12px */
  --radius-xl:         1rem;      /* 16px */

  /* Shadows */
  --shadow-2xl:        0 25px 50px -12px rgba(0, 0, 0, .5);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
}

/* --- Reset & Base --- */
*,
*::before,
*::after { box-sizing: border-box; }

html { font-family: var(--font-base); }

body { margin: 0; background: #0f0f0f; color: #fff; line-height: 1.5; } /* Чуть-чуть поджали межстрочный интервал */

/* --- Typography Scale (fluid with clamp) --- */
h1 { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 700; margin-bottom: var(--space-md); }
h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; margin-top: 0; margin-bottom: var(--space-md); } /* Сжали размер h2 и убрали margin-top */
h3 { font-size: clamp(1.25rem, 3vw, 1.5rem); font-weight: 700; margin-top: 0; margin-bottom: var(--space-sm); }  /* Сжали размер h3 и убрали margin-top */
h4 { font-size: 1.125rem; font-weight: 700; margin-bottom: var(--space-xs); }

/* --- Layout Container --- */
.container {
  max-width: 80rem;       /* ~1280px */
  margin-inline: auto;
  padding-inline: var(--space-md);   /* px-4 = 1rem */
}

/* --- Sections --- */
.section { padding-block: clamp(2.5rem, 5vw, 4rem); } /* Сделали блоки значительно компактнее по высоте */
.section--gray-800 { background: var(--color-gray-800); }
.section--gray-900 { background: var(--color-gray-900); }
.section--black    { background: var(--color-black); }

/* Gradient hero */
.section-hero {
  text-align: center;
  padding-block: clamp(4rem, 8vw, 5rem);  /* Убрали гигантский пустой отступ на первом экране */
  background: linear-gradient(to bottom, var(--color-gray-900), var(--color-black));
}

/* Section dividers */
.section--divider-bottom { border-bottom: 1px solid var(--color-gray-700); }

/* --- Header (site header) --- */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-xl); /* Сжали шапку по вертикали */
  border-bottom: 1px solid var(--color-gray-700);
}

.header--with-lang {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-xl); /* Сжали шапку по вертикали */
  border-bottom: 1px solid var(--color-gray-700);
}

.header--with-lang h1 {
  margin: 0;
  font-size: 1.25rem;
}

.lang-switch {
  display: flex;
  gap: .5rem;
  align-items: center;
  font-size: .9rem;
}

.lang-switch span {
  color: var(--color-gray-600);
}

.lang-switch a {
  color: var(--color-gray-300);
  text-decoration: none;
}

.lang-switch a:hover {
  color: white;
}

.lang-switch__active {
  color: var(--color-blue-400) !important;
}

/* --- Navigation --- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-gray-900);
  padding-block: var(--space-sm);     /* Делаем липкую ленту навигации тоньше */
}

/* Darker variant (index-g.html) */
.nav--dark { border-bottom: 1px solid var(--color-gray-800); }

.nav__inner {
  display: flex;
  gap: var(--space-xl);               /* gap-6 = 1.5rem */
  overflow-x: auto;
}

/* Nav links */
.nav__link { white-space: nowrap; color: var(--color-gray-300); text-decoration: none; transition: color var(--transition-fast); }
.nav__link:hover, .nav__link:focus-visible { color: var(--color-white); }

/* Active nav link (index.html only) */
.nav__link--active { color: var(--color-blue-400); }
.nav__link--active:hover { color: #93c5fd; }

/* --- Cards / panels --- */
.card {
  background: var(--color-gray-900);
  padding: var(--space-lg);           /* Слегка поджали внутренний отступ карточек (с 24px до 20px) */
  border-radius: var(--radius-lg);    /* rounded-lg */
  min-width: 0;                       /* prevent long lines from breaking flex/grid layout */
}
.card--border { border: 1px solid var(--color-gray-700); }

/* Equal height installation cards */
.installation-grid {
  align-items: stretch;
}

.card--equal {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* --- Grid Layouts --- */
.grid--cols-2 { display: grid; gap: var(--space-lg); }   /* Уменьшили шаг сетки с xl до lg для плотности */
@media (min-width: 768px) { .grid--cols-2 { grid-template-columns: repeat(2, 1fr); } }

.grid--cols-3 { display: grid; gap: var(--space-lg); }
@media (min-width: 768px) { .grid--cols-3 { grid-template-columns: repeat(3, 1fr); } }

.grid--cols-4 { display: grid; gap: var(--space-md); }   /* gap-4 = 1rem */
@media (min-width: 768px) { .grid--cols-4 { grid-template-columns: repeat(4, 1fr); } }

/* --- Button Styles --- */
/* Base button (py-3 px-6) */
.btn {
  display: inline-block; width: 100%; padding-block: .65rem; padding-inline: 1.25rem; border-radius: var(--radius-lg); font-weight: 700; cursor: pointer; border: none; transition: background-color var(--transition-fast); }

/* Fit-to-text variant (don't stretch) */
.btn--fit { width: auto; }

/* Large button (py-4 px-8) */
.btn--lg { padding-block: 1rem; padding-inline: 1.75rem; font-size: 1.125rem; }
.btn--sm { padding-block: var(--space-xs); padding-inline: var(--space-md); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* Primary button (blue) */
.btn--primary { background: var(--color-blue-600); color: var(--color-white); }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--color-blue-700); }

/* Footer buy button — max width 25vw */
#buy-btn-footer { max-width: 25vw; margin-inline: auto; display: block; }

/* Secondary / action button (green) */
.btn--secondary { background: var(--color-green-600); color: var(--color-white); }
.btn--secondary:hover, .btn--secondary:focus-visible { background: var(--color-green-700); }

/* Gray action button (replaces green for workflows) */
.btn--gray { background: var(--color-gray-700); color: var(--color-white); border: 1px solid var(--color-gray-600); }
.btn--gray:hover, .btn--gray:focus-visible { background: var(--color-gray-600); }

/* --- Input Styles --- */
.input { display: block; width: 100%; padding-block: .65rem; padding-inline: 1.25rem; border-radius: var(--radius-lg); background: var(--color-gray-800); border: 1px solid var(--color-gray-600); color: var(--color-white); font-family: var(--font-mono); outline: none; transition: border-color var(--transition-fast); }
.input:focus-visible { border-color: var(--color-blue-500); }

/* --- Lists (replaces space-y) --- */
.list--spaced { list-style: none; margin-top: 0; padding-left: 0; }
.list--spaced li { margin-block: var(--space-sm); }   /* space-y-2 = .5rem */
.list--spaced--3 li { margin-block: var(--space-xs); }   /* space-y-3 = .75rem */

/* Ordered list (list-decimal + list-inside) */
.list--ordered { list-style-type: decimal; padding-left: var(--space-xl); }
.list--bulleted { list-style-type: disc; padding-left: var(--space-xl); }

/* --- Text Colors --- */
.text-blue   { color: var(--color-blue-400); }
.text-green  { color: var(--color-green-400); }
.text-gray-300 { color: var(--color-gray-300); }
.text-gray-400 { color: var(--color-gray-400); }
.text-gray-500 { color: var(--color-gray-500); }

/* Admin-specific colors */
.text-red-400 { color: #ef4444; }
.text-green-400 { color: var(--color-green-400); }
.text-yellow-400 { color: #eab308; }
.text-red-200 { color: var(--color-red-200); }

/* --- Code inline (monospace) --- */
.code-inline { display: inline; background: var(--color-gray-800); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-md); font-family: var(--font-mono); }

/* --- Hidden state (used by JS for toggling) --- */
.hidden { display: none; }

/* --- Error / alert panels --- */
.alert--error { background: var(--color-red-900); border: 1px solid var(--color-red-700); padding-block: var(--space-md); padding-inline: var(--space-xl); border-radius: var(--radius-lg); }

/* Compact error variant (index22.html) */
.alert--error--compact { background: var(--color-red-900); padding: var(--space-md); margin-top: var(--space-sm); border-radius: var(--radius-lg); }

/* --- FAQ / details --- */
.faq-item { list-style: none; background: var(--color-gray-900); padding: var(--space-lg); border-radius: var(--radius-lg); cursor: pointer; }
.faq-item summary { display: flex; justify-content: space-between; align-items: center; font-size: 1.15rem; font-weight: 700; }

/* Arrow rotation on open */
.faq-item[open] summary .faq__arrow { rotate: 180deg; transition-duration: var(--transition-base); }
.faq__arrow { display: inline-block; transition-duration: var(--transition-base); }

/* --- Images / demo image --- */
.image--demo { max-width: 42rem; margin-inline: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-2xl); }

/* --- Footer specific --- */
.footer { padding-block: clamp(2rem, 4vw, 2.5rem); }   /* Сжали паддинг футера */
.footer__divider { border-top: 1px solid var(--color-gray-700); padding-top: var(--space-2xl); } /* Уменьшили отступ сверху внутри футера */

/* Footer nav links */
.footer a { text-decoration: none; color: var(--color-gray-400); transition: color var(--transition-fast); }
.footer a:hover, .footer a:focus-visible { color: var(--color-white); }
.footer span { cursor: default; transition: color var(--transition-fast); }
.footer span:hover, .footer span:focus-visible { color: var(--color-white); }

/* --- Content / info blocks (integration section) --- */
.info-block { background: #1f1f1f; padding: 1.25rem; border-radius: var(--radius-lg); margin-top: var(--space-lg); }

/* Inline utility classes (for remaining HTML patterns, keep minimal) */
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.max-w-md    { max-width: 28rem; }     /* ~448px */
.max-w-lg    { max-width: 32rem; }     /* ~512px */
.max-w-xl    { max-width: 36rem; }     /* ~576px */
.max-w-2xl   { max-width: 42rem; }
.max-w-3xl   { max-width: 48rem; }
.max-w-4xl   { max-width: 56rem; }
.max-w-1000  { max-width: 1000px; }
.font-bold { font-weight: 700; }
.space-y-2 li, .space-y-3 li, .space-y-4 li { margin-block: var(--space-sm); }
.space-y-8 > * + * { margin-top: 1.25rem; } /* Ужали вертикальный шаг между элементами с 2rem до 1.25rem */
.gap-8 { gap: 1.5rem; } /* Сжали общий gap */

/* Inline flex layouts (FAQ summaries) */
.flex.justify-between.items-center { display: flex; justify-content: space-between; align-items: center; }

/* --- Update status text --- */
.update-status { color: var(--color-gray-300); }

.code-path {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;

  background: var(--color-gray-800);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
}

/* ============================================
   Admin Panel Styles (admin.html)
   ============================================ */
.admin-body { background: #0f0f0f; color: white; }

.admin-header { padding: 1.5rem; border-bottom: 1px solid var(--color-gray-700); display: flex; justify-content: space-between; }

.admin-panel { padding: 1.5rem; }

.admin-stat-card { background: #18181b; padding: 1rem; border-radius: var(--radius-lg); }

.admin-login-form input {
  padding: .5rem 1rem;
  background: #1f1f1f;
  border: 1px solid #3f3f46;
  border-radius: var(--radius-md);
}

.key-cell { max-width: 20rem; width: 33%; font-family: monospace; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.admin-table th, .admin-table td { padding: 10px; }
.row-hover:hover { background: #1f1f1f; }
.admin-table tbody tr { border-bottom: 1px solid var(--color-gray-800); }
.admin-table thead tr { color: #71717a; border-bottom: 1px solid var(--color-gray-700); }

/* Admin inline utility fallbacks */
.text-xl { font-size: clamp(1.25rem, 3vw, 1.5rem); }
.font-bold { font-weight: 700; }
.bg-gray-900 { background: var(--color-gray-900); }
.p-4 { padding: 1rem; }
.rounded { border-radius: var(--radius-lg); }
.border-b { border-bottom: 1px solid var(--color-gray-700); }
.mb-6 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: .75rem; }
.mt-8 { margin-top: 1.5rem; } /* Поджали отступ в админке */
.text-sm { font-size: .875rem; }
.text-xs { font-size: .75rem; }
.font-mono { font-family: var(--font-mono); }


/* ============================================
    Changelog / Release Notes
    ============================================ */
.changelog-card {
  max-width: 42rem;
  margin: 1.5rem auto 0;

  background: var(--color-gray-900);
  border: 1px solid var(--color-gray-700);
  border-radius: var(--radius-lg);

  padding: 1rem 1.25rem;

  text-align: left;
}

.changelog-version {
  font-size: 1.1rem;
  margin-bottom: .75rem;
}

.changelog-section {
  margin-top: .75rem;
}

.changelog-section h4 {
  font-size: .95rem;
  margin-bottom: .35rem;
  color: var(--color-white);
}

.changelog-list {
  margin: 0;
  padding-left: 1.1rem;

  color: var(--color-gray-300);
}

.changelog-list li {
  margin: .2rem 0;

  overflow-wrap: anywhere;
  word-break: break-word;

  line-height: 1.35;
}

/* ============================================
    Responsive helpers
    ============================================ */
@media (max-width: 767px) { .container { padding-inline: 1rem; } }