@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap');
:root{
  --bg:#0b0b10;
  --card:#111018;
  --accent:#8b5cf6;
  --accent-2:#6d28d9;
  --glass: rgba(255,255,255,0.03);
}

html,body{height:100%}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial; background:var(--bg); color:#e6e6ee}

/* hero float */
@keyframes floaty { 0% { transform: translateY(0);} 50% { transform: translateY(-6px);} 100% { transform: translateY(0);} }
.animate-float{ animation: floaty 6s ease-in-out infinite; }

/* generic cards */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
  padding:1.6rem;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.03);
  box-shadow: 0 10px 30px rgba(5,5,10,0.6);
}
.card-title{ font-weight:700; color:var(--accent); font-size:1.125rem }
.card-desc{ color:#bfc3d9; margin-top:.5rem; font-size:.95rem }

/* boards */
.board{
  background: linear-gradient(180deg, rgba(20,18,30,0.6), rgba(8,7,12,0.6));
  padding:1.4rem;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.03);
  box-shadow: 0 8px 24px rgba(10,8,20,0.5);
}
.board-title{ color:var(--accent); font-weight:700; font-size:1.05rem }
.board-body{ color:#c6c7d8; margin-top:.5rem }

/* stat cards */
.stat-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
  padding:1.2rem; border-radius:12px; border:1px solid rgba(255,255,255,0.03);
  text-align:center;
}
.stat-name{ color:#9aa0c6; font-size:.9rem }
.stat-value{ color:white; font-weight:700; font-size:1.4rem }

/* person */
.person{ background:#0f0f15; padding:1rem; border-radius:12px; text-align:center; box-shadow:0 10px 30px rgba(5,5,10,0.5) }
.person-name{ font-weight:700; color:var(--accent) }
.person-role{ color:#bfc3d9; margin-top:.5rem; font-size:.9rem }

/* FAQs */
.faq summary{ list-style:none; cursor:pointer; padding:0.8rem; background:#0f0f15; border-radius:10px; border:1px solid rgba(255,255,255,0.02) }
.faq summary::-webkit-details-marker { display:none; }
.faq-body{ padding:0.8rem 1rem; color:#c7c9df }

/* ROADMAP */
.road-item{ background: linear-gradient(90deg, rgba(108,64,255,0.04), rgba(0,0,0,0.02)); padding:1rem; border-radius:10px; border:1px solid rgba(255,255,255,0.02) }
.road-title{ color:var(--accent); font-weight:700 }
.road-desc{ color:#bfc3d9; margin-top:.4rem }

/* form inputs — тёмные фиолет/серые — НЕТ белых полей */
.input-dark{
  width:100%;
  padding:0.9rem 1rem;
  border-radius:12px;
  background: linear-gradient(135deg, rgba(20,14,35,0.7), rgba(25,18,50,0.64));
  border: 1px solid rgba(124,58,237,0.12);
  color:#e7e7f2;
  outline:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02), 0 6px 24px rgba(6,5,10,0.6);
  transition: transform .15s ease, box-shadow .15s ease;
}
.input-dark::placeholder{ color: rgba(230,230,245,0.35) }
.input-dark:focus{ transform: translateY(-3px); box-shadow: 0 12px 40px rgba(108,64,255,0.12); border-color: rgba(124,58,237,0.36) }

/* Buttons */
.btn-cta{
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  padding:0.75rem 1.2rem;
  border-radius:12px;
  color:white;
  font-weight:700;
  box-shadow: 0 10px 30px rgba(108,64,255,0.18);
  transition: transform .12s ease, filter .12s ease;
}
.btn-cta:hover{ transform: translateY(-3px); filter:brightness(1.05) }

.btn-ghost{
  background: transparent;
  border: 1px solid rgba(255,255,255,0.05);
  padding:0.6rem 1rem;
  border-radius:10px;
  color:#cfd3ee;
}





/* Small responsive */
@media (max-width:1024px){
  #hero .flex {
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
  }

  #hero h1 {
    font-size: 3.2rem;
    text-align: center;
  }

  #hero p {
    text-align: center;
    font-size: 1rem;
  }

  #hero .mt-6.flex.gap-4 {
    flex-direction: column;
    gap: 0.6rem;
  }

  #hero .grid.grid-cols-3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
  }

  #hero .bg-black\/40 {
    padding: 1.5rem;
  }
  .card, .board, .stat-card, .person, .road-item {
    padding: 1rem;
  }
  .card-title{ font-size:1.05rem }
  .card-desc, .board-body, .stat-name, .stat-value, .person-role, .road-desc { font-size:0.9rem }
  .stat-value{ font-size:1.2rem }
}

/* Mobile */
@media (max-width:768px){
  #hero .flex {
    flex-direction: column;
    justify-content: center; /* центрируем по вертикали */
    gap: 1rem;
  }

  #hero .grid-cols-3 {
    grid-template-columns: repeat(1, 1fr);
    gap: 0.8rem;
  }

  #hero h1 {
    font-size: 2.5rem;
    text-align: center;
  }

  #hero p {
    text-align: center;
    font-size: 0.95rem;
  }

  #hero .mt-6.flex.gap-4 {
    flex-direction: column;
    gap: 0.6rem;
  }

  #hero .bg-black\/40 {
    padding: 1.2rem;
  }
  body{ padding:0 1rem; }
  .card, .board, .stat-card, .person, .road-item { padding:0.8rem; border-radius:12px; }
  .card-title, .board-title, .road-title{ font-size:1rem }
  .card-desc, .board-body, .stat-name, .stat-value, .person-role, .road-desc{ font-size:0.85rem }
  .stat-value{ font-size:1.1rem }
  .btn-cta, .btn-ghost{ width:100%; text-align:center; font-size:0.95rem; padding:0.65rem 0; }
  .input-dark{ padding:0.75rem 0.9rem; font-size:0.9rem; }

  /* Flex blocks stacking */
  .board, .card, .stat-card, .person, .road-item{ display:block; width:100%; }
  .flex-row{ flex-direction: column !important; }
}

/* Extra small */
@media (max-width:480px){
  #hero {
    height: auto;
    padding: 3rem 1rem;
  }

  #hero h1 {
    font-size: 2rem;
  }

  #hero p {
    font-size: 0.9rem;
  }

  #hero .grid.grid-cols-3 {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  #hero .bg-black\/40 {
    padding: 1rem;
  }
  .card-title, .board-title, .road-title{ font-size:0.95rem }
  .card-desc, .board-body, .stat-name, .stat-value, .person-role, .road-desc{ font-size:0.8rem }
  .stat-value{ font-size:1rem }
  .input-dark{ padding:0.65rem 0.8rem; font-size:0.85rem; }
}