/* ===========================
   Base
=========================== */
:root{
  --bg:#0b0b0b;
  --bg2:#050505;
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.08);
  --line:rgba(255,255,255,.12);
  --line2:rgba(255,255,255,.18);
  --text:#ffffff;
  --muted:rgba(255,255,255,.78);
  --muted2:rgba(255,255,255,.62);
  --accent:#dc143c;
  --shadow: 0 12px 40px rgba(0,0,0,.45);
  --radius:16px;
  --radius2:12px;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family:"Oswald", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }
p{ margin:0; }

.wrapper{
  width:min(1200px, 92vw);
  margin:0 auto;
}

.accent{ color:var(--accent); }

hr{ border:none; border-top:1px solid var(--line); margin:0; }

/* ===========================
   HERO / CONTENT
=========================== */
.content{
  min-height: 78vh;
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(220,20,60,.25), transparent 60%),
    radial-gradient(900px 500px at 90% 20%, rgba(120,80,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.85));
}

.content-filter{
  padding: 0 0 36px;
}

.content-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px 0;
}

/* Logo placeholder (если есть картинка — поставишь background-image) */
.content-header__logo{
  display:block;
  width:160px;
  height:46px;
  border-radius: 12px;
  background: var(--card);
  border:1px solid var(--line);
  box-shadow: var(--shadow);
}

/* Desktop menu */
.content-header__nav{ flex: 1; display:flex; justify-content:center; }

.content-header__menu{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;
}

.content-header__item{ margin:0; padding:0; }

.content-header__link{
  font-size:16px;
  letter-spacing:.04em;
  opacity:.92;
  transition: opacity .15s ease, color .15s ease, background .15s ease, border-color .15s ease;
  padding:8px 10px;
  border-radius: 10px;
}
.content-header__link:hover{
  opacity:1;
  color:var(--accent);
  background: rgba(255,255,255,.04);
}

/* Social */
.content-header__social{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  gap:12px;
}

.content-header__link.tel,
.content-header__link.wa,
.content-header__link.tg,
.content-header__link.vk{
  width:36px;
  height:36px;
  display:inline-block;
  border-radius: 12px;
  background: var(--card);
  border:1px solid var(--line);
  box-shadow: var(--shadow);
}
.content-header__link.tel:hover,
.content-header__link.wa:hover,
.content-header__link.tg:hover,
.content-header__link.vk:hover{
  border-color: rgba(220,20,60,.55);
  background: rgba(220,20,60,.12);
}

/* Contacts line */
.content-main__contacts{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  padding: 10px 0 18px;
  color:var(--muted);
}
.content-main__contacts.tel p,
.content-main__contacts.adress p{ margin:0; }

.phone-number{
  color:var(--accent);
  text-decoration:none;
}

/* Titles */
.content-main__main{ padding: 18px 0 8px; }

.content-main__main_title h1{
  margin:0 0 10px;
  font-size: clamp(28px, 4.2vw, 56px);
  line-height:1.05;
  letter-spacing:.02em;
}

.content-main__main_title_text h2{
  margin:0 0 18px;
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight:400;
  color:var(--muted);
  line-height:1.25;
}

/* Buttons */
.buttons{ display:flex; gap:12px; flex-wrap:wrap; }

.btn-svyaz,
.btn-podrobnee,
.grid-models-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:48px;
  padding:0 18px;
  border-radius: 12px;
  font-size:18px;
  letter-spacing:.04em;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  cursor:pointer;
}

.btn-svyaz{
  background: rgba(220,20,60,.18);
  border-color: rgba(220,20,60,.45);
}
.btn-svyaz:hover{ background: rgba(220,20,60,.28); }

.btn-podrobnee:hover,
.grid-models-btn:hover{
  border-color: rgba(255,255,255,.25);
  background: rgba(255,255,255,.09);
}

/* ===========================
   Mobile menu (hamburger)
=========================== */
.hamburger-menu{ display:none; position:relative; }

#menu__toggle{ opacity:0; position:absolute; }

.menu__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius: 12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  cursor:pointer;
  box-shadow: var(--shadow);
}
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after{
  display:block;
  width:22px;
  height:2px;
  background: #fff;
  content:"";
  position:relative;
}
.menu__btn > span::before{ position:absolute; top:-7px; left:0; }
.menu__btn > span::after{ position:absolute; top:7px; left:0; }

