*,
*::before,
*::after { box-sizing: border-box; }

:root{
  --bg:#06070b;
  --panel:rgba(10,14,24,.74);
  --line:rgba(255,255,255,.1);
  --text:#f5f7ff;
  --muted:#aab4c8;
  --cyan:#39f3ff;
  --pink:#ff4fd8;
  --violet:#8d6bff;
  --red:#ff3434;
  --shadow:0 0 30px rgba(141,107,255,.16);
  --red-glow:0 0 34px rgba(255,52,52,.24);
  --radius:24px;
  --container:1240px;
}

html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 10% 10%, rgba(255,79,216,.10), transparent 24%),
    radial-gradient(circle at 85% 15%, rgba(57,243,255,.10), transparent 28%),
    radial-gradient(circle at 50% 90%, rgba(141,107,255,.12), transparent 30%),
    radial-gradient(circle at 18% 78%, rgba(255,52,52,.12), transparent 24%),
    radial-gradient(circle at 92% 70%, rgba(255,52,52,.08), transparent 22%),
    var(--bg);
  min-height:100vh;
}
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  opacity:.08;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(circle at center, black, transparent 90%);
}
img{max-width:100%;display:block}
.container{width:min(calc(100% - 40px), var(--container)); margin-inline:auto;}

.header{
  position:sticky; top:16px; z-index:20;
  width:min(calc(100% - 40px), var(--container));
  margin:16px auto 0;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 22px;
  border:1px solid var(--line);
  background:rgba(8,12,20,.72);
  backdrop-filter:blur(18px);
  border-radius:999px;
  box-shadow:var(--shadow), 0 0 20px rgba(255,52,52,.10);
}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--text)}
.brand-mark{
  width:58px;height:52px;border-radius:16px;display:grid;place-items:center;
  font-family:Orbitron,sans-serif;font-weight:800;color:var(--bg);
  background:linear-gradient(135deg,var(--red),var(--pink),var(--cyan));
  box-shadow:0 0 22px rgba(255,52,52,.28), 0 0 22px rgba(57,243,255,.18);
}
.brand-title{font-family:Orbitron,sans-serif;letter-spacing:.18em;font-size:1.02rem}
.brand-subtitle{font-size:.84rem;color:var(--muted)}

.nav{display:flex;gap:20px;align-items:center}
.nav a,.footer a,.text-link{
  color:var(--text); text-decoration:none; transition:.25s ease;
}
.nav a:hover,.footer a:hover,.text-link:hover{
  color:var(--red); text-shadow:0 0 16px rgba(255,52,52,.45);
}
.menu-btn{
  display:none;background:transparent;border:0;color:var(--text);
  font-size:1.35rem;cursor:pointer
}

.section{padding:30px 20px}
.eyebrow{
  margin:0 0 10px;
  color:var(--cyan);
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.18em;
}
h1,h2,h3{margin:0}
h1{font-size:clamp(3rem,7vw,6rem); line-height:.95}
h2{font-size:clamp(2rem,5vw,3.7rem); line-height:1}
p{line-height:1.7}
.lead{color:var(--muted); font-size:1rem; max-width:64ch}

