/* ====== RESET & BASE ====== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color:#0D0D0D;
  background-image:radial-gradient(rgba(201,166,70,0.15) 1px, transparent 1px);
  background-size:40px 40px;
  color:#FFFFFF;
  line-height:1.6;
  transition:.3s ease;
}
a{
  color:inherit;
  text-decoration:none;
}

ul{
  list-style:none;
}

.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

/* ===== Меню навігації: базовий стиль посилань ===== */
.nav-links a {
  position: relative;                /* потрібно для псевдоелемента підкреслення */
  display: inline-block;             /* щоб лінія підлаштовувалась під текст */
  padding: 4px 0;                    /* трохи повітря зверху/знизу */
  text-decoration: none;             /* прибираємо стандартне підкреслення */
  transition: color 0.25s ease;      /* плавна зміна кольору тексту */
}

/* ===== Анімоване підкреслення (лінія під пунктом меню) ===== */
.nav-links a::after {
  content: "";                       /* створюємо псевдоелемент-лінію */
  position: absolute;
  left: 0;
  bottom: -4px;                      /* відступ від тексту вниз */
  width: 100%;                       /* по всій ширині тексту */
  height: 2px;                       /* товщина лінії */
  background-color: var(--gold);         /* твій фірмовий колір */
  border-radius: 999px;              /* лінія з м’якими краями */
  
  transform: scaleX(0);              /* схлопнута в нуль по осі X */
  transform-origin: left center;     /* анімація буде виростати зліва направо */
  opacity: 0;                        /* спочатку невидима */
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* ===== Ховер-ефект: при наведенні з'являється анімована лінія ===== */
.nav-links a:hover::after {
  transform: scaleX(1);              /* розгортаємо лінію по всій ширині */
  opacity: 1;                        /* робимо видимою */
}

/* ===== Активний пункт меню ===== */
.nav-links a.active {
  color: var(--gold-bright);                    /* підсвічуємо колір активного пункту */
  font-weight: 600;
}

/* Для активного пункту лінія завжди "розгорнута" */
.nav-links a.active::after {
  transform: scaleX(1);
  opacity: 1;
}



/* ====== TOKENS ====== */
:root{
  --color-bg-dark:#0D0D0D;
  --color-bg-soft:#1A1A1A;
  --color-text:#FFFFFF;
  --color-muted:#B3B3B3;

  --gold:#C9A646;        /* базове золото */
  --gold-bright:#FFD700; /* яскраві акценти/hover */
  --gold-soft:#E6BE8A;   /* м’які підзаголовки/деталі */

  --glass-bg:rgba(255,255,255,0.06);
  --glass-border:rgba(201,166,70,0.22);
  --glass-shadow:0 10px 28px rgba(0,0,0,0.45);
  --glass-ring:inset 0 1px rgba(255,255,255,0.08);
}

/* ====== HEADER / NAV ====== */
header{
  position:sticky;top:0;z-index:1000;
  background:rgba(0,0,0,.4);
  backdrop-filter:blur(4px);
  padding:10px 0;
}
.logo{
  font-size:24px;
  font-weight:700;
  color:var(--gold-soft);
}
.logo img{
  height:50px;
  width:auto;
  margin-right:10px;
  vertical-align:middle;
}
.main-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
}
.main-nav ul{
  display:flex;
  gap:20px;
}
.main-nav a{
  color:var(--color-text);
  font-weight:500;
  transition:color .3s ease;
}
.main-nav a:hover{
  color:var(--gold-soft);
}

.btn{
  background:var(--gold);
  color:#000;
  padding:10px 20px;border-radius:25px;
  font-weight:700;display:inline-block;
  transition:filter .2s ease, transform .2s ease;
}
.btn:hover{
  filter:brightness(1.05);
  transform:translateY(-1px);
}

/* Burger */
.nav-links{
  display:flex;
  gap:20px;
}
.burger{
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
}
.burger span{
  width:25px;
  height:3px;
  background:var(--gold-soft);
  border-radius:2px;
  transition:all .3s ease;
}
@media (max-width:768px){
  .nav-links{
    position:fixed;
    right:0;top:0;
    height:100vh;
    width:60%;
    background:rgba(0,0,0,.4);
    backdrop-filter:blur(4px);
    flex-direction:column;
    align-items:center;
    gap:20px;
    padding-top:60px;
    transform:translateX(100%);
    transition:transform .3s ease-in;
    box-shadow:-2px 0 5px rgba(0,0,0,.1);
  }
  .nav-links.active{transform:translateX(0)}
  .burger{display:flex}
}
.burger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.burger.active span:nth-child(2){opacity:0}
.burger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* ====== HERO ====== */
.hero{
  position:relative;
  height:100vh;
  overflow:hidden;
  padding:60px 0;
}
.hero-video{
  position:absolute;
  inset:0;width:100%;
  height:100%;
  object-fit:cover;
  z-index:-1;
}
.hero__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
}
.hero__content h1{
  font-size:48px;
  line-height:1.2;
  margin-bottom:20px;
  color:var(--gold-bright);
}
.hero__content h1 span{
  color:var(--gold-soft);
  font-weight:700;
}
.hero__content p{
  font-size:18px;
  margin-bottom:30px;
  max-width:500px;
}
.hero__image img{
  max-width:100%;
  border-radius:20px;
}