.menu__box{
  list-style:none;
  margin:0;
  padding: 70px 18px 18px;
  position:fixed;
  top:0;
  right:-100%;
  width:min(340px, 88vw);
  height:100vh;
  background:#070707;
  border-left:1px solid var(--line);
  transition:right .2s ease;
  z-index: 9999;
}
.menu__box_logo{
  display:block;
  height:44px;
  border-radius: 12px;
  background: var(--card);
  border:1px solid var(--line);
  margin-bottom:14px;
}
.menu__item{
  display:block;
  padding:10px 10px;
  border-radius: 12px;
  color:var(--muted);
  font-size:18px;
}
.menu__item:hover{
  background: rgba(255,255,255,.06);
  color:#fff;
}
#menu__toggle:checked ~ .menu__box{ right:0; }

/* ===========================
   FEATURES GRID (tables)
=========================== */
.tables{
  padding: 34px 0;
  background: var(--bg2);
}

.grid{
  width:min(1200px, 92vw);
  margin:0 auto;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}

.grid-item,
.grid-item-1,
.grid-item-2,
.grid-item-3,
.grid-item-4,
.grid-item-5{
  min-height: 120px;
}

.bg-green,
.bg-black,
.bg-purple,
.bg-green-o,
.bg-black-o,
.bg-purple-o{
  height:100%;
  border-radius: var(--radius);
  border:1px solid var(--line);
  background: rgba(255,255,255,.05);
  padding: 14px 14px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  box-shadow: var(--shadow);
}

.bg-green{ background: rgba(0,255,140,.06); }
.bg-black{ background: rgba(255,255,255,.04); }
.bg-purple{ background: rgba(140,90,255,.08); }
.bg-green-o{ background: rgba(0,255,140,.04); }
.bg-black-o{ background: rgba(255,255,255,.03); }
.bg-purple-o{ background: rgba(140,90,255,.05); }

.grid-title p{
  font-size:22px;
  letter-spacing:.04em;
  margin:0;
}
.grid-title-2 p{
  margin:0;
  color:var(--muted);
  font-size:18px;
  line-height:1.25;
}

/* ===========================
   Sections headings
=========================== */
.section_head{
  padding: 46px 0 20px;
}

.section_title span{
  font-size: 34px;
  letter-spacing:.05em;
}

.section_title_second span{
  display:block;
  margin-top:8px;
  color:var(--muted);
  font-size: 20px;
  letter-spacing:.03em;
  line-height:1.25;
}

.section_title_text span{
  display:block;
  margin-top:12px;
  color:var(--muted);
  font-size: 18px;
  line-height: 1.45;
}

.section_title_text_bottom{
  margin-top:14px;
  color:var(--muted);
  font-size:18px;
  line-height:1.45;
}

/* ===========================
   MODELS
=========================== */
.models{
  background:
    radial-gradient(900px 500px at 20% 20%, rgba(220,20,60,.12), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.85));
}
.models-filter{ padding: 8px 0 44px; }

.grid-models{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
  padding-bottom: 24px;
}

.grid-models-item-1,
.grid-models-item-2,
.grid-models-item-3,
.grid-models-item-4{
  min-height: 420px;
}

.bg-photo-model-1,
.bg-photo-model-2,
.bg-photo-model-3,
.bg-photo-model-4{
  height:100%;
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.78));
  box-shadow: var(--shadow);
  position:relative;
}

/* Если добавишь фотки — просто раскомментируй и укажи путь:
.bg-photo-model-1{ background-image:url("/Image/Models/1.jpg"); background-size:cover; background-position:center; }
... */

.bg-photo-model-1-filter,
.bg-photo-model-2-filter,
.bg-photo-model-3-filter,
.bg-photo-model-4-filter{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:16px;
  gap:8px;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.88));
}

.grid-models-name{
  font-size:26px;
  letter-spacing:.04em;
}
.grid-models-parametr{
  color:var(--muted);
  font-size:18px;
}

/* ===========================
   PROGRAMS (контейнер)
=========================== */
.programs{
  background: var(--bg2);
}
.programs-filter{ padding-bottom: 34px; }
.list_programs{
  margin-top: 22px;
  padding: 16px;
  border-radius: var(--radius);
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
}

/* ===========================
   ADVANTAGES
=========================== */
.advanteges{
  padding-bottom: 40px;
  background:
    radial-gradient(900px 500px at 80% 30%, rgba(140,90,255,.12), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.9));
}

.advantages-content{ padding-bottom: 20px; }