.hero{
  min-height:auto;
  padding:40px 0 30px;
  display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center;
}
.hero h1 span,.gradient-text{
  background:linear-gradient(90deg,var(--red),var(--pink),var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.hero-panel,.card,.feature,.cta,.price-card,.news-card,.photo-card,.service-card,.link-card,.mini-card,.booking-card,.photo-real{
  border:1px solid var(--line);
  background:var(--panel);
  backdrop-filter:blur(16px);
  box-shadow:var(--shadow);
  border-radius:var(--radius);
}
.hero-panel{padding:30px; min-height:520px; position:relative; overflow:hidden}
.hero-panel::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 25% 20%, rgba(255,79,216,.18), transparent 22%),
    radial-gradient(circle at 75% 35%, rgba(57,243,255,.12), transparent 24%),
    radial-gradient(circle at 55% 78%, rgba(255,52,52,.14), transparent 24%);
}
.orbit{
  position:absolute; inset:8%;
  border-radius:30px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:42px 42px;
}
.pill{
  position:absolute;
  padding:16px 18px;
  width:220px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  background:rgba(8,12,20,.84);
}
.pill strong{display:block; font-family:Orbitron,sans-serif; letter-spacing:.12em}
.pill p{margin:8px 0 0; color:var(--muted); font-size:.95rem}
.p1{top:13%; left:8%; box-shadow:0 0 24px rgba(57,243,255,.18)}
.p2{top:38%; right:8%; box-shadow:0 0 24px rgba(141,107,255,.22)}
.p3{left:15%; bottom:10%; box-shadow:var(--red-glow)}

.hero-actions,.btn-row{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:28px;
  margin-bottom:48px;
}
.btn{
  min-height:52px;
  padding:0 22px;
  border-radius:999px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border:1px solid rgba(255,255,255,0.16);
  background: linear-gradient(120deg,#ff3434,#ff4fd8,#8d6bff,#39f3ff,#ff3434);
  background-size: 300% 300%;
  animation: gradientMove 3s linear infinite;
  box-shadow:
    0 0 14px rgba(255,52,52,.22),
    0 0 28px rgba(255,79,216,.18),
    0 0 40px rgba(57,243,255,.14);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn::before{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:999px;
  background:rgba(10,14,24,0.28);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  z-index:-1;
}
.btn::after{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:70%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform:skewX(-20deg);
  transition:left .7s ease;
  pointer-events:none;
  z-index:-1;
}
.btn:hover{transform:translateY(-2px)}
.btn:hover::after{left:140%}
.btn:active{
  transform:scale(0.98);
  box-shadow:
    0 0 20px rgba(255,52,52,.4),
    0 0 40px rgba(255,79,216,.3),
    0 0 60px rgba(57,243,255,.2);
}

.grid-3,.grid-4,.services-grid,.photos-grid,.prices-grid,.news-grid,.link-grid,.shop-gallery,.schedule-grid{
  display:grid;gap:20px
}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card,.feature,.service-card,.price-card,.news-card,.link-card,.booking-card,.mini-card{padding:28px}
.card p,.feature p,.service-card p,.price-card p,.news-card p,.link-card p,.booking-card p,.mini-card p{color:var(--muted)}

.badge{
  display:inline-flex; padding:8px 12px; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,.04);
  font-family:Orbitron,sans-serif; font-size:.8rem; letter-spacing:.14em;
}

.feature,.service-card,.card{
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position: relative;
  overflow: hidden;
}
.feature::before,.service-card::before,.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg,#ff3434,#ff4fd8,#39f3ff);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.45;
  pointer-events:none;
  transition:opacity .25s ease;
}
.feature{
  box-shadow:
    0 0 8px rgba(255,52,52,.10),
    0 0 16px rgba(255,79,216,.08),
    0 0 24px rgba(57,243,255,.06);
}
.feature::after{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  right:-40px;
  top:-50px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,52,52,.18), transparent 68%);
}
.feature-link{display:block; text-decoration:none; color:inherit}
.feature-link .feature{height:100%}
.feature-link:hover .feature{transform:translateY(-4px)}
.feature:hover,.feature:active,.service-card:hover,.card:hover{
  transform:translateY(-4px);
  box-shadow:
    0 0 16px rgba(255,52,52,.22),
    0 0 28px rgba(255,79,216,.16),
    0 0 40px rgba(57,243,255,.12);
}
.feature:hover::before,.feature:active::before,.service-card:hover::before,.card:hover::before{opacity:1}
.feature .text-link{transition: color .25s ease, text-shadow .25s ease}
.feature:hover .text-link,.feature:active .text-link{
  color:var(--red);
  text-shadow:0 0 12px rgba(255,52,52,.35);
}

