/* === ПОРТАЛЬНЫЕ СТИЛИ — для главной, семьи, сообщества === */
@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&family=Share+Tech+Mono&family=Inter:wght@400;500;600;700&family=IM+Fell+English&display=swap');

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Inter', sans-serif;
  background:#f5f2e8;
  color:#1a1a1a;
  line-height:1.6;
}

.container { max-width:1200px; margin:0 auto; padding:0 1.5rem; }
a { color:inherit; }

/* === ШАПКА === */
.site-header {
  background:#1a1a1a;
  border-bottom:3px solid #FFE800;
  position:sticky; top:0; z-index:100;
}
.header-inner {
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; gap:1.5rem;
  padding:0.8rem 1.5rem;
}
.logo {
  font-family:'UnifrakturMaguntia', cursive;
  font-size:1.6rem;
  color:#FFE800;
  text-decoration:none;
  letter-spacing:0.02em;
}
.logo-dot { color:#FF40B4; }
.main-nav {
  display:flex; gap:0; flex:1;
}
.nav-link {
  color:#c8c4b0;
  text-decoration:none;
  padding:0.5rem 1rem;
  font-size:0.85rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.05em;
  transition:none;
  border-bottom:2px solid transparent;
}
.nav-link:hover { color:#FFE800; border-bottom-color:#FFE800; }
.nav-mb:hover { color:#FFE800; border-bottom-color:#FFE800; }
.nav-cy:hover { color:#00ddff; border-bottom-color:#00ddff; }
.nav-pb:hover { color:#f0c078; border-bottom-color:#f0c078; }
.nav-family:hover { color:#ff6030; border-bottom-color:#ff6030; }
.header-search input {
  background:#0a0a0a;
  border:1px solid #333;
  color:#c8c4b0;
  padding:0.4rem 0.8rem;
  font-size:0.85rem;
  width:180px;
  font-family:'Share Tech Mono', monospace;
}
.header-search input:disabled { opacity:0.5; cursor:not-allowed; }

/* === HERO === */
.hero {
  background:#1a1a1a;
  color:#fff;
  padding:4rem 1.5rem 3rem;
  text-align:center;
  border-bottom:6px solid #FF40B4;
  background-image:
    radial-gradient(ellipse at 30% 40%, rgba(255,232,0,0.08) 0%, transparent 40%),
    radial-gradient(ellipse at 70% 60%, rgba(255,64,180,0.06) 0%, transparent 40%);
}
.hero-inner { max-width:900px; margin:0 auto; }
.hero-title {
  font-family:'UnifrakturMaguntia', cursive;
  font-size:clamp(2.5rem, 6vw, 4.5rem);
  line-height:1.05;
  letter-spacing:0.01em;
  margin-bottom:1rem;
}
.accent-yellow { color:#FFE800; }
.hero-sub {
  font-family:'IM Fell English', serif;
  font-style:italic;
  font-size:1.15rem;
  color:#c8c4b0;
}

/* === СЕКЦИИ === */
.section-title {
  font-family:'UnifrakturMaguntia', cursive;
  font-size:2.2rem;
  margin-bottom:1.5rem;
  color:#1a1a1a;
  position:relative;
  padding-bottom:0.5rem;
}
.section-title::after {
  content:''; display:block;
  width:60px; height:3px;
  background:#FF40B4;
  margin-top:0.5rem;
}

section { padding:3rem 0; }
.systems { background:#f5f2e8; }

/* === ВЫБОР СИСТЕМЫ === */
.system-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:1.5rem;
}
.system-card {
  display:block;
  padding:2rem;
  text-decoration:none;
  position:relative;
  overflow:hidden;
  transition:transform 0.2s;
  border:2px solid #1a1a1a;
}
.system-card:hover { transform:translateY(-4px); }

.system-mb {
  background:#FFE800;
  color:#1a1a1a;
}
.system-cy {
  background:#0a0a0a;
  color:#c8c4d4;
  background-image:
    radial-gradient(ellipse at 20% 80%, rgba(192,64,255,0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(0,221,255,0.08) 0%, transparent 50%);
}
.system-cy::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.06) 2px, rgba(0,0,0,0.06) 4px);
}

.system-title-block { margin-bottom:1rem; }
.system-mb .system-title {
  font-family:'UnifrakturMaguntia', cursive;
  font-size:3rem;
  line-height:0.95;
  transform:rotate(-2deg);
  display:inline-block;
}
.system-mb .system-sub {
  font-family:'IM Fell English', serif;
  font-style:italic;
  color:#8b0000;
  margin-top:0.3rem;
  font-size:1rem;
}
.system-cy .system-title {
  font-family:'Share Tech Mono', monospace;
  font-size:2.8rem;
  color:#00ddff;
  letter-spacing:0.1em;
  text-shadow:0 0 20px rgba(0,221,255,0.4);
  line-height:1;
}
.system-cy .system-sub {
  font-family:'Share Tech Mono', monospace;
  color:#FF40B4;
  margin-top:0.3rem;
  font-size:0.85rem;
  letter-spacing:0.15em;
}

.system-desc {
  margin:1rem 0;
  line-height:1.7;
  font-size:0.95rem;
}
.system-mb .system-desc { color:#1a1a1a; }
.system-cy .system-desc { color:#a8a4b8; }

.system-tags {
  display:flex; gap:0.5rem; flex-wrap:wrap;
  margin:1rem 0;
}
.tag {
  display:inline-block;
  padding:0.2rem 0.6rem;
  font-size:0.75rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.system-mb .tag { background:#1a1a1a; color:#FFE800; }
.system-cy .tag { background:#FF40B4; color:#0a0a0a; }

.system-enter {
  margin-top:1.5rem;
  font-weight:700;
  font-size:1rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.system-mb .system-enter { color:#8b0000; }
.system-cy .system-enter { color:#00ddff; font-family:'Share Tech Mono', monospace; }

/* PIRATE BORG карточка */
.system-pb {
  background:linear-gradient(135deg, #1a0f0a, #0a0504);
  color:#d4b078;
  border-color:#8b4513;
  background-image:
    radial-gradient(ellipse at 30% 30%, rgba(200,120,40,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 80%, rgba(139,48,32,0.12) 0%, transparent 50%);
  position:relative;
  overflow:hidden;
}
.system-pb::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(90deg, transparent 0px, transparent 3px, rgba(0,0,0,0.04) 3px, rgba(0,0,0,0.04) 4px);
}
.system-pb .system-title {
  font-family:'UnifrakturMaguntia', cursive;
  font-size:2.8rem;
  line-height:0.95;
  color:#f0c078;
  text-shadow:2px 2px 0 #000, 0 0 20px rgba(240,192,120,0.3);
  transform:rotate(-1deg);
  display:inline-block;
}
.system-pb .system-sub {
  font-family:'IM Fell English', serif;
  font-style:italic;
  color:#c89058;
  margin-top:0.3rem;
  font-size:1rem;
}
.system-pb .system-desc { color:#c8a878; font-family:'IM Fell English', serif; }
.system-pb .tag { background:#8b4513; color:#f0c078; }
.system-pb .system-enter { color:#f0c078; font-family:'Special Elite', serif; }

/* === ДОРОЖНАЯ КАРТА === */
.roadmap { background:#1a1a1a; color:#f5f2e8; }
.roadmap .section-title { color:#FFE800; }
.roadmap-intro {
  color:#a89c80;
  margin-bottom:2rem;
  font-family:'IM Fell English', serif;
  font-style:italic;
  font-size:1rem;
  max-width:700px;
}
.roadmap-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:1rem;
}
.roadmap-card {
  background:rgba(255,255,255,0.04);
  padding:1.2rem 1.5rem;
  border-left:3px solid #5a5040;
  transition:transform 0.2s;
}
.roadmap-card:hover { transform:translateY(-2px); }
.roadmap-status {
  font-family:'Share Tech Mono', monospace;
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.12em;
  margin-bottom:0.5rem;
  font-weight:700;
}
.roadmap-title {
  color:#f5f2e8;
  font-size:1.1rem;
  margin-bottom:0.5rem;
  font-family:'UnifrakturMaguntia', cursive;
  font-weight:400;
}
.roadmap-card p { color:#a89c80; font-size:0.88rem; line-height:1.6; }

/* Цвета статусов */
.roadmap-card.done {
  border-left-color:#5cb85c;
  background:rgba(92,184,92,0.05);
}
.roadmap-card.done .roadmap-status { color:#5cb85c; }

.roadmap-card.progress {
  border-left-color:#FFE800;
  background:rgba(255,232,0,0.05);
}
.roadmap-card.progress .roadmap-status { color:#FFE800; }

.roadmap-card.planned {
  border-left-color:#FF40B4;
  background:rgba(255,64,180,0.04);
}
.roadmap-card.planned .roadmap-status { color:#FF40B4; }

.roadmap-card.future {
  border-left-color:#706060;
}
.roadmap-card.future .roadmap-status { color:#706060; }
.roadmap-card.future .roadmap-title { color:#a89c80; }

/* === О ПРОЕКТЕ === */
.about { background:#e8e0c8; }
.about-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.5rem;
}
.about-card {
  background:#f5f2e8;
  padding:1.5rem;
  border-left:4px solid #8b0000;
}
.about-card h3 {
  font-family:'UnifrakturMaguntia', cursive;
  font-size:1.4rem;
  margin-bottom:0.8rem;
  color:#1a1a1a;
}
.about-card p { font-size:0.92rem; line-height:1.7; }

/* === ФУТЕР === */
.site-footer {
  background:#0a0a0a;
  color:#706060;
  padding:3rem 0 1rem;
  font-size:0.85rem;
}
.footer-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:2rem;
  margin-bottom:2rem;
}
.footer-grid h4 {
  color:#FFE800;
  font-family:'UnifrakturMaguntia', cursive;
  font-size:1.2rem;
  margin-bottom:0.8rem;
  font-weight:400;
}
.footer-grid a {
  display:block;
  color:#a89c80;
  text-decoration:none;
  padding:0.2rem 0;
  font-size:0.88rem;
}
.footer-grid a:hover { color:#FFE800; }
.footer-grid p { color:#706060; font-size:0.8rem; margin-bottom:0.3rem; }
.footer-bottom {
  border-top:1px solid #333;
  padding-top:1rem;
  text-align:center;
  color:#504030;
  font-size:0.8rem;
}

/* === АДАПТИВ === */
@media (max-width:768px) {
  .header-inner { flex-wrap:wrap; padding:0.6rem 1rem; }
  .main-nav { order:3; width:100%; overflow-x:auto; }
  .header-search { display:none; }
  .system-grid, .roadmap-grid, .about-grid, .footer-grid { grid-template-columns:1fr; }
  .hero { padding:2.5rem 1rem 2rem; }
  .hero-title { font-size:2.2rem; }
  .section-title { font-size:1.8rem; }
  .nav-link { padding:0.4rem 0.6rem; font-size:0.75rem; }
}