.advantages-shapes{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
  margin-top: 18px;
}

.advantages-shapes_1,
.advantages-shapes_2,
.advantages-shapes_3,
.advantages-shapes_4{
  border-radius: var(--radius);
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  padding: 16px;
  box-shadow: var(--shadow);
}

.advantages-shape{
  width:56px;
  height:56px;
  border-radius: 16px;
  border:1px solid var(--line);
  background: rgba(220,20,60,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom: 10px;
}

/* Иконки-заглушки */
.advantages-icon_1,
.advantages-icon_2,
.advantages-icon_3,
.advantages-icon_4{
  width:22px;
  height:22px;
  border-radius: 8px;
  background: rgba(255,255,255,.7);
}

.advantages-title p{
  font-size:20px;
  letter-spacing:.04em;
  margin:0 0 8px;
}
.advantages-text p{
  margin:0;
  color:var(--muted);
  font-size:17px;
  line-height:1.35;
}

/* ===========================
   SALON / GALLERY
=========================== */
.salon{
  background: var(--bg2);
  padding-bottom: 40px;
}

.section_gallery{ padding: 10px 0 20px; }
.gallery_list{
  width:min(1200px, 92vw);
  margin:0 auto;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:12px;
}

.gallery_item{
  position:relative;
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
}
.gallery_item img{ width:100%; height: 210px; object-fit: cover; }

.gallery_item_hover{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition: opacity .18s ease;
  background: rgba(0,0,0,.55);
  font-size:18px;
  letter-spacing:.04em;
}
.gallery_item:hover .gallery_item_hover{ opacity:1; }

/* ===========================
   ABOUT
=========================== */
.about{
  background:
    radial-gradient(900px 500px at 15% 35%, rgba(220,20,60,.12), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.92));
}
.about-filter{ padding-bottom: 40px; }

.about_salon{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
  margin-top: 18px;
}

.about_salon_table{
  border-radius: var(--radius);
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  padding: 16px;
  box-shadow: var(--shadow);
}

.about_salon_top{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom: 10px;
}

.about_salon_left_icon,
.about_salon_center_icon,
.about_salon_right_icon{
  width:52px;
  height:52px;
  border-radius: 16px;
  border:1px solid var(--line);
  background: rgba(140,90,255,.10);
}

.about_salon_title span{
  font-size:20px;
  letter-spacing:.04em;
}
.about_salon_bottom span{
  color:var(--muted);
  font-size:17px;
  line-height:1.35;
}

/* ===========================
   MAP
=========================== */
.map{
  background: var(--bg2);
}
.map iframe{
  border:0;
  display:block;
}

/* ===========================
   FOOTER CONTACTS + FORM
=========================== */
.podval{
  padding: 44px 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,.95));
}

.block{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
}

.contacts,
.svayz{
  border-radius: var(--radius);
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  padding: 16px;
  box-shadow: var(--shadow);
}

.adress-text span,
.svayz-text span{
  font-size:22px;
  letter-spacing:.04em;
}

.line, .line-long{ margin: 10px 0 16px; }

.karta,
.number,
.vk,
.mail{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding: 10px 0;
  border-top:1px dashed rgba(255,255,255,.12);
}
.karta{ border-top:none; }

.karta-icon,
.vk-icon,
.mail-icon{
  width:40px;
  height:40px;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border:1px solid var(--line);
  flex: 0 0 auto;
}
.number-icons{
  display:flex;
  gap:8px;
  padding-top: 2px;
  flex: 0 0 auto;
}
.number-icons-tlf,
.number-icons-wa,
.number-icons-tg{
  width:40px;
  height:40px;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border:1px solid var(--line);
}
.number-icons-tlf:hover,
.number-icons-wa:hover,
.number-icons-tg:hover{
  background: rgba(220,20,60,.12);
  border-color: rgba(220,20,60,.55);
}

.karta-text span,
.vk-text span,
.mail-text span,
.number-text span{
  color:var(--muted);
  font-size:17px;
  line-height:1.35;
}

.number-text a{ color:var(--accent); }

/* Form */
.form{ margin-top: 10px; }
.form_body{ display:block; }

.form_top{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

.form_item{ margin-bottom: 12px; }

.form_input,
.form_2_input,
.select{
  width:100%;
  height:46px;
  border-radius: 12px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.35);
  color: var(--text);
  padding: 10px 12px;
  font-family: inherit;
  font-size: 16px;
  outline:none;
}

