/* ==== Общие настройки ==== */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Roboto', sans-serif;
  color: #f5e6b8;
  background: linear-gradient(135deg, #000000, #3a2f0b, #bfa14a);
  background-size: 400% 400%;
  animation: gradientBG 20s ease infinite;
  scroll-behavior: smooth;
}
a { text-decoration: none; color: #f5e6b8; }
a:hover { color: #fff1a8; }

@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ==== Header ==== */
header {
  padding: 90px 20px 60px;
  text-align: center;
}
header h1 {
  font-size: 50px;
  font-weight: 700;
  letter-spacing: 2px;
  background: linear-gradient(90deg, #f5e6b8, #d4af37, #fff1a8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: transform 0.3s ease;
}
header h1:hover { transform: scale(1.05); }
header p { margin-top: 18px; font-size: 18px; color: #e8d9a8; }

/* ==== Navigation ==== */
nav { margin-top: 40px; }
nav a {
  display: inline-block;
  margin: 8px;
  padding: 12px 28px;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.12);
  font-weight: 500;
  border: 1px solid rgba(212, 175, 55, 0.45);
  transition: all 0.25s ease;
}
nav a:hover {
  background: rgba(212, 175, 55, 0.3);
  transform: translateY(-2px);
}

/* ==== Main container ==== */
.main { max-width: 980px; margin: 0 auto 90px; padding: 0 20px; }

/* ==== Sections ==== */
.section {
  background: rgba(0,0,0,0.5);
  opacity: 0.5; /* начальная прозрачность */
  transform: translateY(30px); /* сдвиг вниз */
  border-radius: 20px;
  padding: 45px;
  margin-top: 45px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.6);
  border: 1px solid rgba(212,175,55,0.25);
  transition: opacity 0.8s ease, transform 0.8s ease, box-shadow 0.3s ease;
}
.section.visible { opacity: 1; transform: translateY(0); }
.section:hover { box-shadow: 0 20px 50px rgba(212,175,55,0.5); }

.section h2 {
  margin-top: 0;
  font-size: 28px;
  letter-spacing: 1px;
  background: linear-gradient(90deg, #fff1a8, #d4af37);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section p, .section li { font-size: 17px; line-height: 1.9; }
.section ul { padding-left: 20px; margin-top: 20px; }

/* ==== Cards ==== */
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.card {
  flex: 1 1 calc(50% - 20px);
  background: rgba(0,0,0,0.55);
  border-radius: 15px;
  padding: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 28px rgba(212,175,55,0.5);
}
.card h3 {
  margin-top: 0;
  font-size: 20px;
  background: linear-gradient(90deg, #fff1a8, #d4af37);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.card p, .card li {
  font-size: 16px;
  margin-top: 8px;
}

/* ==== Accordion ==== */
.accordion h3 {
  cursor: pointer;
  background: rgba(212,175,55,0.1);
  padding: 10px;
  border-radius: 8px;
  transition: all 0.2s ease;
}
.accordion h3.active {
  background: rgba(212,175,55,0.3);
}
.accordion-content {
  display: none;
  margin-top: 10px;
}
.accordion-content ul {
  padding-left: 20px;
}

/* ==== Status animation ==== */
.code {
  animation: blinkStatus 1.5s infinite;
  color: #d4af37;
  font-weight:700;
  padding: 15px;
  border-radius:12px;
  background: rgba(0,0,0,0.6);
}
@keyframes blinkStatus {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ==== Footer ==== */
.footer {
  text-align:center;
  padding:35px 20px;
  font-size:14px;
  color:#e8d9a8;
  opacity:0.8;
}

/* ==== Demo inputs/buttons ==== */
.demo-container input {
  padding: 10px 15px;
  font-size: 16px;
  border-radius: 8px;
  border: 1px solid rgba(212,175,55,0.45);
  margin-right: 10px;
}
.demo-container button {
  padding: 10px 15px;
  font-size: 16px;
  border-radius: 8px;
  border: 1px solid rgba(212,175,55,0.45);
  background: rgba(212,175,55,0.2);
  cursor: pointer;
  transition: all 0.2s ease;
}
.demo-container button:hover {
  background: rgba(212,175,55,0.35);
}

/* ==== Quotes ==== */
#quote {
  margin-top: 25px;
  font-size: 16px;
  font-style: italic;
  color: #d4af37;
  text-align: center;
}