:root {
      --bg: #0f0f12;
      --card: #16161a;
      --text: #eaeaf1;
      --muted: #b9b9c6;
      --accent: #ff4d6d;
      --accent-2: #7aa2ff;
      --border: #23232b;
      --maxw: 1100px;
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; font-weight:200; }
    a { color: var(--accent); text-decoration: underline; }
    a:hover { text-decoration: none; }
    img { max-width: 100%; display: block; }
    .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

    /* Header */
    header {
      border-bottom: 1px solid var(--border);
      position: sticky; top: 0; backdrop-filter: saturate(180%) blur(8px);
      background: rgba(15,15,18,0.7); z-index: 100;
    }
    .nav { display: flex; align-items: center; justify-content: space-between; height: 64px; }
    .brand { display: flex; align-items: center; gap: 12px; font-weight: 300; letter-spacing: 0.5px; font-family:"Playfair Display"}
    .brand .dot {
      width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2));
    }
    .menu { display: flex; gap: 18px;  align-items: center; }
    .menu a { color: var(--muted); font-weight: 300; text-decoration: none;}
    .menu a.active, .menu a:hover { color: var(--text);text-decoration: none; font-weight:600px; }
	/* По подразбиране менюто е видимо */

/* Hamburger бутон скрит на големи екрани */
.hamburger {  display: none;  font-size: 24px;  background: none;  border: none;  color: var(--text);  cursor: pointer;}

    /* Hero */
    .hero {
      display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: center;
      padding: 48px 0 28px;
    }
    .hero h1 {
      font-family: "Roboto Slab", serif; font-size: clamp(28px, 4vw, 42px); margin: 0 0 10px; font-weight:100;
    }
    .hero p { color: var(--muted); font-size: clamp(16px, 2.2vw, 18px); line-height: 1.6; }
    .cta { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
    .btn {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 12px 16px; border-radius: 10px; border: 1px solid var(--border);
      background: linear-gradient(180deg, #1b1b21, #141418); color: var(--text); font-weight: 600;
    }
    .btn.primary { border-color: transparent; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #0b0b0f; }
    .btn:hover { transform: translateY(-1px); transition: 150ms ease; }

    .portrait {
      border-radius: 16px; overflow: hidden; border: 1px solid var(--border);
      box-shadow: 0 20px 50px rgba(0,0,0,0.35);
      background: #121217;
    }
    .portrait img { aspect-ratio: 4/5; object-fit: cover; }
    .accentN{color:#91aaff;}
    .accentM{color:#7aa2ff;}
    /* Sections */
    section { padding: 36px 0; border-top: 1px solid var(--border); }
    section h2 {
      font-family: "Roboto Slab", serif; font-size: clamp(22px, 3vw, 30px);
      margin: 0 0 16px; font-weight:100;
    }
    .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
    .card {
      background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px;
    }
    .muted { color: var(--muted); }

    /* Skills chips */
    .chips { display: flex; gap: 10px; flex-wrap: wrap; }
    .chip {
      border: 1px solid var(--border); color: var(--text); padding: 8px 10px; border-radius: 999px;
      background: #1a1a20; font-weight: 600; font-size: 14px;
    }

    /* Credits list */
    .credits { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .credit {
      padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: #14141a;
    }
    .credit h4 { margin: 0 0 6px; font-size: 16px; }
    .credit .meta { color: var(--muted); font-size: 14px; }

    /* Gallery */
    .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .gallery img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); }

    /* Media embed */
    .media {
      position: relative; padding-top: 56.25%; border-radius: 14px; overflow: hidden; border: 1px solid var(--border);
      background: #0b0b10;
    }
    .media iframe, .media video {
      position: absolute; inset: 0; width: 100%; height: 100%;
    }

    /* Contact */
    .contact {
      display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
    }
    .contact-form label { display: block; font-weight: 600; margin-bottom: 6px; }
    .contact-form input, .contact-form textarea {
      width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border);
      background: #13131a; color: var(--text);
    }
    .contact-form textarea { min-height: 120px; resize: vertical; }

    /* Footer */
    footer { padding: 26px 0 50px; color: var(--muted); }
    .social { display: flex; gap: 14px; flex-wrap: wrap; }

    /* Responsive */
    @media (max-width: 900px) {
      .hero { grid-template-columns: 1fr; }
      .grid-2, .contact { grid-template-columns: 1fr; }
      .credits { grid-template-columns: 1fr; }
      .gallery { grid-template-columns: repeat(2, 1fr); }
    }
	/* На малки екрани */
	@media (max-width: 768px) {
	  .menu {    display: none; /* скриваме менюто */    flex-direction: column;    background: var(--card);    position: absolute;    top: 64px;    right: 20px;    padding: 10px;    border-radius: 8px;  }
	  .menu.show {    display: flex; /* показваме при активиране */  }
	  .hamburger {    display: block; /* показваме бутона */  }
	}
    @media (max-width: 520px) {
      .gallery { grid-template-columns: 1fr; }
    }
	:root {
  --bg: linear-gradient(135deg, #0f0f12, #1a1a1f);
  --card: rgba(22, 22, 26, 0.85);
  --text: #f5f5fa;
  --muted: #b9b9c6;
  --accent: #ff4d6d;
  --accent-2: #7aa2ff;
  --border: #2a2a33;
  --shadow: 0 8px 24px rgba(0,0,0,0.4);
}

body {
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

/* Заглавия */
h1, h2 {
  font-family: 'Playfair Display', serif;
  letter-spacing: 0.5px;
}

/* Карти */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow);
  transition: transform 0.3s ease;
}
.card:hover {
  transform: translateY(-4px);
}

/* Бутони */
.btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #0f0f12;
  font-weight: 400;
  border: none;
  border-radius: 12px;
  padding: 12px 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family:"Roboto Slab";
}
.btn:hover {
  filter: brightness(1.1);
  transform: scale(1.05);
}

/* Галерия */
.gallery img {
  border-radius: 12px;
  box-shadow: var(--shadow);
  transition: transform 0.3s ease;
}
.gallery img:hover {
  transform: scale(1.05);
}

/* Анимации при скрол */
section {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease;
}
section.visible {
  opacity: 1;
  transform: translateY(0);
}