textarea.form_input,
textarea.form_2_input{
  min-height: 104px;
  height:auto;
  resize: vertical;
  padding-top: 10px;
}

.form_input:focus,
.form_2_input:focus,
.select:focus{
  border-color: rgba(220,20,60,.6);
  box-shadow: 0 0 0 3px rgba(220,20,60,.18);
}

.form_button,
.form_2_button{
  width: 100%;
  height: 48px;
  border-radius: 12px;
  border:1px solid rgba(220,20,60,.45);
  background: rgba(220,20,60,.18);
  color: var(--text);
  font-size: 18px;
  letter-spacing:.04em;
  cursor:pointer;
}
.form_button:hover,
.form_2_button:hover{
  background: rgba(220,20,60,.28);
}

/* Checkbox */
.checkbox,
.checkbox_2{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.checkbox_input,
.checkbox_2_input{
  margin-top: 3px;
  width:18px;
  height:18px;
}

.checkbox_label span,
.checkbox_2_label span{
  display:block;
  color:var(--muted2);
  font-size: 14px;
  line-height:1.3;
}
.checkbox_label a,
.checkbox_2_label a{
  color: var(--accent);
}

/* Alerts placeholders */
.alert,
.alert-success,
.alert-success_2{
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 12px;
  border:1px solid var(--line);
  background: rgba(0,255,140,.08);
  color: #d9ffe9;
}

/* ===========================
   RULES
=========================== */
.pravila{
  padding: 44px 0;
  background: var(--bg2);
}

.pravila_content{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:14px;
  align-items:start;
  margin-top: 12px;
}

.pravila_logo{
  height: 100%;
  min-height: 260px;
  border-radius: var(--radius);
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
}

.pravila_left,
.pravila_right{
  border-radius: var(--radius);
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  padding: 14px;
  box-shadow: var(--shadow);
}

.pravila_line{ margin: 6px 0 12px; }

.pravila_text{
  margin:0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.35;
}
.pravila_text li{ margin: 10px 0; }

/* ===========================
   POPUP
=========================== */
.popup{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding: 18px;
  background: rgba(0,0,0,.72);
  z-index: 10000;
}

.popup:target{ display:flex; }

.popup__body{
  width:min(680px, 94vw);
  border-radius: var(--radius);
  border:1px solid var(--line);
  background: rgba(10,10,10,.98);
  box-shadow: var(--shadow);
}

.popup__content{
  position:relative;
  padding: 16px;
}

.popup__close{
  position:absolute;
  top:12px;
  right:12px;
  width:40px;
  height:40px;
  border-radius: 12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:center;
}
.popup__close:hover{
  border-color: rgba(220,20,60,.55);
  background: rgba(220,20,60,.12);
}

.form_zakaz{ margin-top: 40px; }
.form_2_body{ display:block; }
.form_2_item{ margin-bottom: 12px; }
.form_2_label{
  color: var(--muted);
  font-size: 16px;
  margin-bottom: 6px;
}

/* ===========================
   FOOTER
=========================== */
footer{
  background: #000;
  padding: 18px 0;
  border-top:1px solid var(--line);
}
.footer-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.footer-malina span{
  color: var(--muted2);
  font-size: 14px;
}
.footer-privacy a{
  color: var(--accent);
  font-size: 14px;
}

/* ===========================
   Responsive
=========================== */
@media (max-width: 1100px){
  .grid-models{ grid-template-columns: repeat(2, 1fr); }
  .advantages-shapes{ grid-template-columns: repeat(2, 1fr); }
  .gallery_list{ grid-template-columns: repeat(2, 1fr); }
  .about_salon{ grid-template-columns: 1fr; }
  .pravila_content{ grid-template-columns: 1fr; }
  .pravila_logo{ min-height: 180px; }
}

@media (max-width: 980px){
  .content-header__nav{ display:none; }
  .hamburger-menu{ display:block; }
  .grid{ grid-template-columns: 1fr; }
  .block{ grid-template-columns: 1fr; }
}

@media (max-width: 520px){
  .content-header{ gap:10px; }
  .content-header__logo{ width:140px; height:44px; }
  .content-header__social{ gap:10px; }
  .buttons{ flex-direction:column; }
  .btn-svyaz, .btn-podrobnee{ width:100%; }
  .form_top{ grid-template-columns: 1fr; }
  .gallery_item img{ height: 190px; }
}