.link-grid{grid-template-columns:repeat(3,1fr)}
.link-card{
  text-decoration:none; color:var(--text);
  position:relative; overflow:hidden;
}
.link-card::before{
  content:"";
  position:absolute; inset:auto -8% -30% auto; width:160px; height:160px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,52,52,.22), transparent 70%);
}
.link-card:hover{box-shadow:0 0 28px rgba(255,52,52,.18), var(--shadow); transform:translateY(-3px); transition:.25s ease}

.service-card ul{padding-left:18px; margin:16px 0}
.service-card li{color:var(--muted); margin:6px 0}

.photos-grid{
  grid-template-columns:1.1fr 1fr 1fr;
  grid-template-rows:220px 220px;
}
.photo-card{
  position:relative; overflow:hidden; min-height:220px;
  background:
    linear-gradient(135deg, rgba(255,52,52,.16), rgba(255,79,216,.14), rgba(57,243,255,.08)),
    rgba(255,255,255,.03);
}
.photo-card::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(transparent, rgba(0,0,0,.42));
}
.photo-card span{
  position:absolute; left:20px; right:20px; bottom:20px; font-weight:700;
}
.photo-card.tall{grid-row:span 2}
.photo-card.wide{grid-column:span 2}

.shop-gallery{grid-template-columns:repeat(3,1fr)}
.photo-real{overflow:hidden}
.photo-real img{
  width:100%;
  aspect-ratio: 4 / 5;
  object-fit:cover;
}
.photo-real.wide img{aspect-ratio: 16 / 10}
.photo-caption{
  padding:14px 16px 18px;
  color:var(--muted);
  font-size:.95rem;
}
.photo-real.wide{grid-column:span 2}

.prices-grid{grid-template-columns:repeat(3,1fr)}
.price{
  display:flex; align-items:baseline; gap:8px; margin:14px 0 10px;
  font-family:Orbitron,sans-serif;
}
.price strong{font-size:2rem}
.news-grid{grid-template-columns:repeat(3,1fr)}
.news-meta{display:block; margin-bottom:10px; color:var(--red); letter-spacing:.16em; font-size:.82rem}

.footer{
  width:min(calc(100% - 40px), var(--container));
  margin:0 auto;
  display:flex; justify-content:space-between; gap:24px; padding:0 0 44px;
}
.footer p{color:var(--muted); max-width:460px}
.footer-links{display:grid; gap:12px; justify-items:end}

.reveal{opacity:0; transform:translateY(20px); transition:opacity .65s ease, transform .65s ease}
.reveal.visible{opacity:1; transform:translateY(0)}

.page-hero{padding-top:56px; display:grid; gap:20px}
.page-hero .card{padding:34px}

.subnav{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:10px;
}
.subnav a{
  text-decoration:none; color:var(--text); border:1px solid var(--line); padding:10px 14px; border-radius:999px;
  background:rgba(255,255,255,.03)
}
.subnav a:hover{color:var(--red); box-shadow:0 0 16px rgba(255,52,52,.12)}

.booking-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:20px;
}
.schedule-grid{grid-template-columns:repeat(2,1fr)}
.mini-card{min-height:118px}
.notice{
  margin-top:16px;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background:rgba(255,255,255,.03);
  color:var(--muted);
}
.cta{text-align:center; padding:44px 28px}

.quick-links{text-align:center}
.quick-links-grid{
  display:flex;
  gap:16px;
  overflow-x:auto;
  padding-bottom:10px;
}

