:root{
  --red:#AD2729;
  --bg:#0F1115;
  --bg-soft:#141821;
  --text:#F3F3F3;
  --gray:#9CA3AF;
}

*{margin:0;padding:0;box-sizing:border-box;}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  line-height:1.4;
  overflow-x:hidden;
}

h1,h2,h3{
  font-family:'Cormorant Garamond',serif;
  font-weight:700;
}

.header{
  position:fixed;
  width:100%;
  padding:20px 6%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  backdrop-filter:blur(8px);
  background:rgba(15,17,21,0.8);
  z-index:1000;
}

.logo{
  height:120px;
}

.nav a{
  margin-left:22px;
  text-decoration:none;
  color:var(--gray);
  font-size:0.9rem;
  transition:0.3s;
}

.nav a:hover{
  color:var(--text);
}

.btn-outline{
  padding:10px 26px;
  border:1px solid var(--red);
  background:#000;
  color:var(--red);
  text-decoration:none;
  font-size:0.85rem;
  transition:0.3s;
  cursor:pointer;
}

.btn-outline:hover{
  background:var(--red);
  color:#fff;
}

.btn-outline{
  position:relative;
  z-index:4;
  display:inline-block;
}

.header-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.hero{
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  position:relative;
}

.hero-bg{
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0.18;
}

.hero-line{
  width:0;
  height:2px;
  background:var(--red);
  margin:20px auto;
}

.hero-sub{
  max-width:600px;
  margin:20px auto;
  color:var(--gray);
}

.method{
  height:400vh;
}

.panel{
  height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0 10%;
  position:relative;
}

.panel::before{
  content:attr(data-number);
  position:absolute;
  font-size:14rem;
  color:rgba(173,39,41,0.18);
  top:20%;
  left:5%;
  font-weight:900;
}

.section{
  padding:140px 10%;
  text-align:center;
}

.section.dark{
  background:var(--bg-soft);
}

.specialties{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:60px;
  margin-top:60px;
  text-align:center;
}

.specialties div{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.specialties h3{
  font-size:1.5rem;
  margin-bottom:18px;
  font-weight:700;
}

.specialties p{
  line-height:1.45;
}

.gallery{
  background:var(--bg-soft);
  padding:120px 0;
  overflow:hidden;
}

.gallery-track{
  display:flex;
  gap:30px;
  width:max-content;
  animation:scroll 16s linear infinite;
}

@keyframes scroll{
  from{
    transform:translateX(0);
  }
  to{
    transform:translateX(calc(-50% - 15px));
  }
}

.gallery img{
  width:260px;
  height:360px;
  object-fit:cover;
  object-position:center;
  border-radius:10px;
  flex-shrink:0;
  display:block;
}

.faq{
  max-width:800px;
  margin:auto;
}

.faq-item{
  border-bottom:1px solid rgba(255,255,255,0.08);
  padding:20px 0;
}

.faq-question{
  width:100%;
  background:none;
  border:none;
  color:var(--text);
  font-size:1rem;
  text-align:left;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
  font-weight:500;
  transition:0.3s ease;
}

.faq-question:hover{
  color:var(--red);
}

.faq-item.active .faq-question{
  color:var(--red);
}

.faq-icon{
  font-size:1.2rem;
  transition:0.3s ease;
}

.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height 0.4s ease, opacity 0.3s ease;
  opacity:0;
  color:var(--gray);
  margin-top:10px;
}

.faq-item.active .faq-answer{
  max-height:300px;
  opacity:1;
}

.faq-item.active .faq-icon{
  transform:rotate(45deg);
}

#contact{
  text-align:center;
  padding:160px 10%;
}

#contact h2{
  margin-bottom:20px;
}

#contact p{
  margin-bottom:35px;
  line-height:1.5;
}

#contact .btn-outline{
  display:inline-block;
  margin-top:10px;
}

.hero h1{
  font-family:'Cormorant Garamond', serif;
  font-weight:700;
  font-size:6rem;
  letter-spacing:5px;
  line-height:1.05;
}

@media (max-width:768px){
  .hero h1{
    font-size:3rem;
    letter-spacing:2px;
  }
}

.hero-content{
  position:relative;
  z-index:3;
}

.hero-bg{
  z-index:1;
}

.hero-watermark{
  position:absolute;
  z-index:2;
}

.hero h1{
  font-family:'Cormorant Garamond',serif;
  font-weight:700;
  letter-spacing:3px;
}

.hero-system{
  font-size:1.4rem;
  margin-top:10px;
  letter-spacing:1px;
}

.hero-sub{
  font-size:1rem;
  margin-top:8px;
  color:var(--gray);
}