/* ====== GENERIC SECTIONS ====== */
.section-title{
  text-align:center;
  font-size:36px;
  margin-bottom:50px;
  color:var(--gold-bright);
  font-family: 'Quicksand', sans-serif;
  letter-spacing:.5px;
}
.section--transparent{
  background:transparent;
  color:var(--color-text);
}
.section-title::after{
  content:"";
  display:block;
  width:64px;
  height:2px;
  margin:10px auto 0;
  background:linear-gradient(90deg,var(--gold),var(--gold-bright));
  opacity:.9;
}

/* ====== ABOUT ====== */
.about{
  padding:80px 0;
}
.about__inner{
  display:flex;
  align-items:center;
  gap:40px;
  flex-wrap:wrap;
}
.about__image img{
  max-width:100%;
  border-radius:20px;
}
.about__content{
  max-width:600px;
}
.about__content h2{
  font-size:36px;
  margin-bottom:20px;
  color:var(--gold-soft);
}
.about__content p{
  font-size:18px;
  line-height:1.6;
  margin-bottom:15px;
  color:var(--color-muted);
}

/* ====== SERVICES ====== */
.services{
  padding:80px 0;
}
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;
  margin-top:32px;
}
.service-card{
  padding:50px;
  border-radius:18px;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow), var(--glass-ring);
  backdrop-filter:blur(10px) saturate(135%); -webkit-backdrop-filter:blur(10px) saturate(135%);
  transition:transform .25s ease, border-color .25s ease; color:var(--color-text);
}

.service-card h3{
  font-family:'Cinzel', serif;
  margin-bottom:8px;
  color:var(--gold-bright);
}
.service-card p{
  color:var(--color-muted);
  line-height:1.6;
}
.service-card img{
  width:100%;
  border-radius:10px;
  margin-bottom:15px;
}

/* ====== PORTFOLIO ====== */
.portfolio{
  padding:80px 0;
}
.portfolio__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px;
}
.portfolio__grid img{
  width:100%;
  border-radius:15px;
  transition:transform .3s ease;
}
.portfolio__grid img:hover{
  transform:scale(1.05);
}

/* Swiper */
.swiper{
  width:100%;
  padding:40px 0;
}
.swiper-slide{
  display:flex;
  justify-content:center;
  align-items:center;
}
.swiper-slide img{
  width:100%;
  max-width:400px;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
}
.swiper .swiper-button-next,
.swiper .swiper-button-prev{
  color:var(--gold) !important;
}
.swiper .swiper-pagination-bullet{
  background:var(--gold) !important;
  opacity:1 !important;
}
.swiper .swiper-pagination-bullet-active{
  background:var(--gold-bright) !important;
}

/* ====== MASTERS ====== */
.masters{
  padding:60px 20px;
  text-align:center;
}
.masters-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:24px;
  margin-top:32px;
}
.master-card{
  position:relative;
  text-align:center;
  padding:20px;
  border-radius:18px;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow), var(--glass-ring);
  transition:transform .3s ease, border-color .3s ease; overflow:hidden;
}
.master-card:hover{
  transform:translateY(-4px);
  border-color:var(--gold-bright);
}
.master-card img{
  width:150px;
  height:150px;
  object-fit:cover;
  border-radius:50%;
  margin-bottom:14px;
  border:2px solid var(--glass-border);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.master-card::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:140px;
  height:140px;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.8);
  opacity:0;
  transition:opacity .3s ease, transform .3s ease;
  pointer-events:none;
  z-index:0;
}
.master-card:hover::after{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}
.master-card h4{
  margin:0;
  font-family:'Cinzel', serif;
  color:var(--gold-bright);
  font-size:18px;
}
.master-card p{
  margin:6px 0 0;
  font-size:14px;
  color:var(--color-muted);
}

.master-more-btn, .master-card__btn {
  margin-top: 12px;
  background: var(--gold);
  color: #000;
  font-weight: 700;
  border: none;
  border-radius: 25px;
  padding: 8px 16px;
  cursor: pointer;
  transition: filter 0.3s ease, transform 0.3s ease;
}

.master-more-btn:hover,
.master-card__btn:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
}

/* Легкий акцент для картки вакансії, щоб м’яко виділялась */
.master-card--vacancy {
  position: relative;
}