.neon-text{
  background:linear-gradient(90deg, #ff4fd8, #39f3ff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 12px rgba(255,79,216,0.5);
}

.for-whom{
  text-align:center;
  margin:60px 0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.for-whom p{
  font-size:18px;
  color:rgba(255,255,255,0.7);
  letter-spacing:0.5px;
  transition:0.3s;
}
.for-whom p:hover{
  color:#fff;
  text-shadow:
    0 0 10px rgba(255,79,216,0.5),
    0 0 20px rgba(57,243,255,0.3);
}

.why-block812{margin:60px 0}
.why-block812 h2{margin-top:10px; margin-bottom:24px}
.why-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}
.why-card{
  position:relative;
  padding:24px;
  border-radius:24px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.why-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:24px;
  padding:1px;
  background:linear-gradient(135deg, rgba(255,52,52,.9), rgba(255,79,216,.7), rgba(57,243,255,.7));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.45;
  pointer-events:none;
}
.why-card h3{
  margin:0 0 12px;
  color:#fff;
  font-size:24px;
}
.why-card p{
  margin:0;
  color:rgba(255,255,255,0.72);
  line-height:1.7;
}
.why-card:hover{
  transform:translateY(-4px);
  box-shadow:
    0 0 16px rgba(255,52,52,.16),
    0 0 28px rgba(255,79,216,.12),
    0 0 40px rgba(57,243,255,.10);
  border-color:rgba(255,255,255,0.16);
}

.product-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}
.product-card{
  padding:20px;
  border-radius:20px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.1);
}
.product-card img{
  width:100%;
  border-radius:16px;
  margin-bottom:12px;
}