.master-card--vacancy::before {
  content: "Вакансія";
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  background: rgba(209, 128, 172, 0.14);
  color: var(--gold-bright);
}

/* прихований блок з анімацією висоти */
.master-more {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease;
  margin-top: 0;
}

.master-more.is-open {
  max-height: 400px; /* змінити залежно від обсягу тексту */
  opacity: 1;
  margin-top: 10px;
}

@media(max-width:376px){
 .master-more.is-open{
    max-height: 600px; 
  }
}


/* ====== TESTIMONIALS ====== */
.testimonials{
  padding:80px 0
}
.testimonials-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;
  margin-top:32px;
}
.testimonial-card{
  padding:50px;
  border-radius:18px;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow), var(--glass-ring);
  backdrop-filter:blur(10px) saturate(135%); -webkit-backdrop-filter:blur(10px) saturate(135%);
  transition:transform .25s ease, border-color .25s ease;color:var(--color-text);
}

.testimonial-card blockquote{
  margin:0;
  font-style:italic;
  color:var(--color-muted);
}

.testimonial-card figcaption{
  margin-top:12px;
  font-weight:600;
  color:var(--gold-soft);
}

/* ====== CTA ====== */
.cta{
  padding:60px 20px;
  text-align:center;
  border-radius:15px;
  margin:60px 0;
  color:var(--color-text);
}
.cta__title{
  font-size:2.5rem;
  margin-bottom:15px;
  color:var(--gold-bright);
}
.cta__subtitle{
  font-size:1.2rem;
  margin-bottom:30px;
  color:var(--color-muted);
}
.btn--large{
  padding:15px 40px;
  font-size:1.25rem;
  border-radius:30px;
  display:inline-block;
}

/* ====== CONTACT ====== */
.contact{
  padding:50px 20px;
  text-align:center;
  border-radius:15px;
  margin-bottom:60px;
}
.contact h3{
  color:var(--gold-soft);
}
.contact a{
  color:var(--gold);
  font-weight:700;
}
.contact a:hover{
  text-decoration:underline;
}
.contact-form{
  padding:50px 20px;
  border-radius:15px;
}
.contact-form h3{
  text-align:center;
  margin-bottom:30px;
  color:var(--gold);
}
.form{
  max-width:400px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:15px;
}
.form label{
  font-weight:600;
  margin-bottom:5px;
  color:var(--gold);
}
.form input,
.form select{
  padding:10px;
  border-radius:8px;
  border:1px solid #444;
  background:#111;
  color:#eee;
}

textarea {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--color-text);
  resize: vertical;
  font-size: 15px;
  transition: border-color 0.3s ease;
}

textarea:focus {
  border-color: var(--gold-soft);
  outline: none;
}


/* ====== FOOTER ====== */
.footer{
  padding:30px 0;
  color:var(--gold-soft);
  font-size:14px;
}
.footer__container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
}
.footer__logo{
  font-size:24px;
  margin-bottom:10px;
  color:var(--gold);
}
.footer__phone{
  color:var(--gold);
  font-weight:600;
}
.footer__phone:hover{
  color:var(--gold-bright);
  text-decoration:underline;
}
.footer__socials{
  display:flex;
  gap:20px;
}
.footer__social-link{
  font-size:24px;
  color:var(--gold);
  transition:color .3s ease;
}
.footer__social-link:hover{
  color:var(--gold-bright);
}

/* ====== SCROLL TO TOP ====== */
#scrollToTopBtn{
  position:fixed;
  bottom:20px;
  right:40px;
  background:var(--gold);
  color:#000;
  border:none;
  padding:12px 16px;
  border-radius:50%;
  font-size:24px;
  cursor:pointer;
  display:none;
  z-index:1000;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
  transition:filter .2s ease, transform .2s ease
}
#scrollToTopBtn:hover{filter:brightness(1.06);transform:translateY(-1px)}

/* ====== BACKDROP FALLBACK ====== */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .service-card,.master-card,.testimonial-card{background:rgba(255,255,255,0.10)}
}

/* ===== Price Grid ===== */
.price .section-sub{
  color: var(--muted);
  margin-top: 6px;
}

/* Сітка */
.price-grid{
  margin-top: 20px;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(12, 1fr);
}

.price-card{
  grid-column: span 4;                
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--glass-shadow);
  cursor: zoom-in;
  transition: transform .25s ease, border-color .25s ease;
}

.price-card:hover{
  transform: translateY(-2px);
  border-color: var(--gold);
}

.price-card img {
  width: 100%;
  height: auto;
  object-fit: contain; /* замість cover */
  border-radius: 10px;
  display: block;
  margin: 0 auto;
}


.price-card figcaption{
  padding: 10px 12px 12px;
  color: var(--gold-soft);
  text-align: center;
  font-weight: 600;
  letter-spacing: .2px;
}

/* Респонсив */
@media (max-width: 1024px){
  .price-card{ grid-column: span 6; }  /* 2 в ряд */
}
@media (max-width: 600px){
  .price-card{ grid-column: span 12; } /* по одній */
}


/* ===== Секція з курсами ===== */
.courses {
  padding: 60px 0;
}

/* Обгортка, яка обмежує ширину контенту */
.courses__container {
  width: min(1200px, 100% - 40px);
  margin: 0 auto;
}

/* Заголовок секції */
.courses__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 40px;
  color: var(--gold-bright);
}

.courses__title {
  font-size: clamp(2rem, 2.4vw, 2.4rem);
  font-weight: 600;
  margin-bottom: 10px;
}

.courses__subtitle {
  font-size: 1rem;
  line-height: 1.5;
  opacity: 0.9;
}

/* Сітка з трьох карток курсів */
.courses__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

/* Базовий стиль картки курсу з фоновим зображенням */
.course-card {
  position: relative;
  min-height: 360px;
  border-radius: 20px;
  overflow: hidden;
  color: #fff;
  display: flex;
  align-items: stretch;
  background-size: cover;
  background-position: center;
}

/* Напівпрозора підкладка поверх картинки, щоб текст був читабельним */
.course-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.75),
    rgba(0, 0, 0, 0.35)
  );
}

/* Внутрішній контент картки курсу */
.course-card__inner {
  position: relative;
  padding: 24px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Заголовок курсу */
.course-card__title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  color: var(--gold-soft);
}

/* Коротка технічна інформація (формат, тривалість) */
.course-card__meta {
  font-size: 0.9rem;
  opacity: 0.9;
}

/* Короткий опис курсу */
.course-card__short {
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Кнопка запису */
.course-card__btn {
  display: inline-block;
  margin-top: 8px;
  align-self: flex-start;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--gold);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

/* Ховер-ефект на кнопці */
.course-card__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
  background: var(--gold-bright);
}

/* Спойлер з детальною програмою */
.course-card__details {
  margin-top: auto;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

/* Стиль заголовку спойлера */
.course-card__details > summary {
  list-style: none;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--gold-bright);
}

/* Прибираємо стандартний трикутник у details/summary */
.course-card__details > summary::-webkit-details-marker {
  display: none;
}

/* Маленький плюс/мінус через псевдоелемент */
.course-card__details > summary::before {
  content: "+";
  display: inline-block;
  margin-right: 8px;
  font-weight: 600;
}

.course-card__details[open] > summary::before {
  content: "−";
}

/* Контент всередині спойлера */
.course-card__details-content {
  margin-top: 10px;
  font-size: 0.9rem;
  line-height: 1.5;
}

.course-card__details-content h3,
.course-card__details-content h4 {
  font-size: 0.95rem;
  margin: 10px 0 4px;
}

.course-card__details-content ul,
.course-card__details-content ol {
  padding-left: 18px;
  margin: 4px 0 8px;
}

/* ===== ФОНОВІ ЗОБРАЖЕННЯ ДЛЯ КОЖНОГО КУРСУ ===== */

/* МК Полірування волосся 3D */
.course-card--polishing {
  background-image: url("../images/course-polishing.webp"); 
}

/* Курс Тритментологія */
.course-card--treatment {
  background-image: url("../images/course-treatment.webp");
}
/* Курс Трихологія */
.course-card--trichology {
  background-image: url("../images/course-trichology.webp");
}

/* ===== Адаптив під планшети та телефони ===== */

@media (max-width: 1024px) {
  .courses__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .courses {
    padding: 40px 0;
  }

  .courses__grid {
    grid-template-columns: 1fr;
  }

  .course-card {
    min-height: 0;
  }
}


/* ===== FAQ секція ===== */
.faq {
  padding: 60px 0;
}

.faq .section-title {
  text-align: center;
  margin-bottom: 30px;
}

/* Кожен FAQ-блок */
.faq-item {
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 12px;
  overflow: hidden;
}

/* Кнопка-питання */
.faq-toggle {
  width: 100%;
  padding: 14px 18px;
  text-align: left;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  color: inherit;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Іконка-стрілочка через псевдоелемент */
.faq-toggle::after {
  content: "▾";
  font-size: 0.9rem;
  margin-left: 10px;
  transition: transform 0.25s ease;
}

/* Панель-відповідь (спочатку схована) */
.faq-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.25s ease;
  opacity: 0;
  padding: 0 18px;
}

/* Текст відповіді */
.faq-answer {
  padding: 10px 0 16px;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Відкритий стан */
.faq-item.is-open .faq-panel {
  max-height: 400px; /* якщо відповідь буде довша — збільшиш, наприклад, до 600 */
  opacity: 1;
}

/* Поворот стрілочки при відкритті */
.faq-item.is-open .faq-toggle::after {
  transform: rotate(180deg);
}