.page-transition{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:18px;
  background:
    radial-gradient(circle at center, rgba(255,87,216,.10), transparent 28%),
    rgba(5,7,12,.96);
  opacity:1;
  visibility:visible;
  transition:opacity .45s ease, visibility .45s ease;
}
.page-transition.hide{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.page-transition__logo{
  font-family:Orbitron,sans-serif;
  letter-spacing:.18em;
  font-size:clamp(2rem,7vw,4rem);
  color:#fff;
  text-shadow:
    0 0 10px rgba(255,64,64,.35),
    0 0 18px rgba(255,87,216,.28),
    0 0 26px rgba(119,240,255,.18);
}
.page-transition__bar{
  width:min(280px, 70vw);
  height:6px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
}
.page-transition__bar span{
  display:block;
  width:42%;
  height:100%;
  background:linear-gradient(90deg,#ff4040,#ff57d8,#77f0ff);
  box-shadow:
    0 0 12px rgba(255,87,216,.25),
    0 0 20px rgba(119,240,255,.20);
  animation:pageLoaderMove 1.4s ease-in-out infinite;
}
@keyframes pageLoaderMove{
  0%{transform:translateX(-110%)}
  50%{transform:translateX(115%)}
  100%{transform:translateX(-110%)}
}
@keyframes gradientMove{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

@media (max-width:1100px){
  .hero,.grid-3,.grid-4,.services-grid,.prices-grid,.news-grid,.photos-grid,.link-grid,.booking-grid,.shop-gallery,.schedule-grid{
    grid-template-columns:1fr
  }
  .photos-grid{grid-template-rows:auto}
  .photo-card.tall,.photo-card.wide,.photo-real.wide{grid-row:auto; grid-column:auto}
  .hero{min-height:auto; padding-top:40px}
}

@media (max-width:860px){
  .nav{
    display:none; position:absolute; left:0; right:0; top:calc(100% + 12px);
    flex-direction:column; padding:16px;
    border:1px solid var(--line); border-radius:24px;
    background:rgba(8,12,20,.94)
  }
  .nav.open{display:flex}
  .menu-btn{display:inline-flex}
  .header{border-radius:28px}
  .footer{flex-direction:column}
  .footer-links{justify-items:start}
  .hero{
    display:block !important;
    padding-top:8px;
  }
  h1{
    font-size:clamp(2.2rem, 12vw, 3.4rem) !important;
    line-height:.95;
    word-break:break-word;
  }
  h2{
    font-size:clamp(1.8rem, 9vw, 2.6rem) !important;
    line-height:1;
  }
  .section{
    padding:20px 16px !important;
  }
  .lead{
    font-size:.95rem !important;
    max-width:100%;
  }
}

@media (min-width:860px){
  .why-grid{
    grid-template-columns:repeat(3, 1fr);
  }
}


/* ===== FIXES FOR INDEX CONTENT BLOCKS ===== */

/* "Почему BLOCK812" — plain text, not cards */
.why-grid{
  display:block;
  gap:0;
}
.why-card{
  padding:0;
  border:none;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
  border-radius:0;
  overflow:visible;
}
.why-card::before{
  display:none;
}
.why-card + .why-card{
  margin-top:24px;
}
.why-card h3{
  margin:0 0 10px;
  font-size:1.9rem;
}
.why-card p{
  color:var(--text);
  opacity:.9;
}

/* "Краткое знакомство" — normal photo strip on desktop, horizontal scroll on phone */
.about-block812-scroll{
  overflow-x:visible;
  overflow-y:visible;
  padding-bottom:0;
}
.about-block812-track{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:20px;
  width:auto;
}
.about-photo-card{
  width:auto;
  max-width:none;
}
.about-photo-card img{
  aspect-ratio:4 / 5;
  max-height:380px;
}

@media (max-width: 860px){
  .about-block812-scroll{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    padding-bottom:10px;
  }

  .about-block812-track{
    display:flex;
    flex-wrap:nowrap;
    gap:14px;
    width:max-content;
    align-items:flex-start;
  }

  .about-photo-card{
    width:62vw;
    max-width:240px;
    flex:0 0 auto;
  }

  .about-photo-card img{
    aspect-ratio:3 / 4;
    max-height:none;
  }

  .why-card h3{
    font-size:1.6rem;
  }
}
/* ===== РАЗМЕРЫ ТЕКСТА ===== */

/* голубые надписи типа "ПОЧЕМУ BLOCK812", "СТРУКТУРА" */
.eyebrow{
  font-size:1rem;
  letter-spacing:.28em;
}

/* большие заголовки (сделать чуть меньше) */
h1{
  font-size:clamp(2.4rem, 5vw, 4.2rem);
}

h2{
  font-size:clamp(1.6rem, 3vw, 2.4rem);
}

/* подзаголовки внутри блоков (Живой вайб, Свой стиль) */
.why-card h3{
  font-size:1.6rem;
}
/* ===== РАМКИ ДЛЯ ФОТО ===== */

.gallery img{
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 0 20px rgba(255,87,216,0.18),
    0 0 30px rgba(119,240,255,0.12);
  transition:.3s;
}

.gallery img:hover{
  transform:scale(1.02);
  box-shadow:
    0 0 30px rgba(255,87,216,0.35),
    0 0 50px rgba(119,240,255,0.25);
}
.gallery-scroll{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  padding-bottom:10px;
}

.gallery-track{
  display:flex;
  gap:14px;
  width:max-content;
}

.gallery-track img{
  width:62vw;
  max-width:240px;
  aspect-ratio:3 / 4;
  object-fit:cover;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    0 0 14px rgba(255,52,52,.14),
    0 0 22px rgba(255,79,216,.12),
    0 0 30px rgba(57,243,255,.10);
  flex:0 0 auto;
}
/* ===== ГАЛЕРЕЯ ===== */

.gallery-scroll{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:14px;

  /* скрываем стандартный скролл */
  .about-block812-scroll{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  padding-bottom:10px;
}

.about-block812-track{
  display:flex;
  flex-wrap:nowrap;
  gap:14px;
  width:max-content;
  align-items:flex-start;
}

.about-photo-card{
  width:62vw;
  max-width:240px;
  flex:0 0 auto;
  border-radius:20px;
  overflow:hidden;
  position:relative;
  border:1px solid rgba(255,255,255,0.1);
}

.about-photo-card img{
  width:100%;
  aspect-ratio:3 / 4;
  object-fit:cover;
  object-position:center;
  display:block;
}



/* ===== КАРТОЧКИ ФОТО ===== */

.gallery-track img{
  width:65vw;
  max-width:260px;
  aspect-ratio:3/4;
  object-fit:cover;

  border-radius:22px;

  border:1px solid rgba(255,255,255,.08);

  box-shadow:
    0 0 12px rgba(255,64,64,.25),
    0 0 22px rgba(255,87,216,.25),
    0 0 35px rgba(119,240,255,.25);

  flex:0 0 auto;
  transition:.3s ease;
}

.gallery-track img:hover{
  transform:scale(1.04);

  box-shadow:
    0 0 20px rgba(255,64,64,.45),
    0 0 35px rgba(255,87,216,.45),
    0 0 60px rgba(119,240,255,.45);
}
/* ===== ВЕРНУТЬ СТАРУЮ ЛЕНТУ ФОТО И РАМКУ ===== */

.about-block812-scroll{
  width:100% !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  padding-bottom:10px !important;
}

.about-block812-track{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:14px !important;
  width:max-content !important;
  align-items:flex-start !important;
}

.about-photo-card{
  flex:0 0 auto;
  height:320px;
  width:auto;
  padding:1px;
  border-radius:20px;
  background:linear-gradient(135deg,#ff3434,#ff4fd8,#39f3ff);
  box-shadow:
    0 0 14px rgba(255,52,52,.18),
    0 0 24px rgba(255,79,216,.16),
    0 0 34px rgba(57,243,255,.14);
  overflow:hidden;
}
  .about-photo-card img{
  display:block;
  width:auto;
  height:100%;
  object-fit:contain;
  border-radius:19px;
  background:#0b0f1a;
}

/* НЕОНОВАЯ РАМКА КАК РАНЬШЕ */

.about-photo-card{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  background:#0b0f1a;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 0 18px rgba(255,80,200,0.25),
    0 0 28px rgba(80,200,255,0.2);
}

.about-photo-card img{
  width:100%;
  height:auto;
  aspect-ratio:3 / 4;
  object-fit:cover;
  object-position:center;
  display:block;
  border-radius:20px;
}

/* мягкое неоновое свечение */



@media (min-width: 861px){
  .about-photo-card{
    width:240px !important;
    max-width:240px !important;
  }
}
.news-card a {
  color: #8b5cf6;
  text-decoration: none;
  font-weight: 500;
}

.news-card a:hover {
  color: #ec4899;
  text-shadow: 0 0 10px rgba(236, 72, 153, 0.8);
}
.cta {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
  padding: 40px;
  border-radius: 20px;
  background: rgba(255,255,255,0.03);
  box-shadow: 0 0 30px rgba(255, 0, 150, 0.1);
}
.news-card a,
.footer a,
.cta a,
.card a,
a {
  color: #b86cff;
  text-decoration: none;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

.news-card a:hover,
.footer a:hover,
.cta a:hover,
.card a:hover,
a:hover {
  color: #ff4fd8;
  text-shadow: 0 0 10px rgba(255, 79, 216, 0.8),
               0 0 18px rgba(184, 108, 255, 0.55);
}
.cta,
.cta-final {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.cta {
  padding: 42px 28px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: 0 0 24px rgba(124, 58, 237, 0.15);
}

.cta h2,
.cta-final h2 {
  margin: 10px 0 16px;
}

.cta .lead,
.cta-final .lead {
  max-width: 620px;
  margin: 0 auto;
}

.contact-list {
  margin-top: 22px;
  display: grid;
  gap: 10px;
  justify-items: center;
}

.neon-text {
  color: #ff4fd8;
  text-shadow:
    0 0 8px rgba(255, 79, 216, 0.8),
    0 0 18px rgba(184, 108, 255, 0.6);
}
.gallery-slider {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
}

.gallery-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 8px 4px 12px;
  scrollbar-width: none;
  width: 100%;
}

.gallery-track::-webkit-scrollbar {
  display: none;
}

.gallery-slide {
  min-width: 320px;
  max-width: 320px;
  flex: 0 0 320px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  box-shadow: 0 0 24px rgba(141, 107, 255, 0.12);
}

.gallery-slide img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}

.gallery-btn {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  transition: 0.25s ease;
}

.gallery-btn:hover {
  color: #ff4fd8;
  box-shadow: 0 0 16px rgba(255, 79, 216, 0.4);
}

max-width: 768px {
  .gallery-btn {
    display: none;
  }

  .gallery-slide {
    min-width: 78vw;
    max-width: 78vw;
    flex: 0 0 78vw;
  }

  .gallery-slide img {
    height: 360px;
  }
}
.about-block812-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 12px 0 18px;
}

.about-block812-scroll::-webkit-scrollbar {
  display: none;
}

.about-block812-track {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  width: max-content;
  padding: 10px 6px;
}

.about-photo-card {
  flex: 0 0 auto;
  width: 250px;
  height: 340px;
  border-radius: 24px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 22px rgba(141, 107, 255, 0.14);
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

.about-photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

min-width: 1024px {
  .about-block812-scroll {
    mask-image: linear-gradient(to right, transparent, black 7%, black 93%, transparent);
  }

  .about-photo-card {
    opacity: 0.78;
    transform: scale(0.94);
  }

  .about-photo-card:hover {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 30px rgba(255, 79, 216, 0.18);
  }

  .about-block812-track .about-photo-card:nth-child(2),
  .about-block812-track .about-photo-card:nth-child(3),
  .about-block812-track .about-photo-card:nth-child(4) {
    width: 310px;
    height: 430px;
    opacity: 1;
    transform: scale(1);
  }
}

max-width: 768px {
  .about-block812-track {
    gap: 14px;
  }

  .about-photo-card {
    width: 74vw;
    height: 96vw;
    max-height: 430px;
    border-radius: 22px;
    opacity: 1;
    transform: none;
  }
}
.news-card a,
.about-photo-card a,
.footer a,
.cta a {
  color: #b86cff;
  text-decoration: none;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

.news-card a:hover,
.about-photo-card a:hover,
.footer a:hover,
.cta a:hover {
  color: #ff4fd8;
  text-shadow:
    0 0 10px rgba(255, 79, 216, 0.8),
    0 0 18px rgba(184, 108, 255, 0.55);
}
.cta,
.cta-final {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.cta .lead,
.cta-final .lead {
  max-width: 620px;
  margin: 0 auto;
}

.contact-list {
  margin-top: 22px;
  display: grid;
  gap: 10px;
  justify-items: center;
}
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 79, 216, 0.18), transparent 30%),
    radial-gradient(circle at 80% 30%, rgba(114, 230, 255, 0.18), transparent 30%),
    linear-gradient(135deg, #090c16 0%, #0d1220 55%, #101829 100%);
  transition: opacity 0.45s ease, visibility 0.45s ease;
  opacity: 1;
  visibility: visible;
}

.page-transition.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.page-transition__logo {
  font-family: Orbitron, Inter, sans-serif;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: #fff;
  text-shadow:
    0 0 10px rgba(255,255,255,0.35),
    0 0 20px rgba(255,79,216,0.25),
    0 0 30px rgba(114,230,255,0.2);
}

.page-transition__bar {
  width: 220px;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    0 0 18px rgba(114,230,255,0.1);
}

.page-transition__bar span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff4d6d 0%, #ff4fd8 50%, #72e6ff 100%);
  animation: pageLoading 1.2s ease-in-out infinite;
  transform-origin: left center;
}

@keyframes pageLoading {
  0% {
    transform: scaleX(0.15);
    opacity: 0.7;
  }
  50% {
    transform: scaleX(1);
    opacity: 1;
  }
  100% {
    transform: scaleX(0.15);
    opacity: 0.7;
  }
}