:root{
  --topbar-offset: 68px; /* высота шапки для мобильного меню */

  --bg:#06070b;
  --panel:#0c0f18;
  --panel2:#0a0c13;
  --text:#e7f7ff;
  --muted:#a7c7d6;
  --line: rgba(255,255,255,.08);
  --cyan:#00e5ff;
  --blue:#2d7dff;
  --grad: linear-gradient(90deg, #00e5ff 0%, #2d7dff 60%, #00e5ff 120%);
  --shadow: 0 10px 30px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html,body{
  overflow-x:hidden;height:100%}
body{
  overflow-x:hidden;
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
    background: radial-gradient(1200px 800px at 20% 10%, rgba(0,229,255,.12), transparent 55%),
              radial-gradient(900px 600px at 80% 20%, rgba(45,125,255,.10), transparent 55%),
              var(--bg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  color:var(--text);
}

.bg-glow{
  position:fixed;
  inset:-120px;
  background: radial-gradient(700px 400px at 50% 0%, rgba(0,229,255,.08), transparent 60%),
              radial-gradient(700px 400px at 50% 100%, rgba(45,125,255,.06), transparent 60%);
  filter: blur(8px);
  pointer-events:none;
  z-index:-1;
}

a{color:inherit; text-decoration:none}
a:hover{opacity:.92}

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

.topbar{
  position:sticky; top:0; z-index:90;
  backdrop-filter: blur(10px);
  background: rgba(6,7,11,.65);
  border-bottom:1px solid var(--line);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:14px;
}
.brand{display:flex; align-items:center; gap:10px}
.brand__logo{
  width:34px; height:34px; border-radius:10px;
  border:1px solid rgba(0,229,255,.25);
  box-shadow: 0 0 0 4px rgba(0,229,255,.06);
}
.brand__name{
  font-weight:800; letter-spacing:.6px;
  background: var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.nav{display:flex; gap:16px; align-items:center; flex-wrap:wrap; justify-content:center}
.nav a{color:var(--muted); font-weight:600; font-size:14px}
.nav a:hover{color:var(--text)}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--text);
  font-weight:700;
}
.btn--primary{
  border-color: rgba(0,229,255,.35);
  background: linear-gradient(180deg, rgba(0,229,255,.18), rgba(45,125,255,.12));
  box-shadow: 0 10px 30px rgba(0,229,255,.08);
}
.btn--ghost{
  background: rgba(255,255,255,.02);
}
.btn:hover{transform: translateY(-1px); transition:.15s}

.hero{
  margin:26px 0 18px;
  padding:26px;
  border:1px solid var(--line);
  border-radius:22px;
  background: linear-gradient(180deg, rgba(12,15,24,.80), rgba(10,12,19,.65));
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}
.hero:before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(600px 300px at 10% 20%, rgba(0,229,255,.14), transparent 60%),
              radial-gradient(560px 280px at 90% 30%, rgba(45,125,255,.12), transparent 60%);
  pointer-events:none;
}
.hero__grid{
  position:relative;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
}
@media (max-width: 880px){
  .hero__grid{grid-template-columns: 1fr}
  .nav{display:none}
}
.h1{
  font-size:44px; line-height:1.05; margin:0 0 10px;
  letter-spacing:-.5px;
}
.sub{
  color:var(--muted);
  font-size:16px;
  margin:0 0 18px;
}
.hero__card{
  border:1px solid rgba(0,229,255,.22);
  border-radius:20px;
  padding:16px;
  background: rgba(6,7,11,.35);
}
.badge{
  display:inline-flex; gap:8px; align-items:center;
  padding:8px 10px;
  border:1px solid rgba(0,229,255,.22);
  border-radius:999px;
  background: rgba(0,229,255,.07);
  color: var(--text);
  font-weight:700;
  font-size:13px;
}
.kv{display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top:14px}
.kv .item{
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px;
  background: rgba(255,255,255,.02);
}
.kv .k{color:var(--muted); font-size:12px}
.kv .v{font-weight:800; margin-top:4px}

.section{
  margin:18px 0;
  padding:22px;
  border:1px solid var(--line);
  border-radius:22px;
  background: rgba(12,15,24,.55);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.section h2{margin:0 0 10px; font-size:22px}
.section p{margin:0; color:var(--muted); line-height:1.65}

.grid{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
@media (max-width: 980px){ .grid{grid-template-columns: 1fr} }

.card{
  border:1px solid var(--line);
  border-radius:20px;
  padding:14px;
  background: rgba(255,255,255,.02);
}
.card h3{margin:0 0 6px; font-size:16px}
.card .meta{color:var(--muted); font-size:13px; line-height:1.5}

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:18px;
  background: rgba(255,255,255,.02);
}
.table th,.table td{
  padding:12px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
  text-align:left;
  font-size:14px;
}
.table th{color:var(--muted); font-weight:800; background: rgba(0,229,255,.06)}
.table tr:last-child td{border-bottom:none}

.form{
  display:grid; gap:10px; max-width:520px;
}
.input{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(6,7,11,.55);
  color: var(--text);
  outline:none;
}
.input:focus{border-color: rgba(0,229,255,.4); box-shadow: 0 0 0 4px rgba(0,229,255,.08)}
label{color:var(--muted); font-size:13px; font-weight:700}
.help{color:var(--muted); font-size:13px}
.alert{
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(0,229,255,.22);
  background: rgba(0,229,255,.06);
  color:var(--text);
}
.alert--err{
  border-color: rgba(255,90,90,.35);
  background: rgba(255,90,90,.08);
}
/* Hover highlights for all "card-like" blocks */
.card, .kv .item, .hero__card{
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.card:hover, .kv .item:hover, .hero__card:hover{
  border-color: rgba(0,229,255,.55);
  box-shadow: 0 0 0 4px rgba(0,229,255,.10), 0 16px 40px rgba(0,0,0,.45);
  transform: translateY(-1px);
}

/* Table row hover */
.table tbody tr:hover td{
  background: rgba(0,229,255,.05);
}

/* Gallery placeholders */
.gallery{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
  margin-top:14px;
}
@media (max-width: 980px){ .gallery{grid-template-columns: 1fr 1fr} }
@media (max-width: 520px){ .gallery{grid-template-columns: 1fr} }

.photo{
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  background: rgba(255,255,255,.02);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.photo:hover{
  border-color: rgba(0,229,255,.55);
  box-shadow: 0 0 0 4px rgba(0,229,255,.10), 0 16px 40px rgba(0,0,0,.45);
  transform: translateY(-1px);
}
.photo__img{
  height:170px;
  background:
    radial-gradient(600px 250px at 20% 20%, rgba(0,229,255,.18), transparent 60%),
    radial-gradient(500px 220px at 80% 40%, rgba(45,125,255,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.15));
}
.photo__cap{
  padding:12px 14px;
  color: var(--muted);
  font-size:13px;
  border-top:1px solid rgba(255,255,255,.06);
}

/* Mobile nav toggle (CSS-only) */
.nav-toggle{display:none}
.nav-btn{
  display:none;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--text);
  border-radius:14px;
  padding:10px 12px;
  font-weight:800;
  cursor:pointer;
}
@media (max-width: 880px){
  .nav{display:none; flex-direction:column; gap:10px; padding:12px; border:1px solid var(--line); border-radius:18px; background: rgba(6,7,11,.65)}
  .nav-btn{display:inline-flex}
  .topbar__inner{align-items:flex-start}
  .nav-toggle:checked ~ .nav{display:flex}
}

/* Fix hero title overflow */
.h1{word-break:break-word}

/* Remove table horizontal scroll on mobile */
@media (max-width: 680px){
  .table th:nth-child(4),
  .table td:nth-child(4){
    display:none;
  }
}

/* Main page photo slider (mobile only) */
@media (max-width: 680px){
  #photos .gallery{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:12px;
  }
  #photos .photo{
    min-width:80%;
    flex:0 0 auto;
    scroll-snap-align:center;
  }
}


/* Hero actions on one row (mobile) */
.hero-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
@media (max-width: 520px){
  .hero-actions{flex-wrap:nowrap}
  .hero-actions .btn{flex:1; white-space:nowrap; padding-left:10px; padding-right:10px}
}

/* Hide the right hero card on mobile (Коротко о клубе) */
@media (max-width: 880px){
  .hero__card{display:none}
}

/* Brand title wrapping fixes */
.brand__name{
  white-space:nowrap;
}
@media (max-width: 520px){
  .h1{font-size:36px}
  .hero .h1 .smallline{display:block; font-size:16px; letter-spacing:0; color:var(--muted); font-weight:800; margin-bottom:6px}
}


/* Symmetric mobile gutters */
@media (max-width: 520px){
  .container{width: calc(100vw - 24px);} /* 12px left/right */
  .hero{padding:18px;}
}

/* KV links (address/phone) without underline */
.kv a{color:inherit; text-decoration:none}
.kv a:hover{opacity:.92}

}


/* Mobile hero title adjustments */
@media (max-width: 520px){
  .smallline{
    font-size:22px !important;
    color:#ffffff !important;
    white-space:nowrap;
    font-weight:800;
  }
}


/* Pricing table styling */
.pricing-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.pricing-title{
  font-size:22px;
  font-weight:900;
  letter-spacing:-.2px;
}
.pricing-sub{
  color:var(--muted);
  font-size:13px;
  font-weight:700;
}
.pricing-wrap{
  border:1px solid rgba(0,229,255,.18);
  border-radius:20px;
  overflow:hidden; /* keeps rounded corners for the table */
  background: rgba(6,7,11,.35);
}
.table--pricing{
  border:none;
  border-radius:0;
  background: transparent;
}
.table--pricing th{
  background: linear-gradient(180deg, rgba(0,229,255,.10), rgba(45,125,255,.06));
  color: var(--text);
}
.table--pricing td{
  vertical-align:top;
}
.table--pricing td:nth-child(3){
  font-weight:900;
}
@media (max-width: 680px){
  .pricing-title{font-size:20px}
}


/* Footer smaller on mobile */
@media (max-width: 520px){
  .footer__brand{font-size:14px}
  }

/* Pricing table: full width inside section (no extra wrappers) */
.table--pricing{
  width:100%;
  border-radius:18px;
  overflow:hidden;
}
.table--pricing th{
  background: linear-gradient(180deg, rgba(0,229,255,.10), rgba(45,125,255,.06));
  color: var(--text);
}
.table--pricing td:nth-child(3){font-weight:900}


/* Pricing cards */
.price-grid{grid-template-columns: repeat(4, 1fr);}
@media (max-width: 980px){ .price-grid{grid-template-columns: 1fr 1fr;} }
@media (max-width: 520px){ .price-grid{grid-template-columns: 1fr;} }

.price-card{
  border-color: rgba(0,229,255,.18);
  background: linear-gradient(180deg, rgba(6,7,11,.25), rgba(255,255,255,.02));
}
.price-card__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.price-card__name{
  margin:0;
  font-size:16px;
  font-weight:900;
}
.price-card__price{
  font-weight:900;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(0,229,255,.25);
  background: rgba(0,229,255,.06);
  white-space:nowrap;
}

/* Footer tighter line spacing */
.footer__brand{line-height:1.1}
/* Desktop vs Mobile navigation */
.nav--desktop{display:flex}
.hamburger, .drawer, .drawer-overlay, .drawer-toggle{display:none}

@media (max-width: 880px){
  .nav--desktop{display:none}
  .hamburger{display:inline-flex}
  .drawer-toggle{display:none}

  .hamburger{
    width:44px; height:44px;
    align-items:center; justify-content:center;
    border:1px solid var(--line);
    background: rgba(255,255,255,.03);
    border-radius:14px;
    cursor:pointer;
  }
  .hamburger span{
    display:block; width:18px; height:2px; background: rgba(231,247,255,.9);
    margin:2px 0; border-radius:99px;
  }

  .drawer-overlay{
    display:block;
    position:fixed; inset:0;
    background: rgba(0,0,0,.55);
    opacity:0; pointer-events:none;
    transition: opacity .2s ease;
    z-index:60;
  }
  .drawer{
    display:block;
    position:fixed;
    top:0; left:0;
    height:100vh;
    width:min(92vw, 360px);
    background: rgba(6,7,11,.92);
    border-right:1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(10px);
    transform: translateX(-105%);
    transition: transform .22s ease;
    z-index:61;
    padding:14px;
    display:flex;
    flex-direction:column;
  }
  .drawer__top{
    display:flex; align-items:center; justify-content:space-between;
    padding:6px 6px 10px;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .drawer__title{
    font-weight:900;
    background: var(--grad);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    letter-spacing:.4px;
  }
  .drawer__close{
    width:40px; height:40px;
    display:inline-flex; align-items:center; justify-content:center;
    border:1px solid var(--line);
    border-radius:14px;
    cursor:pointer;
    background: rgba(255,255,255,.03);
    user-select:none;
  }
  .drawer__nav{
    display:grid; gap:10px;
    padding:14px 6px;
  }
  .drawer__nav a{
    padding:12px 12px;
    border:1px solid var(--line);
    border-radius:16px;
    background: rgba(255,255,255,.02);
    font-weight:800;
    color: var(--text);
  }
  .drawer__nav a:hover{border-color: rgba(0,229,255,.55)}

  .drawer__contact{
    margin-top:auto;
    padding:14px 6px 6px;
    border-top:1px solid rgba(255,255,255,.08);
    display:grid; gap:10px;
  }
  .drawer__contact-title{color:var(--muted); font-weight:900; font-size:12px; letter-spacing:.8px; text-transform:uppercase}
  .drawer__contact-row{color:var(--text); font-weight:800}
  .drawer__contact-icons{display:flex; gap:10px; margin-top:4px}
  .iconbtn{
    width:44px; height:44px;
    display:inline-flex; align-items:center; justify-content:center;
    border:1px solid var(--line);
    border-radius:16px;
    background: rgba(255,255,255,.02);
    font-weight:900;
  }

  /* Toggle behavior */
  .drawer-toggle:checked ~ .drawer-overlay{opacity:1!important; pointer-events:auto}
  .drawer-toggle:checked ~ .drawer{transform: translateX(0)}
  
}

/* Config cards with image + icon rows */
.config-card{padding:0; overflow:hidden}
.config-card__img{
  height:160px;
  background:
    radial-gradient(650px 260px at 20% 20%, rgba(0,229,255,.18), transparent 60%),
    radial-gradient(520px 220px at 80% 30%, rgba(45,125,255,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.18));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.config-card__body{padding:14px}
.specs{margin-top:10px; display:grid; gap:8px}
.spec{
  display:flex; gap:10px; align-items:center;
  padding:10px 10px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  background: rgba(255,255,255,.01);
}
.spec__ico{
  width:26px; height:26px;
  border-radius:10px;
  border:1px solid rgba(0,229,255,.22);
  background: rgba(0,229,255,.06);
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto;
}
.spec__txt{color:var(--muted); font-weight:700; font-size:13px}

.hamburger{flex-direction:column;gap:4px}
.hamburger span{width:20px;height:2px}

.drawer-overlay{background:#000!important;opacity:0}
.drawer-toggle:checked ~ .drawer-overlay{opacity:1!important; pointer-events:auto}

.profile-ico{font-size:18px}

.stars{display:flex; flex-direction:row-reverse; justify-content:flex-start; gap:6px}
.stars input{display:none}
.stars label{font-size:22px;cursor:pointer;color:#2d7dff;transition:.15s}
.stars label:hover,
.stars label:hover ~ label{color:#00e5ff}


/* Drawer: non-transparent */
.drawer-overlay{background:#000!important;}
.drawer-toggle:checked ~ .drawer-overlay{opacity:1!important; pointer-events:auto}
.drawer{background:#000!important;}

/* Reviews form full width */
.form{max-width:none}
.form .input, .form textarea{width:100%}
.form textarea{resize:none}

/* Stars: left-to-right fill */
.stars{display:flex; flex-direction:row-reverse; justify-content:flex-start; gap:6px}
.stars input{display:none}
.stars label{font-size:22px; cursor:pointer; color:#2d7dff; transition:.15s}
.stars label:hover, .stars label:hover ~ label{color:#00e5ff}
.stars input:checked ~ label{color:#00e5ff}

/* Rules block display: desktop in hero__card, mobile separate section */
.rules-mobile{display:none}
@media (max-width: 880px){
  .rules-mobile{display:block}
  .rules-desktop{display:none}
}
@media (min-width: 881px){
  .rules-desktop{display:block}
}

/* Rating stars: align left and fill left->right */
.rating-field{display:flex; flex-direction:column; align-items:flex-start}
.stars{display:flex; flex-direction:row-reverse; justify-content:flex-start; width:100%; gap:6px}
.stars input{display:none}
.stars label{font-size:22px; cursor:pointer; color:#2d7dff; transition:.15s}
.stars label:hover, .stars label:hover ~ label{color:#00e5ff}
.stars input:checked ~ label{color:#00e5ff}
.btn--full{width:100%}
.form textarea{resize:none}

/* Configurations slider */
.config-scroll{
  display:flex;
  gap:14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:6px;
}
.config-scroll::-webkit-scrollbar{height:8px}
.config-scroll::-webkit-scrollbar-thumb{background: rgba(255,255,255,.12); border-radius:999px}
.config-item{scroll-snap-align:start; flex:0 0 calc((100% - 28px)/3);}
@media (max-width: 880px){
  .config-item{flex:0 0 85%}
}

/* Ensure topbar actions are always rendered (drawer overlay will cover them visually) */
.topbar__actions{display:flex}

  .drawer{top: var(--topbar-offset) !important; height: calc(100vh - var(--topbar-offset)) !important;}
  .drawer-overlay{background:#000!important; opacity:0;}
  .drawer-toggle:checked ~ .drawer-overlay{opacity:1!important; pointer-events:auto;}
  .drawer{background:#000!important;}
}

/* Drawer: full screen but UNDER the topbar (topbar stays visible) */
@media (max-width: 880px){
  .drawer-overlay{top:0; z-index:60; background:#000!important;}
  .drawer{top:0; height:100vh; z-index:61; background:#000!important;}
}

/* Hover outline without layout shift (cards + photos) */
.card, .photo{
  position:relative;
  box-sizing:border-box;
}
.card:hover, .photo:hover{
  box-shadow:
    0 0 0 2px rgba(0,229,255,.35),
    0 20px 60px rgba(0,0,0,.35);
}
/* Ensure radii match */
.config-card, .photo{border-radius:22px; overflow:hidden}
.photo__img{border-top-left-radius:22px; border-top-right-radius:22px}

/* Rating stars: left under label */
.rating-field{display:flex; flex-direction:column; align-items:flex-start; gap:8px}
.stars{display:flex; flex-direction:row-reverse; justify-content:flex-start; width:auto; gap:6px}
.stars input{display:none}
.stars label{font-size:22px; cursor:pointer; color:#2d7dff; transition:.15s}
.stars label:hover, .stars label:hover ~ label{color:#00e5ff}
.stars input:checked ~ label{color:#00e5ff}

/* ===== Mobile drawer (fixed) ===== */
@media (max-width: 880px){
  /* Keep header visible */
  .topbar{z-index:90}
  .drawer-overlay{
    top: var(--topbar-offset);
    height: calc(100vh - var(--topbar-offset));
    z-index:60;
    background: rgba(0,0,0,.92);
  }
  .drawer{
    top: var(--topbar-offset);
    height: calc(100vh - var(--topbar-offset));
    width: 100vw;
    max-width: 100vw;
    z-index:61;
    border-right: none;
    border-top: 1px solid rgba(255,255,255,.08);
    border-radius: 0;
  }
}

/* ===== Hover outlines (no shift) ===== */
.config-card, .photo{position:relative; box-sizing:border-box}
.config-card:hover, .photo:hover{
  box-shadow: 0 0 0 2px rgba(0,229,255,.35), 0 20px 60px rgba(0,0,0,.35);
}
/* Keep radii aligned */
.photo{border-radius:22px; overflow:hidden}
.photo__img{border-top-left-radius:22px; border-top-right-radius:22px}

/* ===== Mobile drawer (v22) ===== */
@media (max-width: 880px){
  .drawer-overlay{
    top:0 !important;
    height:100vh !important;
    background: rgba(0,0,0,.92) !important;
  }
  .drawer{
    top:0 !important;
    height:100vh !important;
    width:95vw !important;
    max-width:95vw !important;
    border-radius: 0 22px 22px 0 !important;
  }
}

/* ===== Robust outlines for config/photo cards ===== */
.config-card, .photo{
  position:relative;
  overflow:hidden;
  border-radius:22px;
}
.config-card::after, .photo::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.06);
  pointer-events:none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.config-card:hover::after, .photo:hover::after{
  border-color: rgba(0,229,255,.45);
  box-shadow: 0 0 0 2px rgba(0,229,255,.18);
}
.config-card__img, .photo__img{display:block; width:100%;}

/* ===================== v23 fixes ===================== */

/* Mobile drawer: open over header, 95% width, no rounding; overlay shows site through */
@media (max-width: 880px){
  .drawer-overlay{
    top:0 !important;
    height:100vh !important;
    background: rgba(0,0,0,.65) !important;
  }
  .drawer{
    top:0 !important;
    height:100vh !important;
    width:95vw !important;
    max-width:95vw !important;
    border-radius:0 !important;
    padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  }
}

/* Remove previous pseudo-outline to avoid "double" borders */
.config-card::after,
.photo::after{ content:none !important; }

/* Clean hover outline (single, aligned) */
.config-card,
.photo{
  border:1px solid var(--line) !important;
  border-radius:22px !important;
  overflow:hidden !important;
}
.config-card:hover,
.photo:hover{
  border-color: rgba(0,229,255,.55) !important;
  box-shadow: 0 0 0 2px rgba(0,229,255,.22), 0 16px 40px rgba(0,0,0,.35) !important;
  transform: translateY(-1px);
}

/* Let container handle rounding (avoid top "shift") */
.config-card__img,
.photo__img{
  border-radius:0 !important;
}

/* Photos: on mobile make it a horizontal scroller like configurations, with scrollbar below */
@media (max-width: 520px){
  #photos .gallery{
    display:flex !important;
    gap:14px !important;
    overflow-x:auto !important;
    scroll-snap-type:x mandatory;
    padding-bottom:10px;
  }
  #photos .gallery::-webkit-scrollbar{height:8px}
  #photos .gallery::-webkit-scrollbar-thumb{background: rgba(255,255,255,.12); border-radius:999px}
  #photos .photo{
    flex:0 0 85% !important;
    scroll-snap-align:start;
  }
}

/* ===================== v24 fixes ===================== */

/* Mobile drawer: 90% width, full height, black to bottom */
@media (max-width: 880px){
  .drawer-overlay{
    top:0 !important;
    height:100vh !important;
    background: rgba(0,0,0,.75) !important;
  }
  .drawer{
    top:0 !important;
    height:100vh !important;
    width:90vw !important;
    max-width:90vw !important;
    border-radius:0 !important;
    background:#000 !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
}

/* Clean highlight without shifting/clipping.
   Apply hover styles only on devices that actually hover (prevents sticky hover on mobile). */
.config-card, .photo{
  border:1px solid var(--line) !important;
  border-radius:22px !important;
  overflow:hidden !important;
  box-shadow:none !important;
  transform:none !important;
}
@media (hover:hover){
  .config-card:hover, .photo:hover{
    border-color: rgba(0,229,255,.55) !important;
    box-shadow:
      inset 0 0 0 2px rgba(0,229,255,.22),
      0 16px 40px rgba(0,0,0,.35) !important;
  }
}
/* Keyboard focus */
.config-card:focus-within, .photo:focus-within{
  border-color: rgba(0,229,255,.55) !important;
  box-shadow: inset 0 0 0 2px rgba(0,229,255,.22) !important;
}

/* Ensure scrollers keep shadow visible */
.config-scroll, .gallery{
  padding-top:2px;
  padding-bottom:10px;
}

/* Mobile photos scrollbar below (not overlaying images) */
@media (max-width: 520px){
  #photos .gallery{ padding-bottom:12px !important; }
}

/* ===================== v25 tweaks ===================== */
@media (max-width: 880px){
  .drawer{
    width:85vw !important;
    max-width:85vw !important;
    /* bottom spacing like before */
    padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  }
  .drawer-overlay{
    /* half less dim */
    background: rgba(0,0,0,.5) !important;
  }
}

/* Prettier mobile menu items */
@media (max-width: 880px){
  .drawer__nav a{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .drawer__nav a .nav-ico{width:22px; text-align:center; opacity:.95}
}

/* SVG nav icons (safe sizes) */
.nav-ico{display:inline-flex;width:20px;justify-content:center;align-items:center;color:var(--cyan);flex:0 0 20px}
.ico{width:18px;height:18px;display:block;fill:currentColor}
.profile-ico{display:inline-flex;align-items:center;justify-content:center;line-height:1}
.profile-ico .ico{width:18px;height:18px}

/* ===== v35 icon system ===== */
.nav-ico,.section-ico,.profile-ico{display:inline-flex;align-items:center;justify-content:center;color:var(--cyan)}
.nav-ico{width:18px;min-width:18px;margin-right:8px;vertical-align:middle}
.section-ico{width:20px;min-width:20px;margin-right:8px;vertical-align:-3px}
.profile-ico{width:18px;height:18px}
.gico{width:100%;height:100%;display:block;fill:currentColor;filter:drop-shadow(0 0 6px rgba(0,229,255,.15))}
@media (prefers-reduced-motion:no-preference){
  .nav-ico .gico,.section-ico .gico,.profile-ico .gico{animation:gIconPulse 3.2s ease-in-out infinite}
}
@keyframes gIconPulse{
  0%,100%{transform:translateY(0);filter:drop-shadow(0 0 4px rgba(0,229,255,.12))}
  50%{transform:translateY(-.5px);filter:drop-shadow(0 0 8px rgba(0,229,255,.24))}
}
/* Keep menu stable */
.nav.nav--desktop a,.drawer__nav a{display:flex;align-items:center}


/* ===== v36 icon vertical alignment fix ===== */
.nav.nav--desktop a,
.drawer__nav a{
  line-height: 1;
}

.nav-ico,
.section-ico,
.profile-ico{
  vertical-align: middle !important;
  align-self: center;
  line-height: 0 !important;
}

.nav-ico{
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  margin-right: 8px !important;
}

.section-ico{
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  margin-right: 8px !important;
  vertical-align: -2px !important;
}

.profile-ico{
  width: 16px !important;
  height: 16px !important;
}

.gico{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.brand,
.nav.nav--desktop,
.topbar__actions{
  align-items: center !important;
}

.topbar__inner{
  align-items: center !important;
}

.hero .section-ico{
  vertical-align: 0 !important;
}

/* keep heading icon from adding extra height */
h1 .section-ico,
h2 .section-ico{
  display: inline-flex;
  position: relative;
  top: -1px;
}


/* ===== v37 hero heading icon size ===== */
.hero .h1 > .section-ico{
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  margin-right: 12px !important;
  vertical-align: -4px !important;
  top: -2px !important;
}

@media (max-width: 880px){
  .hero .h1 > .section-ico{
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    margin-right: 10px !important;
    vertical-align: -2px !important;
    top: -1px !important;
  }
}


/* ===== v38 hero corner glow ===== */
.hero{
  position: relative;
}
.hero::before,
.hero::after{
  content:"";
  position:absolute;
  width:42px;
  height:42px;
  pointer-events:none;
  border-color: rgba(0,229,255,.9);
  filter: drop-shadow(0 0 10px rgba(0,229,255,.35));
}
.hero::before{
  left:14px;
  top:14px;
  border-left:3px solid rgba(0,229,255,.9);
  border-top:3px solid rgba(0,229,255,.9);
  border-top-left-radius:18px;
}
.hero::after{
  right:14px;
  bottom:14px;
  border-right:3px solid rgba(0,229,255,.9);
  border-bottom:3px solid rgba(0,229,255,.9);
  border-bottom-right-radius:18px;
}
@media (max-width: 880px){
  .hero::before,
  .hero::after{
    width:34px;
    height:34px;
  }
}


/* ===== v39 hero corner cleanup ===== */
.hero::before,
.hero::after{
  filter: none !important;
}
.hero::before{
  box-shadow: none !important;
}
.hero::after{
  box-shadow: 0 0 10px rgba(0,229,255,.18);
}

/* ===== v40 hero corners same clean style ===== */
.hero::before,
.hero::after{
  filter:none !important;
  box-shadow:none !important;
}
.hero::before{
  left:14px;
  top:14px;
  border-left:3px solid rgba(0,229,255,.9) !important;
  border-top:3px solid rgba(0,229,255,.9) !important;
  border-top-left-radius:18px !important;
}
.hero::after{
  right:14px;
  bottom:14px;
  border-right:3px solid rgba(0,229,255,.9) !important;
  border-bottom:3px solid rgba(0,229,255,.9) !important;
  border-bottom-right-radius:18px !important;
}


/* ===== v41 remove top-left corner glow completely ===== */
.hero::before{
  filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  background: transparent !important;
}


/* ===== v42 hero corners further to actual edges ===== */
.hero::before{
  left: 8px !important;
  top: 8px !important;
  width: 52px !important;
  height: 52px !important;
}
.hero::after{
  right: 8px !important;
  bottom: 8px !important;
  width: 52px !important;
  height: 52px !important;
}

@media (max-width: 880px){
  .hero::before{
    left: 6px !important;
    top: 6px !important;
    width: 30px !important;
    height: 30px !important;
  }
  .hero::after{
    right: 6px !important;
    bottom: 6px !important;
    width: 30px !important;
    height: 30px !important;
  }

  /* Mobile hero "Компьютерный клуб" same size/color as tariff-style small heading */
  .smallline{
    font-size: 12px !important;
    font-weight: 800 !important;
    color: var(--muted) !important;
    white-space: nowrap;
    display: inline-block;
  }
}


/* ===== v43 mobile smallline like section title ===== */
@media (max-width: 880px){
  .smallline{
    font-size: 20px !important;
    font-weight: 900 !important;
    color: var(--text) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em;
    white-space: nowrap;
    display: inline-block;
  }
}


/* ===== v44 mobile slider scrollbar cyan glow ===== */
@media (max-width: 880px){
  .config-scroll::-webkit-scrollbar,
  .gallery::-webkit-scrollbar{
    height: 8px;
  }

  .config-scroll::-webkit-scrollbar-track,
  .gallery::-webkit-scrollbar-track{
    background: rgba(255,255,255,.04);
    border-radius: 999px;
  }

  .config-scroll::-webkit-scrollbar-thumb,
  .gallery::-webkit-scrollbar-thumb{
    background: rgba(0,229,255,.85) !important;
    border-radius: 999px;
    box-shadow: 0 0 10px rgba(0,229,255,.35);
  }

  /* Firefox */
  .config-scroll,
  .gallery{
    scrollbar-color: rgba(0,229,255,.85) rgba(255,255,255,.04);
    scrollbar-width: thin;
  }
}


/* ===== v45 tiny spacing tweaks ===== */

/* Hero corners: just a little more inward */
.hero::before{
  left: 10px !important;
  top: 10px !important;
}
.hero::after{
  right: 10px !important;
  bottom: 10px !important;
}

@media (max-width: 880px){
  .hero::before{
    left: 8px !important;
    top: 8px !important;
  }
  .hero::after{
    right: 8px !important;
    bottom: 8px !important;
  }

  /* Mobile menu button: smaller, closer to profile, cyan */
  .hamburger{
    width: 36px !important;
    height: 36px !important;
    margin-right: 4px !important;
    border-color: rgba(0,229,255,.22) !important;
    color: var(--cyan) !important;
  }
  .hamburger span{
    width: 16px !important;
    background: var(--cyan) !important;
  }

  .topbar__inner{
    gap: 8px !important;
  }

  .topbar__actions{
    margin-left: 0 !important;
  }
}


/* ===== v46 hero/title + cabinet corners ===== */

/* Main hero/page titles a bit higher, closer to top-left corner */
.hero .h1{
  position: relative;
  top: -6px;
}
@media (max-width: 880px){
  .hero .h1{
    top: -4px;
  }
  /* Mobile: "Компьютерный клуб" a bit larger, still one line */
  .smallline{
    font-size: 22px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }
}

/* Personal cabinet gets same corner style */
.section:has(> h2:first-child),
.section h2{
  position: relative;
}

/* cabinet page specific */
body .section{
  position: relative;
}
body .section > h2:first-child{
  position: relative;
  z-index: 2;
}
body .section:first-of-type.cabinet-corners,
body .cabinet-corners{
  position: relative;
}
body .section:first-of-type.cabinet-corners::before,
body .section:first-of-type.cabinet-corners::after,
body .cabinet-corners::before,
body .cabinet-corners::after{
  content:"";
  position:absolute;
  width:52px;
  height:52px;
  pointer-events:none;
}
body .section:first-of-type.cabinet-corners::before,
body .cabinet-corners::before{
  left:10px;
  top:10px;
  border-left:3px solid rgba(0,229,255,.9);
  border-top:3px solid rgba(0,229,255,.9);
  border-top-left-radius:18px;
}
body .section:first-of-type.cabinet-corners::after,
body .cabinet-corners::after{
  right:10px;
  bottom:10px;
  border-right:3px solid rgba(0,229,255,.9);
  border-bottom:3px solid rgba(0,229,255,.9);
  border-bottom-right-radius:18px;
}
@media (max-width: 880px){
  body .section:first-of-type.cabinet-corners::before,
  body .cabinet-corners::before{
    left:8px;
    top:8px;
    width:30px;
    height:30px;
  }
  body .section:first-of-type.cabinet-corners::after,
  body .cabinet-corners::after{
    right:8px;
    bottom:8px;
    width:30px;
    height:30px;
  }
}


/* ===== v47 mobile fine-tuning ===== */
@media (max-width: 880px){
  /* Main hero title a touch farther from corner and slightly larger */
  .hero .h1{
    top: 0 !important;
  }
  .smallline{
    font-size: 23px !important;
    line-height: 1.05 !important;
    margin-left: 10px !important;
    display: inline-block !important;
    white-space: nowrap !important;
  }

  /* Push menu button to the right, closer to profile */
  .hamburger{
    margin-left: auto !important;
    margin-right: 2px !important;
  }

  .topbar__inner{
    justify-content: space-between !important;
  }

  .nav--desktop{
    display: none !important;
  }
}


/* ===== v49 safe mobile menu accent + cleaner hamburger ===== */
@media (max-width: 880px){
  /* Keep drawer behavior intact; only add accent line */
  .drawer::after{
    content:"";
    position:absolute;
    top:20px;
    right:0;
    bottom:20px;
    width:2px;
    background: rgba(0,229,255,.95);
    box-shadow: 0 0 10px rgba(0,229,255,.35);
    border-radius:999px;
    pointer-events:none;
  }

  /* Cleaner hamburger without changing layout logic */
  .hamburger{
    padding:0 !important;
  }
  .hamburger span{
    width:15px !important;
    height:2px !important;
    margin:1px 0 !important;
    border-radius:999px !important;
    background: var(--cyan) !important;
    box-shadow: 0 0 6px rgba(0,229,255,.25);
  }
}


/* ===== v50 menu accent + contact icons ===== */
@media (max-width: 880px){
  .drawer::after{
    top: 0 !important;
    bottom: 20px !important;
  }

  .drawer__contact-icons{
    display:flex;
    gap:10px;
    margin-top:6px;
  }

  .iconbtn{
    width:42px;
    height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(0,229,255,.18);
    border-radius:14px;
    background: rgba(255,255,255,.02);
    color: var(--cyan);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
  }

  .iconbtn svg{
    width:18px;
    height:18px;
    display:block;
    fill: currentColor;
    filter: drop-shadow(0 0 6px rgba(0,229,255,.18));
  }
}


/* ===== v51 mobile title + contact row icons ===== */
@media (max-width: 880px){
  .hero .h1{
    top: -6px !important;
  }
  .smallline{
    margin-left: 8px !important;
  }

  .drawer__contact-row{
    display:flex;
    align-items:center;
    gap:10px;
  }

  .drawer__contact-row svg{
    width:18px;
    height:18px;
    min-width:18px;
    fill: currentColor;
    color: var(--cyan);
    filter: drop-shadow(0 0 6px rgba(0,229,255,.18));
  }
}


/* ===== v53 tariffs dots + config subtle text background ===== */

/* Tariffs: keep dots only top-right */
#prices::before{
  display:none !important;
}

/* Config cards image background: subtle PRO GAMING pattern */
.config-card__img{
  position: relative;
  overflow: hidden;
}

.config-card__img::after{
  content: "PRO GAMING  PRO GAMING  PRO GAMING  PRO GAMING";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .18em;
  line-height: 1.7;
  white-space: pre-wrap;
  text-align: center;
  color: rgba(0,229,255,.06);
  text-shadow: 0 0 10px rgba(0,229,255,.04);
  transform: rotate(-15deg) scale(1.15);
  pointer-events: none;
}

@media (max-width: 880px){
  .config-card__img::after{
    font-size: 14px;
    letter-spacing: .14em;
  }
}


/* ===== v54 config section watermark background ===== */

/* Remove previous text from image placeholders */
.config-card__img::after{
  content: none !important;
}

/* Add subtle PRO GAMING watermark to whole configurations section */
#configs{
  position: relative;
  overflow: hidden;
}

#configs::before{
  content: "PRO GAMING  PRO GAMING  PRO GAMING  PRO GAMING  PRO GAMING";
  position: absolute;
  inset: 10% -10% 10% -10%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  font-weight: 900;
  letter-spacing: .22em;
  line-height: 1.8;
  white-space: pre-wrap;
  text-align: center;
  color: rgba(0,229,255,.035);
  text-shadow: 0 0 14px rgba(0,229,255,.03);
  transform: rotate(-16deg);
  pointer-events: none;
  z-index: 0;
}

#configs > *{
  position: relative;
  z-index: 1;
}

@media (max-width: 880px){
  #configs::before{
    font-size: 28px;
    letter-spacing: .16em;
    line-height: 2;
    inset: 8% -20% 8% -20%;
  }
}


/* ===== v55 config watermark behind cards, smaller, full-section ===== */

/* keep section as stacking context */
#configs{
  position: relative;
  isolation: isolate;
}

/* watermark sits behind section content, not over cards */
#configs::before{
  content:
    "PRO GAMING  PRO GAMING  PRO GAMING  PRO GAMING  PRO GAMING  PRO GAMING\A"
    "PRO GAMING  PRO GAMING  PRO GAMING  PRO GAMING  PRO GAMING  PRO GAMING\A"
    "PRO GAMING  PRO GAMING  PRO GAMING  PRO GAMING  PRO GAMING  PRO GAMING\A"
    "PRO GAMING  PRO GAMING  PRO GAMING  PRO GAMING  PRO GAMING  PRO GAMING\A"
    "PRO GAMING  PRO GAMING  PRO GAMING  PRO GAMING  PRO GAMING  PRO GAMING";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: .14em;
  line-height: 1.7;
  white-space: pre;
  text-align: center;
  color: rgba(0,229,255,.024);
  text-shadow: 0 0 8px rgba(0,229,255,.02);
  transform: rotate(-16deg) scale(1.06);
  pointer-events: none;
  z-index: 0;
}

/* ensure only direct content of section stays above watermark */
#configs > h2,
#configs > .grid,
#configs > .config-scroll{
  position: relative;
  z-index: 1;
}

@media (max-width: 880px){
  #configs::before{
    font-size: 20px;
    letter-spacing: .11em;
    line-height: 1.8;
    padding: 16px;
    transform: rotate(-16deg) scale(1.02);
  }
}


/* ===== v56 configs watermark as true section background ===== */
#configs{
  position: relative;
  z-index: 0;
  isolation: auto !important;
}

/* Put watermark behind all content of the section */
#configs::before{
  content:
    "PRO GAMING PRO GAMING PRO GAMING PRO GAMING PRO GAMING PRO GAMING PRO GAMING\A"
    "PRO GAMING PRO GAMING PRO GAMING PRO GAMING PRO GAMING PRO GAMING PRO GAMING\A"
    "PRO GAMING PRO GAMING PRO GAMING PRO GAMING PRO GAMING PRO GAMING PRO GAMING\A"
    "PRO GAMING PRO GAMING PRO GAMING PRO GAMING PRO GAMING PRO GAMING PRO GAMING\A"
    "PRO GAMING PRO GAMING PRO GAMING PRO GAMING PRO GAMING PRO GAMING PRO GAMING\A"
    "PRO GAMING PRO GAMING PRO GAMING PRO GAMING PRO GAMING PRO GAMING PRO GAMING\A"
    "PRO GAMING PRO GAMING PRO GAMING PRO GAMING PRO GAMING PRO GAMING PRO GAMING";
  position: absolute;
  inset: 0;
  z-index: -1 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: .10em;
  line-height: 1.55;
  white-space: pre;
  text-align: center;
  color: rgba(0,229,255,.018);
  text-shadow: none;
  transform: rotate(-16deg) scale(1.08);
  pointer-events: none;
}

/* Cards and section heading stay above */
#configs > h2,
#configs > .grid,
#configs > .config-scroll{
  position: relative;
  z-index: 1;
}

@media (max-width: 880px){
  #configs::before{
    font-size: 16px;
    letter-spacing: .08em;
    line-height: 1.7;
    transform: rotate(-16deg) scale(1.12);
  }
}


/* ===== v57 configs watermark as true background image ===== */
#configs::before{
  content:none !important;
  display:none !important;
}

#configs{
  background-image: url("data:image/svg+xml;utf8,%0A%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%221600%22%20height%3D%22900%22%20viewBox%3D%220%200%201600%20900%22%3E%0A%20%20%3Cg%20transform%3D%22rotate%28-16%20800%20450%29%22%3E%0A%20%20%20%20%3Ctext%20x%3D%2240%22%20y%3D%22140%22%20fill%3D%22rgba%280%2C229%2C255%2C0.018%29%22%20font-family%3D%22Arial%2C%20Helvetica%2C%20sans-serif%22%20font-size%3D%2246%22%20font-weight%3D%22900%22%20letter-spacing%3D%224%22%3EPRO%20GAMING%20PRO%20GAMING%20PRO%20GAMING%20PRO%20GAMING%20PRO%20GAMING%20PRO%20GAMING%3C/text%3E%0A%20%20%20%20%3Ctext%20x%3D%22-20%22%20y%3D%22270%22%20fill%3D%22rgba%280%2C229%2C255%2C0.018%29%22%20font-family%3D%22Arial%2C%20Helvetica%2C%20sans-serif%22%20font-size%3D%2246%22%20font-weight%3D%22900%22%20letter-spacing%3D%224%22%3EPRO%20GAMING%20PRO%20GAMING%20PRO%20GAMING%20PRO%20GAMING%20PRO%20GAMING%20PRO%20GAMING%3C/text%3E%0A%20%20%20%20%3Ctext%20x%3D%2220%22%20y%3D%22400%22%20fill%3D%22rgba%280%2C229%2C255%2C0.018%29%22%20font-family%3D%22Arial%2C%20Helvetica%2C%20sans-serif%22%20font-size%3D%2246%22%20font-weight%3D%22900%22%20letter-spacing%3D%224%22%3EPRO%20GAMING%20PRO%20GAMING%20PRO%20GAMING%20PRO%20GAMING%20PRO%20GAMING%20PRO%20GAMING%3C/text%3E%0A%20%20%20%20%3Ctext%20x%3D%22-30%22%20y%3D%22530%22%20fill%3D%22rgba%280%2C229%2C255%2C0.018%29%22%20font-family%3D%22Arial%2C%20Helvetica%2C%20sans-serif%22%20font-size%3D%2246%22%20font-weight%3D%22900%22%20letter-spacing%3D%224%22%3EPRO%20GAMING%20PRO%20GAMING%20PRO%20GAMING%20PRO%20GAMING%20PRO%20GAMING%20PRO%20GAMING%3C/text%3E%0A%20%20%20%20%3Ctext%20x%3D%2210%22%20y%3D%22660%22%20fill%3D%22rgba%280%2C229%2C255%2C0.018%29%22%20font-family%3D%22Arial%2C%20Helvetica%2C%20sans-serif%22%20font-size%3D%2246%22%20font-weight%3D%22900%22%20letter-spacing%3D%224%22%3EPRO%20GAMING%20PRO%20GAMING%20PRO%20GAMING%20PRO%20GAMING%20PRO%20GAMING%20PRO%20GAMING%3C/text%3E%0A%20%20%20%20%3Ctext%20x%3D%22-40%22%20y%3D%22790%22%20fill%3D%22rgba%280%2C229%2C255%2C0.018%29%22%20font-family%3D%22Arial%2C%20Helvetica%2C%20sans-serif%22%20font-size%3D%2246%22%20font-weight%3D%22900%22%20letter-spacing%3D%224%22%3EPRO%20GAMING%20PRO%20GAMING%20PRO%20GAMING%20PRO%20GAMING%20PRO%20GAMING%20PRO%20GAMING%3C/text%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E%0A") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}

@media (max-width: 880px){
  #configs{
    background-image: url("data:image/svg+xml;utf8,%0A%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22900%22%20height%3D%221200%22%20viewBox%3D%220%200%20900%201200%22%3E%0A%20%20%3Cg%20transform%3D%22rotate%28-16%20450%20600%29%22%3E%0A%20%20%20%20%3Ctext%20x%3D%22-20%22%20y%3D%22160%22%20fill%3D%22rgba%280%2C229%2C255%2C0.018%29%22%20font-family%3D%22Arial%2C%20Helvetica%2C%20sans-serif%22%20font-size%3D%2226%22%20font-weight%3D%22900%22%20letter-spacing%3D%223%22%3EPRO%20GAMING%20PRO%20GAMING%20PRO%20GAMING%20PRO%20GAMING%20PRO%20GAMING%3C/text%3E%0A%20%20%20%20%3Ctext%20x%3D%220%22%20y%3D%22320%22%20fill%3D%22rgba%280%2C229%2C255%2C0.018%29%22%20font-family%3D%22Arial%2C%20Helvetica%2C%20sans-serif%22%20font-size%3D%2226%22%20font-weight%3D%22900%22%20letter-spacing%3D%223%22%3EPRO%20GAMING%20PRO%20GAMING%20PRO%20GAMING%20PRO%20GAMING%20PRO%20GAMING%3C/text%3E%0A%20%20%20%20%3Ctext%20x%3D%22-30%22%20y%3D%22480%22%20fill%3D%22rgba%280%2C229%2C255%2C0.018%29%22%20font-family%3D%22Arial%2C%20Helvetica%2C%20sans-serif%22%20font-size%3D%2226%22%20font-weight%3D%22900%22%20letter-spacing%3D%223%22%3EPRO%20GAMING%20PRO%20GAMING%20PRO%20GAMING%20PRO%20GAMING%20PRO%20GAMING%3C/text%3E%0A%20%20%20%20%3Ctext%20x%3D%2210%22%20y%3D%22640%22%20fill%3D%22rgba%280%2C229%2C255%2C0.018%29%22%20font-family%3D%22Arial%2C%20Helvetica%2C%20sans-serif%22%20font-size%3D%2226%22%20font-weight%3D%22900%22%20letter-spacing%3D%223%22%3EPRO%20GAMING%20PRO%20GAMING%20PRO%20GAMING%20PRO%20GAMING%20PRO%20GAMING%3C/text%3E%0A%20%20%20%20%3Ctext%20x%3D%22-20%22%20y%3D%22800%22%20fill%3D%22rgba%280%2C229%2C255%2C0.018%29%22%20font-family%3D%22Arial%2C%20Helvetica%2C%20sans-serif%22%20font-size%3D%2226%22%20font-weight%3D%22900%22%20letter-spacing%3D%223%22%3EPRO%20GAMING%20PRO%20GAMING%20PRO%20GAMING%20PRO%20GAMING%20PRO%20GAMING%3C/text%3E%0A%20%20%20%20%3Ctext%20x%3D%220%22%20y%3D%22960%22%20fill%3D%22rgba%280%2C229%2C255%2C0.018%29%22%20font-family%3D%22Arial%2C%20Helvetica%2C%20sans-serif%22%20font-size%3D%2226%22%20font-weight%3D%22900%22%20letter-spacing%3D%223%22%3EPRO%20GAMING%20PRO%20GAMING%20PRO%20GAMING%20PRO%20GAMING%20PRO%20GAMING%3C/text%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E%0A") !important;
    background-size: cover !important;
  }
}


/* ===== v60 animated hero corners rebuilt ===== */
.hero{
  position:relative;
}
.hero::before,
.hero::after{
  content:none !important;
  display:none !important;
}

.hero-corner{
  position:absolute;
  display:block !important;
  pointer-events:none;
  z-index:5;
  width:52px;
  height:52px;
  opacity:0;
  will-change: opacity;
}

.hero-corner--tl{
  left:10px; top:10px;
  border-left:3px solid rgba(0,229,255,.92);
  border-top:3px solid rgba(0,229,255,.92);
  border-top-left-radius:18px;
  animation: heroCornerA 8s linear infinite both;
}
.hero-corner--br{
  right:10px; bottom:10px;
  border-right:3px solid rgba(0,229,255,.92);
  border-bottom:3px solid rgba(0,229,255,.92);
  border-bottom-right-radius:18px;
  animation: heroCornerA 8s linear infinite both;
}
.hero-corner--bl{
  left:10px; bottom:10px;
  border-left:3px solid rgba(0,229,255,.92);
  border-bottom:3px solid rgba(0,229,255,.92);
  border-bottom-left-radius:18px;
  animation: heroCornerB 8s linear infinite both;
}
.hero-corner--tr{
  right:10px; top:10px;
  border-right:3px solid rgba(0,229,255,.92);
  border-top:3px solid rgba(0,229,255,.92);
  border-top-right-radius:18px;
  animation: heroCornerB 8s linear infinite both;
}

@keyframes heroCornerA{
  0%,37%{opacity:1}
  40%{opacity:0}
  43%{opacity:1}
  46%{opacity:0}
  49%,61%{opacity:1}
  64%,100%{opacity:0}
}
@keyframes heroCornerB{
  0%,64%{opacity:0}
  67%,79%{opacity:1}
  82%{opacity:0}
  85%{opacity:1}
  88%{opacity:0}
  91%,100%{opacity:1}
}

@media (max-width: 880px){
  .hero-corner{
    width:30px;
    height:30px;
  }
  .hero-corner--tl{left:8px; top:8px;}
  .hero-corner--br{right:8px; bottom:8px;}
  .hero-corner--bl{left:8px; bottom:8px;}
  .hero-corner--tr{right:8px; top:8px;}
}


/* ===== v61 remove cabinet corners ===== */
.cabinet-corners::before,
.cabinet-corners::after{
  content:none !important;
  display:none !important;
}

/* ===== v61 smoother hero corner cycle ===== */
.hero-corner--tl,
.hero-corner--br{
  animation: heroCornerA2 8s linear infinite both !important;
}
.hero-corner--bl,
.hero-corner--tr{
  animation: heroCornerB2 8s linear infinite both !important;
}

@keyframes heroCornerA2{
  0%,37%{opacity:1}
  40%{opacity:0}
  43%{opacity:1}
  46%{opacity:0}
  49%,61%{opacity:1}
  64%{opacity:0}
  96%{opacity:0}
  100%{opacity:1}
}

@keyframes heroCornerB2{
  0%,61%{opacity:0}
  64%{opacity:1}
  67%,79%{opacity:1}
  82%{opacity:0}
  85%{opacity:1}
  88%{opacity:0}
  91%,96%{opacity:1}
  100%{opacity:0}
}


/* ===== v62 slower hero corner cycle ===== */
.hero-corner--tl,
.hero-corner--br{
  animation: heroCornerA3 11s linear infinite both !important;
}
.hero-corner--bl,
.hero-corner--tr{
  animation: heroCornerB3 11s linear infinite both !important;
}

@keyframes heroCornerA3{
  0%,45%{opacity:1}
  48%{opacity:0}
  51%{opacity:1}
  54%{opacity:0}
  58%,72%{opacity:1}
  75%{opacity:0}
  96%{opacity:0}
  100%{opacity:1}
}

@keyframes heroCornerB3{
  0%,72%{opacity:0}
  75%{opacity:1}
  78%,90%{opacity:1}
  93%{opacity:0}
  96%{opacity:1}
  100%{opacity:0}
}

/* ===== v62 remove configs watermark completely ===== */
#configs{
  background-image: none !important;
}
#configs::before{
  content: none !important;
  display: none !important;
}


/* ===== v63 slower second corner state only ===== */
.hero-corner--tl,
.hero-corner--br{
  animation: heroCornerA4 12.5s linear infinite both !important;
}
.hero-corner--bl,
.hero-corner--tr{
  animation: heroCornerB4 12.5s linear infinite both !important;
}

@keyframes heroCornerA4{
  0%,40%{opacity:1}
  43%{opacity:0}
  46%{opacity:1}
  49%{opacity:0}
  53%,62%{opacity:1}
  65%{opacity:0}
  100%{opacity:0}
}

@keyframes heroCornerB4{
  0%,65%{opacity:0}
  68%,84%{opacity:1}
  87%{opacity:0}
  90%{opacity:1}
  93%{opacity:0}
  96%,100%{opacity:1}
}

/* ===== v63 scrolling tagline ===== */
.marquee{
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  margin: 10px 0 26px;
  padding: 2px 0;
}
.marquee__track{
  display: inline-flex;
  gap: 36px;
  min-width: max-content;
  color: rgba(0,229,255,.88);
  text-shadow: 0 0 10px rgba(0,229,255,.16);
  font-weight: 800;
  letter-spacing: .02em;
  animation: stormMarquee var(--marquee-duration, 18s) linear infinite;
}
.marquee__item{
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.marquee__dot{
  width:6px;
  height:6px;
  border-radius:999px;
  background: rgba(0,229,255,.95);
  box-shadow: 0 0 8px rgba(0,229,255,.3);
}
@keyframes stormMarquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media (max-width: 880px){
  .marquee{
    margin: 6px 0 18px;
  }
  .marquee__track{
    gap: 26px;
    font-size: 14px;
  }
}


/* ===== v64 corners smaller + smoother reverse ===== */
.hero-corner{
  width:44px !important;
  height:44px !important;
}
.hero-corner--tl{
  animation: heroCornerA5 12.5s linear infinite both !important;
}
.hero-corner--br{
  animation: heroCornerA5 12.5s linear infinite both !important;
}
.hero-corner--bl{
  animation: heroCornerB5 12.5s linear infinite both !important;
}
.hero-corner--tr{
  animation: heroCornerB5 12.5s linear infinite both !important;
}

@keyframes heroCornerA5{
  0%,40%{opacity:1}
  43%{opacity:0}
  46%{opacity:1}
  49%{opacity:0}
  53%,62%{opacity:1}
  66%{opacity:0}
  93%{opacity:0}
  96%{opacity:.45}
  100%{opacity:1}
}
@keyframes heroCornerB5{
  0%,62%{opacity:0}
  66%{opacity:1}
  70%,84%{opacity:1}
  87%{opacity:0}
  90%{opacity:1}
  93%{opacity:0}
  96%{opacity:.45}
  100%{opacity:0}
}

@media (max-width: 880px){
  .hero-corner{
    width:26px !important;
    height:26px !important;
  }
}


/* ===== v65 corner placement/animation refactor ===== */
.hero::before,.hero::after{content:none !important;display:none !important;}
.hero > .hero-corner{display:none !important;} /* no corners on main hero blocks */

.corner-anim{
  position: relative;
}
.corner-anim .hero-corner{
  position:absolute;
  display:block !important;
  pointer-events:none;
  z-index:3;
  width:44px;
  height:44px;
  opacity:0;
}
.corner-anim .hero-corner--tl{left:10px; top:10px; border-left:3px solid rgba(0,229,255,.92); border-top:3px solid rgba(0,229,255,.92); border-top-left-radius:18px; animation: cornerPairA 12.5s linear infinite both !important;}
.corner-anim .hero-corner--br{right:10px; bottom:10px; border-right:3px solid rgba(0,229,255,.92); border-bottom:3px solid rgba(0,229,255,.92); border-bottom-right-radius:18px; animation: cornerPairA 12.5s linear infinite both !important;}
.corner-anim .hero-corner--bl{left:10px; bottom:10px; border-left:3px solid rgba(0,229,255,.92); border-bottom:3px solid rgba(0,229,255,.92); border-bottom-left-radius:18px; animation: cornerPairB 12.5s linear infinite both !important;}
.corner-anim .hero-corner--tr{right:10px; top:10px; border-right:3px solid rgba(0,229,255,.92); border-top:3px solid rgba(0,229,255,.92); border-top-right-radius:18px; animation: cornerPairB 12.5s linear infinite both !important;}

@keyframes cornerPairA{
  0%,40%{opacity:1}
  43%{opacity:0}
  46%{opacity:1}
  49%{opacity:0}
  53%,62%{opacity:1}
  66%{opacity:0}
  94%{opacity:0}
  97%{opacity:.55}
  100%{opacity:1}
}
@keyframes cornerPairB{
  0%,62%{opacity:0}
  66%{opacity:1}
  70%,84%{opacity:1}
  87%{opacity:0}
  90%{opacity:1}
  93%{opacity:0}
  97%{opacity:.55}
  100%{opacity:0}
}

@media (max-width: 880px){
  .corner-anim .hero-corner{width:26px;height:26px;}
  .corner-anim .hero-corner--tl{left:8px;top:8px}
  .corner-anim .hero-corner--br{right:8px;bottom:8px}
  .corner-anim .hero-corner--bl{left:8px;bottom:8px}
  .corner-anim .hero-corner--tr{right:8px;top:8px}
}


/* ===== v71 reviews rules desktop spacing ===== */
@media (min-width: 881px){
  .rules-desktop .help{
    padding-left: 12px;
  }
}


/* ===== v72 reviews rules more right on desktop ===== */
@media (min-width: 881px){
  .rules-desktop .help{
    padding-left: 22px !important;
  }
}


/* ===== v73 move only reviews desktop title 'Правила' right ===== */
@media (min-width: 881px){
  .rules-desktop h2{
    padding-left: 22px !important;
  }
}


/* ===== v74 slightly less shift for rules title ===== */
@media (min-width: 881px){
  .rules-desktop h2{
    padding-left: 14px !important;
  }
}


/* ===== v75 rules title slightly lower ===== */
@media (min-width: 881px){
  .rules-desktop h2{
    position: relative;
    top: 2px;
  }
}


/* ===== v75 seamless marquee ===== */
.marquee{
  position: relative;
  overflow: hidden;
}
.marquee__viewport{
  display: flex;
  width: max-content;
  will-change: transform;
  animation: stormMarqueeSeamless 22s linear infinite;
}
.marquee__track{
  display: inline-flex !important;
  gap: 36px;
  min-width: max-content;
  flex-shrink: 0;
}
@keyframes stormMarqueeSeamless{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (max-width: 880px){
  .marquee__track{
    gap: 26px;
  }
}


/* ===== v76 marquee spacing between duplicated tracks ===== */
.marquee__track{
  padding-right: 36px;
}
@media (max-width: 880px){
  .marquee__track{
    padding-right: 26px;
  }
}


/* ===== Admin ===== */
.admin-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.admin-list{display:grid;gap:14px}
.admin-row{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.admin-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.admin-edit-card{gap:12px}
.admin-table{width:100%;border-collapse:collapse}
.admin-table th,.admin-table td{padding:10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
@media (max-width: 880px){
  .admin-row{flex-direction:column}
  .admin-table{font-size:13px}
}


/* ===== v82 mockup-like desktop layout (no content/button changes) ===== */
@media (min-width: 881px){
  .topbar{
    background: linear-gradient(180deg, rgba(8,10,16,.88), rgba(6,7,11,.62));
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    border-bottom: 1px solid rgba(0,229,255,.10);
  }
  .topbar__inner{
    justify-content: space-between;
    gap: 18px;
    padding: 16px 0;
  }
  .brand__logo{
    width:38px; height:38px;
    border-radius:12px;
    box-shadow: 0 0 0 6px rgba(0,229,255,.05);
  }
  .brand__name{
    font-size: 18px;
    letter-spacing: 1px;
  }
  .nav--desktop{
    gap: 22px;
  }
  .nav--desktop a{
    padding: 8px 10px;
    border-radius: 12px;
    position: relative;
  }
  .nav--desktop a::after{
    content:"";
    position:absolute;
    left: 14px;
    right: 14px;
    bottom: 4px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,229,255,.35), transparent);
    opacity: 0;
  }
  .nav--desktop a:hover::after{ opacity: 1; }
}

/* Panels for sections (like mockup cards) */
.mock-panel{
  position: relative;
  background: radial-gradient(900px 380px at 18% 0%, rgba(0,229,255,.10), transparent 60%),
              radial-gradient(900px 380px at 82% 30%, rgba(45,125,255,.08), transparent 60%),
              rgba(10,12,18,.72);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 26px;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
}
.hero.mock-panel{
  margin-top: 18px;
  padding: 26px;
}
.section.mock-panel{
  margin-top: 18px;
  padding: 22px;
}

/* Right-bottom cyan corner like mockup */
.corner-br::after{
  content:"";
  position:absolute;
  right: 16px;
  bottom: 16px;
  width: 54px;
  height: 54px;
  border-right: 3px solid rgba(0,229,255,.85);
  border-bottom: 3px solid rgba(0,229,255,.85);
  border-bottom-right-radius: 18px;
  box-shadow: 0 0 14px rgba(0,229,255,.16);
  pointer-events:none;
}

/* Make tariffs/config/contacts blocks look closer to mockup */
#prices .price-grid, #prices .grid{
  gap: 16px;
}
#prices .card, #prices .price-card{
  background: rgba(7,9,14,.58);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
}

#configs .config-card{
  background: rgba(7,9,14,.58);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
}

/* Contacts 3 columns on desktop like mockup */
@media (min-width: 881px){
  #contacts .grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}

/* Footer closer to mockup (keep existing content) */
/* ===== v83 stronger screenshot-like redesign ===== */
:root{
  --stone-1: #0a1018;
  --stone-2: #0d1420;
  --stone-line: rgba(143, 223, 255, .12);
  --stone-shine: rgba(160,235,255,.10);
  --stone-inner: rgba(255,255,255,.03);
}

/* Background depth like screenshot */
body{
  background:
    radial-gradient(1200px 700px at 18% 8%, rgba(0,229,255,.09), transparent 60%),
    radial-gradient(900px 500px at 72% 16%, rgba(45,125,255,.08), transparent 56%),
    linear-gradient(180deg, #06090f 0%, #05070c 100%);
}

/* Header */
.topbar{
  position: sticky;
  top: 0;
  z-index: 90;
  background:
    linear-gradient(180deg, rgba(9,12,19,.92), rgba(8,10,16,.78)),
    linear-gradient(90deg, rgba(0,229,255,.04), transparent 28%, transparent 72%, rgba(45,125,255,.04));
  border-bottom: 1px solid rgba(129, 224, 255, .10);
  box-shadow:
    inset 0 1px 0 rgba(180,240,255,.06),
    0 14px 32px rgba(0,0,0,.36);
}
.topbar::before,
.topbar::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:1px;
  pointer-events:none;
}
.topbar::before{
  top:0;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,.18), transparent);
}
.topbar::after{
  bottom:0;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,.12), transparent);
}
.topbar__inner{
  gap:18px;
  padding: 14px 0;
}
.brand__logo{
  width:36px;
  height:36px;
  border-radius: 10px;
  border: 1px solid rgba(0,229,255,.22);
  box-shadow: 0 0 0 5px rgba(0,229,255,.03);
}
.brand__name{
  font-size: 18px;
  letter-spacing: .06em;
}
.nav--desktop{
  gap: 6px 8px;
}
.nav--desktop a{
  min-height: 40px;
  padding: 10px 12px 14px;
  border-radius: 14px;
  color: rgba(231,247,255,.84);
  position: relative;
  transition: .2s ease;
}
.nav--desktop a::before{
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,.42), transparent);
  opacity: .18;
  transform: scaleX(.75);
  transform-origin: center;
}
.nav--desktop a:hover,
.nav--desktop a.is-active{
  color: var(--text);
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.008));
}
.nav--desktop a:hover::before,
.nav--desktop a.is-active::before{
  opacity: 1;
  transform: scaleX(1);
  box-shadow: 0 0 12px rgba(0,229,255,.18);
}
.nav-ico{
  opacity:.95;
}

/* Stone / slab panels */
.mock-panel{
  position: relative;
  background:
    radial-gradient(920px 420px at 18% 0%, rgba(0,229,255,.11), transparent 60%),
    radial-gradient(860px 340px at 82% 24%, rgba(45,125,255,.07), transparent 62%),
    linear-gradient(180deg, rgba(15,22,34,.92) 0%, rgba(8,12,18,.96) 100%);
  border: 1px solid rgba(180,240,255,.08);
  border-radius: 28px;
  box-shadow:
    inset 0 1px 0 rgba(200,245,255,.05),
    inset 0 -1px 0 rgba(255,255,255,.02),
    0 18px 48px rgba(0,0,0,.50);
  overflow: hidden;
}
.mock-panel::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 18%, transparent 82%, rgba(255,255,255,.01)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.008) 0 1px, transparent 1px 140px);
  pointer-events:none;
}
.hero.mock-panel{ padding: 24px 24px 22px; }
.section.mock-panel{ padding: 20px 20px 18px; margin-top: 18px; }

/* Right-bottom cyan corner */
.corner-br::after{
  content:"";
  position:absolute;
  right: 18px;
  bottom: 18px;
  width: 50px;
  height: 50px;
  border-right: 3px solid rgba(0,229,255,.82);
  border-bottom: 3px solid rgba(0,229,255,.82);
  border-bottom-right-radius: 16px;
  box-shadow: 0 0 14px rgba(0,229,255,.12);
  pointer-events:none;
}

/* Hero layout closer to screenshot */
.hero__grid{
  display:grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, .95fr);
  gap: 18px;
}
.h1{
  margin: 6px 0 10px;
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: -.02em;
}
.sub{
  margin: 0 0 18px;
  color: rgba(231,247,255,.78);
  max-width: 700px;
}
.hero__card{
  position: relative;
  background:
    linear-gradient(180deg, rgba(9,14,22,.84), rgba(7,10,16,.92));
  border: 1px solid rgba(180,240,255,.08);
  border-radius: 22px;
  padding: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.hero__card .card{
  background: rgba(8,12,18,.62);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.06);
}
.kv{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.kv .item{
  background:
    linear-gradient(180deg, rgba(10,15,24,.70), rgba(7,10,16,.92));
  border: 1px solid rgba(180,240,255,.08);
  border-radius: 18px;
  padding: 14px 16px;
  min-height: 74px;
}
.kv .k{
  color: rgba(231,247,255,.56);
  font-size: 13px;
  margin-bottom: 4px;
}
.kv .v{
  font-weight: 800;
  font-size: 15px;
}

/* Section titles */
.section h2{
  display:flex;
  align-items:center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 20px;
}
.section-ico{
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  color: rgba(120,228,255,.98);
  box-shadow: none;
}
.gico{
  width: 18px;
  height: 18px;
}

/* Cards in sections */
.price-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.price-card,
#contacts .card,
.config-card{
  position: relative;
  background:
    linear-gradient(180deg, rgba(9,14,22,.84), rgba(7,10,16,.94));
  border: 1px solid rgba(180,240,255,.08);
  border-radius: 20px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 12px 24px rgba(0,0,0,.18);
}
.price-card{
  padding: 16px;
}
.price-card__top{
  align-items: center;
}
.price-card__name{
  font-size: 16px;
  margin: 0;
}
.price-card__price{
  min-width: 84px;
  text-align:center;
  border-radius: 999px;
  border: 1px solid rgba(180,240,255,.14);
  background:
    linear-gradient(180deg, rgba(160,235,255,.08), rgba(255,255,255,.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

/* Config cards */
.config-card__img{
  min-height: 128px;
  background:
    linear-gradient(180deg, rgba(150,230,255,.16), rgba(45,125,255,.10) 40%, rgba(7,10,16,.12) 100%);
  border-bottom: 1px solid rgba(180,240,255,.08);
}
.config-card__body{
  padding: 14px;
}
.spec{
  background: rgba(7,10,16,.62);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 16px;
}
.spec__ico{
  font-size: 18px;
}

/* Contacts / map */
@media (min-width: 881px){
  #contacts .grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}
#contacts .card{
  padding: 16px;
}
.map-placeholder{
  height: 138px;
  border-radius: 16px;
  border: 1px solid rgba(180,240,255,.12);
  background:
    linear-gradient(135deg, rgba(142,233,255,.18), rgba(45,125,255,.08)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 34px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 2px, transparent 2px 34px),
    linear-gradient(180deg, rgba(7,10,16,.7), rgba(7,10,16,.85));
  position:relative;
  overflow:hidden;
}
.map-placeholder::before{
  content:"";
  position:absolute;
  left: 56%;
  top: 40%;
  width: 22px;
  height: 22px;
  border-radius: 999px 999px 999px 0;
  transform: rotate(-45deg);
  background: rgba(120,228,255,.95);
  box-shadow: 0 0 18px rgba(0,229,255,.24);
}
.map-placeholder::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(140deg, transparent 0 48%, rgba(255,255,255,.10) 49% 51%, transparent 52%),
    linear-gradient(40deg, transparent 0 40%, rgba(255,255,255,.08) 41% 43%, transparent 44%);
  mix-blend-mode: screen;
  opacity: .32;
}

/* Footer slightly more mockup-like without content changes */
.footer__brand{
  color: rgba(231,247,255,.9);
}
/* Keep mobile as before */
@media (max-width: 880px){
  .mock-panel,
  .hero.mock-panel,
  .section.mock-panel{
    border-radius: 22px;
  }
  .hero__grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .price-grid{
    grid-template-columns: 1fr;
  }
}


/* ===== v85 final mockup pass ===== */
body{
  background:
    radial-gradient(900px 540px at 46% 28%, rgba(74,116,204,.08), transparent 62%),
    radial-gradient(620px 340px at 18% 18%, rgba(0,229,255,.06), transparent 68%),
    radial-gradient(760px 380px at 82% 10%, rgba(45,125,255,.05), transparent 68%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.006) 0 1px, transparent 1px 64px),
    linear-gradient(180deg, #050910 0%, #04070d 100%) !important;
}
.bg-glow{
  inset:-40px !important;
  background:
    radial-gradient(620px 240px at 30% 16%, rgba(0,229,255,.05), transparent 68%),
    radial-gradient(820px 280px at 70% 12%, rgba(45,125,255,.04), transparent 70%) !important;
  filter: blur(10px) !important;
}

@media (min-width: 881px){
  .topbar{
    background:
      linear-gradient(180deg, rgba(9,12,18,.94), rgba(7,10,16,.84)),
      linear-gradient(90deg, rgba(0,229,255,.03), transparent 34%, transparent 66%, rgba(45,125,255,.03)) !important;
    border-bottom: 1px solid rgba(140,224,255,.10) !important;
    box-shadow:
      inset 0 1px 0 rgba(220,245,255,.03),
      0 14px 36px rgba(0,0,0,.36) !important;
  }
  .topbar::before{
    content:"";
    position:absolute;
    left:0; right:0; top:0;
    height:1px;
    background: linear-gradient(90deg, transparent, rgba(0,229,255,.12), transparent);
    pointer-events:none;
  }
  .topbar__inner{
    padding: 12px 0 13px !important;
  }
  .nav--desktop{
    gap: 8px 10px !important;
  }
  .nav--desktop a{
    min-height: 40px;
    padding: 10px 12px 16px !important;
    border-radius: 14px;
    color: rgba(227,240,255,.82) !important;
    background: transparent;
    position: relative;
  }
  .nav--desktop a::after{
    content:"";
    position:absolute;
    left: 14px;
    right: 14px;
    bottom: 6px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(0,229,255,.55), transparent);
    opacity: .14;
    transform: scaleX(.72);
    transform-origin: center;
    transition: .2s ease;
  }
  .nav--desktop a:hover,
  .nav--desktop a.is-active{
    color: var(--text) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.005));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
  }
  .nav--desktop a:hover::after,
  .nav--desktop a.is-active::after{
    opacity: 1;
    transform: scaleX(1);
    box-shadow: 0 0 14px rgba(0,229,255,.18);
  }
}

.mock-panel{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(420px 220px at 54% 52%, rgba(126,171,255,.055), transparent 64%),
    radial-gradient(760px 300px at 18% 14%, rgba(0,229,255,.06), transparent 68%),
    radial-gradient(700px 280px at 82% 16%, rgba(45,125,255,.04), transparent 68%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.007) 0 1px, transparent 1px 56px),
    linear-gradient(180deg, #08111a 0%, #071019 100%) !important;
  border: 1px solid rgba(132,219,255,.12) !important;
  border-radius: 28px !important;
  box-shadow:
    inset 0 1px 0 rgba(225,245,255,.04),
    inset 0 -1px 0 rgba(255,255,255,.012),
    0 18px 46px rgba(0,0,0,.48) !important;
}
.mock-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(220px 160px at 48% 28%, rgba(255,255,255,.014), transparent 74%),
    radial-gradient(220px 140px at 58% 70%, rgba(255,255,255,.01), transparent 78%),
    linear-gradient(180deg, rgba(255,255,255,.012), transparent 18%, transparent 82%, rgba(255,255,255,.006));
}
.hero.mock-panel{
  padding: 22px 22px 18px !important;
}
.section.mock-panel{
  padding: 18px 18px 16px !important;
}

.hero.mock-panel::after,
.hero__card::after{
  content:"";
  position:absolute;
  left: -1px;
  top: -1px;
  width: 74px;
  height: 74px;
  pointer-events:none;
  background:
    linear-gradient(rgba(109,220,255,.95), rgba(109,220,255,.95)) 0 22px / 3px 42px no-repeat,
    linear-gradient(rgba(109,220,255,.95), rgba(109,220,255,.95)) 22px 0 / 42px 3px no-repeat,
    radial-gradient(42px 32px at 0 0, rgba(0,229,255,.16), transparent 72%);
  border-top-left-radius: 28px;
  filter: drop-shadow(0 0 10px rgba(0,229,255,.14));
}

.corner-br::after{
  content:"";
  position:absolute;
  right: -1px !important;
  bottom: -1px !important;
  width: 54px !important;
  height: 54px !important;
  border-right: 3px solid rgba(109,220,255,.96) !important;
  border-bottom: 3px solid rgba(109,220,255,.96) !important;
  border-bottom-right-radius: 18px !important;
  box-shadow:
    0 0 14px rgba(0,229,255,.16),
    0 0 2px rgba(180,245,255,.42) !important;
  pointer-events:none;
}
.corner-br .hero-corner{display:none !important;}
.corner-br::before{
  content:"";
  position:absolute;
  right: 26px;
  bottom: 0;
  width: 120px;
  height: 2px;
  pointer-events:none;
  background: linear-gradient(90deg, transparent, rgba(109,220,255,.06), rgba(109,220,255,.18), rgba(109,220,255,.06), transparent);
}

.hero__grid{
  grid-template-columns: minmax(0,1.45fr) minmax(320px,.95fr) !important;
  gap: 18px !important;
}
.h1{
  font-size: 34px !important;
  line-height: 1.08 !important;
  margin: 8px 0 10px !important;
}
.sub{
  color: rgba(231,247,255,.78) !important;
  margin: 0 0 18px !important;
  max-width: 690px;
}
.hero__card{
  position:relative;
  background:
    radial-gradient(280px 140px at 54% 48%, rgba(126,171,255,.035), transparent 66%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.006) 0 1px, transparent 1px 68px),
    linear-gradient(180deg, rgba(10,15,24,.92), rgba(7,10,16,.96)) !important;
  border: 1px solid rgba(132,219,255,.10) !important;
  border-radius: 24px !important;
  padding: 18px !important;
}
.hero__card .card{
  background:
    radial-gradient(220px 100px at 50% 50%, rgba(126,171,255,.03), transparent 66%),
    linear-gradient(180deg, rgba(9,13,21,.92), rgba(7,10,16,.96)) !important;
  border: 1px solid rgba(132,219,255,.08) !important;
  border-radius: 18px !important;
}

.kv{
  margin-top: 18px !important;
  gap: 14px !important;
}
.kv .item{
  min-height: 74px;
  padding: 14px 16px !important;
  border-radius: 18px !important;
  background:
    radial-gradient(220px 100px at 50% 50%, rgba(126,171,255,.03), transparent 66%),
    linear-gradient(180deg, rgba(9,13,21,.92), rgba(7,10,16,.98)) !important;
  border: 1px solid rgba(132,219,255,.09) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}
.kv .k{ color: rgba(231,247,255,.56) !important; }
.kv .v{ font-weight: 800 !important; }

.section h2{
  margin: 0 0 14px !important;
  font-size: 20px !important;
  gap: 10px !important;
}
.section-ico{
  width: 22px !important;
  height: 22px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow:none !important;
  color: rgba(112,228,255,.98) !important;
}
.gico{
  width: 18px !important;
  height: 18px !important;
}

.price-card,
#contacts .card,
.config-card{
  background:
    radial-gradient(300px 160px at 50% 48%, rgba(126,171,255,.035), transparent 66%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.006) 0 1px, transparent 1px 72px),
    linear-gradient(180deg, rgba(9,14,22,.92), rgba(7,10,16,.98)) !important;
  border: 1px solid rgba(132,219,255,.10) !important;
  border-radius: 20px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 12px 24px rgba(0,0,0,.18);
}
.price-grid{
  gap: 14px !important;
}
.price-card{
  padding: 16px !important;
}
.price-card__price{
  min-width: 84px;
  border-radius: 999px !important;
  border: 1px solid rgba(132,219,255,.14) !important;
  background: linear-gradient(180deg, rgba(160,235,255,.08), rgba(255,255,255,.02)) !important;
}
.config-card__img{
  min-height: 128px;
  background:
    radial-gradient(260px 140px at 50% 40%, rgba(126,171,255,.06), transparent 66%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.006) 0 1px, transparent 1px 72px),
    linear-gradient(180deg, rgba(15,22,34,.74), rgba(9,13,20,.96)) !important;
  border-bottom: 1px solid rgba(132,219,255,.10);
}
.spec{
  background: linear-gradient(180deg, rgba(8,12,18,.84), rgba(7,10,16,.96)) !important;
  border: 1px solid rgba(132,219,255,.08) !important;
  border-radius: 16px !important;
}

#contacts .grid{
  gap: 16px !important;
}
@media (min-width: 881px){
  #contacts .grid{
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  }
}
#contacts .card{
  padding: 16px !important;
}
.map-placeholder{
  height: 140px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(132,219,255,.12) !important;
  background:
    linear-gradient(135deg, rgba(140,236,255,.14), rgba(45,125,255,.06)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 36px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 2px, transparent 2px 36px),
    linear-gradient(180deg, rgba(7,10,16,.72), rgba(7,10,16,.9)) !important;
}

@media (max-width: 880px){
  .hero.mock-panel::after,
  .hero__card::after{
    width: 54px;
    height: 54px;
    background:
      linear-gradient(rgba(109,220,255,.95), rgba(109,220,255,.95)) 0 16px / 3px 28px no-repeat,
      linear-gradient(rgba(109,220,255,.95), rgba(109,220,255,.95)) 16px 0 / 28px 3px no-repeat,
      radial-gradient(34px 24px at 0 0, rgba(0,229,255,.16), transparent 72%);
  }
}


/* ===== v85 final mockup pass ===== */
body{
  background:
    radial-gradient(900px 540px at 46% 28%, rgba(74,116,204,.08), transparent 62%),
    radial-gradient(620px 340px at 18% 18%, rgba(0,229,255,.06), transparent 68%),
    radial-gradient(760px 380px at 82% 10%, rgba(45,125,255,.05), transparent 68%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.006) 0 1px, transparent 1px 64px),
    linear-gradient(180deg, #050910 0%, #04070d 100%) !important;
}
.bg-glow{
  inset:-40px !important;
  background:
    radial-gradient(620px 240px at 30% 16%, rgba(0,229,255,.05), transparent 68%),
    radial-gradient(820px 280px at 70% 12%, rgba(45,125,255,.04), transparent 70%) !important;
  filter: blur(10px) !important;
}

@media (min-width: 881px){
  .topbar{
    background:
      linear-gradient(180deg, rgba(9,12,18,.94), rgba(7,10,16,.84)),
      linear-gradient(90deg, rgba(0,229,255,.03), transparent 34%, transparent 66%, rgba(45,125,255,.03)) !important;
    border-bottom: 1px solid rgba(140,224,255,.10) !important;
    box-shadow:
      inset 0 1px 0 rgba(220,245,255,.03),
      0 14px 36px rgba(0,0,0,.36) !important;
  }
  .topbar::before{
    content:"";
    position:absolute;
    left:0; right:0; top:0;
    height:1px;
    background: linear-gradient(90deg, transparent, rgba(0,229,255,.12), transparent);
    pointer-events:none;
  }
  .topbar__inner{
    padding: 12px 0 13px !important;
  }
  .nav--desktop{
    gap: 8px 10px !important;
  }
  .nav--desktop a{
    min-height: 40px;
    padding: 10px 12px 16px !important;
    border-radius: 14px;
    color: rgba(227,240,255,.82) !important;
    background: transparent;
    position: relative;
  }
  .nav--desktop a::after{
    content:"";
    position:absolute;
    left: 14px;
    right: 14px;
    bottom: 6px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(0,229,255,.55), transparent);
    opacity: .14;
    transform: scaleX(.72);
    transform-origin: center;
    transition: .2s ease;
  }
  .nav--desktop a:hover,
  .nav--desktop a.is-active{
    color: var(--text) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.005));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
  }
  .nav--desktop a:hover::after,
  .nav--desktop a.is-active::after{
    opacity: 1;
    transform: scaleX(1);
    box-shadow: 0 0 14px rgba(0,229,255,.18);
  }
}

.mock-panel{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(420px 220px at 54% 52%, rgba(126,171,255,.055), transparent 64%),
    radial-gradient(760px 300px at 18% 14%, rgba(0,229,255,.06), transparent 68%),
    radial-gradient(700px 280px at 82% 16%, rgba(45,125,255,.04), transparent 68%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.007) 0 1px, transparent 1px 56px),
    linear-gradient(180deg, #08111a 0%, #071019 100%) !important;
  border: 1px solid rgba(132,219,255,.12) !important;
  border-radius: 28px !important;
  box-shadow:
    inset 0 1px 0 rgba(225,245,255,.04),
    inset 0 -1px 0 rgba(255,255,255,.012),
    0 18px 46px rgba(0,0,0,.48) !important;
}
.mock-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(220px 160px at 48% 28%, rgba(255,255,255,.014), transparent 74%),
    radial-gradient(220px 140px at 58% 70%, rgba(255,255,255,.01), transparent 78%),
    linear-gradient(180deg, rgba(255,255,255,.012), transparent 18%, transparent 82%, rgba(255,255,255,.006));
}
.hero.mock-panel{
  padding: 22px 22px 18px !important;
}
.section.mock-panel{
  padding: 18px 18px 16px !important;
}

.hero.mock-panel::after,
.hero__card::after{
  content:"";
  position:absolute;
  left: -1px;
  top: -1px;
  width: 74px;
  height: 74px;
  pointer-events:none;
  background:
    linear-gradient(rgba(109,220,255,.95), rgba(109,220,255,.95)) 0 22px / 3px 42px no-repeat,
    linear-gradient(rgba(109,220,255,.95), rgba(109,220,255,.95)) 22px 0 / 42px 3px no-repeat,
    radial-gradient(42px 32px at 0 0, rgba(0,229,255,.16), transparent 72%);
  border-top-left-radius: 28px;
  filter: drop-shadow(0 0 10px rgba(0,229,255,.14));
}

.corner-br::after{
  content:"";
  position:absolute;
  right: -1px !important;
  bottom: -1px !important;
  width: 54px !important;
  height: 54px !important;
  border-right: 3px solid rgba(109,220,255,.96) !important;
  border-bottom: 3px solid rgba(109,220,255,.96) !important;
  border-bottom-right-radius: 18px !important;
  box-shadow:
    0 0 14px rgba(0,229,255,.16),
    0 0 2px rgba(180,245,255,.42) !important;
  pointer-events:none;
}
.corner-br .hero-corner{display:none !important;}
.corner-br::before{
  content:"";
  position:absolute;
  right: 26px;
  bottom: 0;
  width: 120px;
  height: 2px;
  pointer-events:none;
  background: linear-gradient(90deg, transparent, rgba(109,220,255,.06), rgba(109,220,255,.18), rgba(109,220,255,.06), transparent);
}

.hero__grid{
  grid-template-columns: minmax(0,1.45fr) minmax(320px,.95fr) !important;
  gap: 18px !important;
}
.h1{
  font-size: 34px !important;
  line-height: 1.08 !important;
  margin: 8px 0 10px !important;
}
.sub{
  color: rgba(231,247,255,.78) !important;
  margin: 0 0 18px !important;
  max-width: 690px;
}
.hero__card{
  position:relative;
  background:
    radial-gradient(280px 140px at 54% 48%, rgba(126,171,255,.035), transparent 66%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.006) 0 1px, transparent 1px 68px),
    linear-gradient(180deg, rgba(10,15,24,.92), rgba(7,10,16,.96)) !important;
  border: 1px solid rgba(132,219,255,.10) !important;
  border-radius: 24px !important;
  padding: 18px !important;
}
.hero__card .card{
  background:
    radial-gradient(220px 100px at 50% 50%, rgba(126,171,255,.03), transparent 66%),
    linear-gradient(180deg, rgba(9,13,21,.92), rgba(7,10,16,.96)) !important;
  border: 1px solid rgba(132,219,255,.08) !important;
  border-radius: 18px !important;
}

.kv{
  margin-top: 18px !important;
  gap: 14px !important;
}
.kv .item{
  min-height: 74px;
  padding: 14px 16px !important;
  border-radius: 18px !important;
  background:
    radial-gradient(220px 100px at 50% 50%, rgba(126,171,255,.03), transparent 66%),
    linear-gradient(180deg, rgba(9,13,21,.92), rgba(7,10,16,.98)) !important;
  border: 1px solid rgba(132,219,255,.09) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}
.kv .k{ color: rgba(231,247,255,.56) !important; }
.kv .v{ font-weight: 800 !important; }

.section h2{
  margin: 0 0 14px !important;
  font-size: 20px !important;
  gap: 10px !important;
}
.section-ico{
  width: 22px !important;
  height: 22px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow:none !important;
  color: rgba(112,228,255,.98) !important;
}
.gico{
  width: 18px !important;
  height: 18px !important;
}

.price-card,
#contacts .card,
.config-card{
  background:
    radial-gradient(300px 160px at 50% 48%, rgba(126,171,255,.035), transparent 66%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.006) 0 1px, transparent 1px 72px),
    linear-gradient(180deg, rgba(9,14,22,.92), rgba(7,10,16,.98)) !important;
  border: 1px solid rgba(132,219,255,.10) !important;
  border-radius: 20px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 12px 24px rgba(0,0,0,.18);
}
.price-grid{
  gap: 14px !important;
}
.price-card{
  padding: 16px !important;
}
.price-card__price{
  min-width: 84px;
  border-radius: 999px !important;
  border: 1px solid rgba(132,219,255,.14) !important;
  background: linear-gradient(180deg, rgba(160,235,255,.08), rgba(255,255,255,.02)) !important;
}
.config-card__img{
  min-height: 128px;
  background:
    radial-gradient(260px 140px at 50% 40%, rgba(126,171,255,.06), transparent 66%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.006) 0 1px, transparent 1px 72px),
    linear-gradient(180deg, rgba(15,22,34,.74), rgba(9,13,20,.96)) !important;
  border-bottom: 1px solid rgba(132,219,255,.10);
}
.spec{
  background: linear-gradient(180deg, rgba(8,12,18,.84), rgba(7,10,16,.96)) !important;
  border: 1px solid rgba(132,219,255,.08) !important;
  border-radius: 16px !important;
}

#contacts .grid{
  gap: 16px !important;
}
@media (min-width: 881px){
  #contacts .grid{
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  }
}
#contacts .card{
  padding: 16px !important;
}
.map-placeholder{
  height: 140px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(132,219,255,.12) !important;
  background:
    linear-gradient(135deg, rgba(140,236,255,.14), rgba(45,125,255,.06)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 36px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 2px, transparent 2px 36px),
    linear-gradient(180deg, rgba(7,10,16,.72), rgba(7,10,16,.9)) !important;
}

@media (max-width: 880px){
  .hero.mock-panel::after,
  .hero__card::after{
    width: 54px;
    height: 54px;
    background:
      linear-gradient(rgba(109,220,255,.95), rgba(109,220,255,.95)) 0 16px / 3px 28px no-repeat,
      linear-gradient(rgba(109,220,255,.95), rgba(109,220,255,.95)) 16px 0 / 28px 3px no-repeat,
      radial-gradient(34px 24px at 0 0, rgba(0,229,255,.16), transparent 72%);
  }
}


/* ===== v86 bug fixes ===== */
/* correct bottom-right corners on main sections */
.mock-panel.corner-br::after{
  content:"" !important;
  position:absolute !important;
  right: 12px !important;
  bottom: 12px !important;
  width: 38px !important;
  height: 38px !important;
  border-right: 3px solid rgba(109,220,255,.96) !important;
  border-bottom: 3px solid rgba(109,220,255,.96) !important;
  border-bottom-right-radius: 14px !important;
  box-shadow: 0 0 12px rgba(0,229,255,.14), 0 0 2px rgba(180,245,255,.38) !important;
  background: none !important;
  pointer-events:none !important;
}
.mock-panel.corner-br::before{
  /* keep texture only */
}
#prices .hero-corner,
#configs .hero-corner,
#contacts .hero-corner{
  display:none !important;
}

/* clear old extra corner streaks that broke layout */
.corner-br::before{
  background: none !important;
}

/* contacts hover outline */
#contacts .card,
#contacts .card h3,
#contacts .card .meta{
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
#contacts .card:hover{
  border-color: rgba(0,229,255,.58) !important;
  box-shadow: 0 0 0 3px rgba(0,229,255,.10), 0 16px 34px rgba(0,0,0,.34) !important;
  transform: translateY(-1px);
}

/* footer finished */
.footer__social{
  display:flex;
  gap:10px;
}
.footer__icon{
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border:1px solid rgba(0,229,255,.22);
  background: linear-gradient(180deg, rgba(0,229,255,.08), rgba(45,125,255,.05));
  color: rgba(112,228,255,.96);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.footer__icon svg{width:18px;height:18px}
.footer__center{
  text-align:center;
  color: rgba(231,247,255,.70);
  font-weight:600;
}
@media (max-width: 880px){
  .footer__center{
    text-align:left;
  }
}


/* ===== v87 bug fixes ===== */

/* Contacts hover and separators */
#contacts .contacts-grid > .card{
  position: relative;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
#contacts .contacts-grid > .card:hover{
  border-color: rgba(0,229,255,.50) !important;
  box-shadow: 0 0 0 3px rgba(0,229,255,.08), 0 14px 30px rgba(0,0,0,.26) !important;
  transform: translateY(-1px);
}
@media (min-width: 881px){
  #contacts .contacts-grid > .card:not(:last-child)::after{
    content:"";
    position:absolute;
    top:14px;
    bottom:14px;
    right:-9px;
    width:1px;
    background: linear-gradient(180deg, transparent, rgba(132,219,255,.22), transparent);
    pointer-events:none;
  }
}

/* Stable corners for tariffs/configs/contacts */
#prices.corner-br::before,
#configs.corner-br::before,
#contacts.corner-br::before{
  content:"";
  position:absolute;
  right:24px;
  bottom:0;
  width:110px;
  height:2px;
  background: linear-gradient(90deg, transparent, rgba(109,220,255,.08), rgba(109,220,255,.20), rgba(109,220,255,.06), transparent);
  pointer-events:none;
  z-index:2;
}
#prices.corner-br::after,
#configs.corner-br::after,
#contacts.corner-br::after{
  content:"";
  position:absolute;
  right:-1px;
  bottom:-1px;
  width:44px;
  height:44px;
  border-right:3px solid rgba(109,220,255,.95);
  border-bottom:3px solid rgba(109,220,255,.95);
  border-bottom-right-radius:18px;
  box-shadow: 0 0 10px rgba(0,229,255,.14);
  pointer-events:none;
  z-index:3;
}
#prices .hero-corner,
#configs .hero-corner,
#contacts .hero-corner{
  display:none !important;
}

/* Footer final alignment */
.footer__center{
  text-align:center;
  color: rgba(231,247,255,.75);
  font-weight:600;
}
.footer__right @media (max-width: 880px){
  .footer__center,
  }


/* ===== v88 polish: glow, footer right, static review corners, softer bottom corners ===== */

/* Slightly grayer panels + subtle noise */
.mock-panel,
.hero__card,
.price-card,
#contacts .card,
.config-card{
  background-color: #0a1017 !important;
}
.mock-panel{
  box-shadow:
    inset 0 1px 0 rgba(225,245,255,.04),
    inset 0 -1px 0 rgba(255,255,255,.012),
    0 0 0 1px rgba(150,220,255,.04),
    0 18px 46px rgba(0,0,0,.48),
    0 0 24px rgba(74,140,255,.05) !important;
}
.mock-panel::before{
  background:
    radial-gradient(220px 160px at 48% 28%, rgba(255,255,255,.014), transparent 74%),
    radial-gradient(220px 140px at 58% 70%, rgba(255,255,255,.01), transparent 78%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='white' fill-opacity='.035'%3E%3Ccircle cx='8' cy='12' r='0.8'/%3E%3Ccircle cx='26' cy='48' r='0.7'/%3E%3Ccircle cx='44' cy='20' r='0.8'/%3E%3Ccircle cx='58' cy='76' r='0.8'/%3E%3Ccircle cx='78' cy='34' r='0.7'/%3E%3Ccircle cx='92' cy='14' r='0.9'/%3E%3Ccircle cx='102' cy='56' r='0.8'/%3E%3Ccircle cx='20' cy='98' r='0.8'/%3E%3Ccircle cx='70' cy='102' r='0.7'/%3E%3Ccircle cx='108' cy='96' r='0.8'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255,255,255,.012), transparent 18%, transparent 82%, rgba(255,255,255,.006)) !important;
  background-size: auto, auto, 140px 140px, auto !important;
  opacity: .9;
}

/* Return nice glow to all major blocks */
.hero.mock-panel,
#prices.mock-panel,
#configs.mock-panel,
#contacts.mock-panel,
.hero__card{
  box-shadow:
    inset 0 1px 0 rgba(225,245,255,.04),
    inset 0 -1px 0 rgba(255,255,255,.012),
    0 18px 46px rgba(0,0,0,.48),
    0 0 22px rgba(0,229,255,.07),
    0 0 36px rgba(45,125,255,.05) !important;
}

/* Footer right-aligned */
@media (max-width: 880px){
  }

/* Softer bottom-right corners without black shadow */
#prices.corner-br::before,
#configs.corner-br::before,
#contacts.corner-br::before{
  content: none !important;
}
#prices.corner-br::after,
#configs.corner-br::after,
#contacts.corner-br::after{
  right: 0 !important;
  bottom: 0 !important;
  width: 40px !important;
  height: 40px !important;
  border-right: 3px solid rgba(109,220,255,.96) !important;
  border-bottom: 3px solid rgba(109,220,255,.96) !important;
  border-bottom-right-radius: 14px !important;
  box-shadow: 0 0 8px rgba(0,229,255,.10) !important;
  background: transparent !important;
  filter: none !important;
}

/* Contacts vertical separators a bit clearer */
@media (min-width: 881px){
  #contacts .contacts-grid > .card:not(:last-child)::after{
    right:-8px !important;
    background: linear-gradient(180deg, transparent, rgba(132,219,255,.30), transparent) !important;
  }
}

/* Reviews: keep double corners, no animation */
.rules-desktop .hero-corner,
.rules-mobile .hero-corner{
  animation: none !important;
  transition: none !important;
}
.rules-desktop .hero-corner--tl,
.rules-desktop .hero-corner--br,
.rules-mobile .hero-corner--tl,
.rules-mobile .hero-corner--br{
  opacity: 1 !important;
}
.rules-desktop .hero-corner--tr,
.rules-desktop .hero-corner--bl,
.rules-mobile .hero-corner--tr,
.rules-mobile .hero-corner--bl{
  opacity: 0 !important;
}


/* ===== v89 contour light instead of full glow ===== */
.hero.mock-panel,
#prices.mock-panel,
#configs.mock-panel,
#contacts.mock-panel,
.hero__card{
  box-shadow:
    inset 0 1px 0 rgba(225,245,255,.04),
    inset 0 -1px 0 rgba(255,255,255,.012),
    0 18px 46px rgba(0,0,0,.48) !important;
}
.hero.mock-panel::before,
#prices.mock-panel::before,
#configs.mock-panel::before,
#contacts.mock-panel::before{
  background:
    radial-gradient(220px 160px at 48% 28%, rgba(255,255,255,.014), transparent 74%),
    radial-gradient(220px 140px at 58% 70%, rgba(255,255,255,.01), transparent 78%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='white' fill-opacity='.035'%3E%3Ccircle cx='8' cy='12' r='0.8'/%3E%3Ccircle cx='26' cy='48' r='0.7'/%3E%3Ccircle cx='44' cy='20' r='0.8'/%3E%3Ccircle cx='58' cy='76' r='0.8'/%3E%3Ccircle cx='78' cy='34' r='0.7'/%3E%3Ccircle cx='92' cy='14' r='0.9'/%3E%3Ccircle cx='102' cy='56' r='0.8'/%3E%3Ccircle cx='20' cy='98' r='0.8'/%3E%3Ccircle cx='70' cy='102' r='0.7'/%3E%3Ccircle cx='108' cy='96' r='0.8'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255,255,255,.012), transparent 18%, transparent 82%, rgba(255,255,255,.006)) !important;
  background-size: auto, auto, 140px 140px, auto !important;
  opacity: .9;
}
.hero.mock-panel::after,
#prices.mock-panel::after,
#configs.mock-panel::after,
#contacts.mock-panel::after{
  content:"";
  position:absolute;
  left:22px;
  right:22px;
  top:0;
  height:22px;
  background: radial-gradient(55% 100% at 50% 0%, rgba(135,228,255,.20), rgba(135,228,255,.06) 42%, transparent 72%);
  pointer-events:none;
  mix-blend-mode: screen;
  opacity:.9;
}

/* Keep corner blocks above top contour */
#prices.corner-br::after,
#configs.corner-br::after,
#contacts.corner-br::after{
  top:auto !important;
  left:auto !important;
  height:40px !important;
  background: transparent !important;
}

/* Reviews: only new double corners, remove old animated/alternate ones */
.rules-desktop .hero-corner,
.rules-mobile .hero-corner{
  animation:none !important;
  transition:none !important;
  opacity:0 !important;
  box-shadow:none !important;
}
.rules-desktop .hero-corner--tl,
.rules-desktop .hero-corner--br,
.rules-mobile .hero-corner--tl,
.rules-mobile .hero-corner--br{
  opacity:1 !important;
}
.rules-desktop .hero-corner--tr,
.rules-desktop .hero-corner--bl,
.rules-mobile .hero-corner--tr,
.rules-mobile .hero-corner--bl{
  display:none !important;
}


/* ===== v90 unify corners / hover / panels ===== */

/* panels a bit grayer + subtle noise */
.mock-panel,
.hero__card,
.price-card,
#contacts .card,
.config-card,
.rules-desktop,
.rules-mobile .card{
  background-color: #0b121a !important;
}
.mock-panel::before{
  background:
    radial-gradient(220px 160px at 48% 28%, rgba(255,255,255,.012), transparent 74%),
    radial-gradient(220px 140px at 58% 70%, rgba(255,255,255,.009), transparent 78%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='white' fill-opacity='.03'%3E%3Ccircle cx='8' cy='12' r='0.8'/%3E%3Ccircle cx='26' cy='48' r='0.7'/%3E%3Ccircle cx='44' cy='20' r='0.8'/%3E%3Ccircle cx='58' cy='76' r='0.8'/%3E%3Ccircle cx='78' cy='34' r='0.7'/%3E%3Ccircle cx='92' cy='14' r='0.9'/%3E%3Ccircle cx='102' cy='56' r='0.8'/%3E%3Ccircle cx='20' cy='98' r='0.8'/%3E%3Ccircle cx='70' cy='102' r='0.7'/%3E%3Ccircle cx='108' cy='96' r='0.8'/%3E%3Ccircle cx='124' cy='44' r='0.7'/%3E%3Ccircle cx='120' cy='120' r='0.8'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255,255,255,.010), transparent 18%, transparent 82%, rgba(255,255,255,.005)) !important;
  background-size: auto, auto, 150px 150px, auto !important;
}

/* unify hover highlight for all card-like blocks */
.card,
.kv .item,
.hero__card,
.price-card,
.config-card,
#contacts .card{
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background-color .18s ease;
}
.card:hover,
.kv .item:hover,
.hero__card:hover,
.price-card:hover,
.config-card:hover,
#contacts .card:hover{
  border-color: rgba(102,224,255,.44) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 0 0 2px rgba(0,229,255,.07),
    0 14px 30px rgba(0,0,0,.26) !important;
  transform: translateY(-1px);
}

/* kill animation on tariff/config/contact corner and remove any dark base */
#prices.corner-br,
#configs.corner-br,
#contacts.corner-br{
  overflow: hidden;
}
#prices.corner-br::before,
#configs.corner-br::before,
#contacts.corner-br::before{
  content: none !important;
}
#prices.corner-br::after,
#configs.corner-br::after,
#contacts.corner-br::after{
  content:"";
  position:absolute;
  right:0 !important;
  bottom:0 !important;
  left:auto !important;
  top:auto !important;
  width:38px !important;
  height:38px !important;
  border-right: 3px solid rgba(102,224,255,.96) !important;
  border-bottom: 3px solid rgba(102,224,255,.96) !important;
  border-bottom-right-radius: 14px !important;
  box-shadow: 0 0 8px rgba(0,229,255,.10) !important;
  background: transparent !important;
  filter: none !important;
  animation: none !important;
  transform: none !important;
  mix-blend-mode: normal !important;
  z-index: 4;
}

/* also remove the top contour pseudo from panels where it could look like a square near the corner */
#prices.mock-panel::after,
#configs.mock-panel::after,
#contacts.mock-panel::after{
  content:"";
  position:absolute;
  left:22px;
  right:22px;
  top:0;
  height:18px;
  background: radial-gradient(55% 100% at 50% 0%, rgba(135,228,255,.14), rgba(135,228,255,.04) 42%, transparent 74%);
  pointer-events:none;
  mix-blend-mode: screen;
  opacity:.85;
}

/* Reviews: only double static corners, no extra ones, no animation */
.rules-desktop.corner-anim .hero-corner,
.rules-mobile.corner-anim .hero-corner{
  animation: none !important;
  transition: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
}
.rules-desktop.corner-anim .hero-corner--tl,
.rules-mobile.corner-anim .hero-corner--tl{
  left: 0 !important;
  top: 0 !important;
  width: 42px !important;
  height: 42px !important;
  border-left: 3px solid rgba(102,224,255,.96) !important;
  border-top: 3px solid rgba(102,224,255,.96) !important;
  border-top-left-radius: 16px !important;
}
.rules-desktop.corner-anim .hero-corner--br,
.rules-mobile.corner-anim .hero-corner--br{
  right: 0 !important;
  bottom: 0 !important;
  width: 38px !important;
  height: 38px !important;
  border-right: 3px solid rgba(102,224,255,.96) !important;
  border-bottom: 3px solid rgba(102,224,255,.96) !important;
  border-bottom-right-radius: 14px !important;
}
.rules-desktop.corner-anim .hero-corner--tr,
.rules-desktop.corner-anim .hero-corner--bl,
.rules-mobile.corner-anim .hero-corner--tr,
.rules-mobile.corner-anim .hero-corner--bl{
  display: none !important;
  opacity: 0 !important;
}

/* remove old hero corner animation influence on reviews area */
.rules-desktop.corner-anim,
.rules-mobile.corner-anim{
  overflow: hidden;
}


/* ===== v91 corner cleanup + metal texture + marquee ===== */

/* More metallic gray on main large panels/background */
body{
  background:
    radial-gradient(1050px 620px at 46% 28%, rgba(112,132,168,.09), transparent 62%),
    radial-gradient(760px 360px at 18% 18%, rgba(0,229,255,.045), transparent 70%),
    radial-gradient(820px 380px at 82% 10%, rgba(45,125,255,.04), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.008) 0 1px, transparent 1px 52px),
    linear-gradient(180deg, #060b12 0%, #050910 100%) !important;
}
.hero.mock-panel{
  background:
    radial-gradient(520px 260px at 54% 48%, rgba(170,184,205,.08), transparent 66%),
    radial-gradient(860px 320px at 18% 14%, rgba(0,229,255,.045), transparent 72%),
    radial-gradient(780px 300px at 82% 16%, rgba(45,125,255,.038), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.010) 0 1px, transparent 1px 44px),
    linear-gradient(180deg, #0a1118 0%, #091018 100%) !important;
}
.hero.mock-panel::before{
  background:
    radial-gradient(260px 180px at 48% 30%, rgba(255,255,255,.018), transparent 74%),
    radial-gradient(260px 160px at 58% 72%, rgba(255,255,255,.012), transparent 78%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='white' fill-opacity='.035'%3E%3Ccircle cx='8' cy='12' r='0.8'/%3E%3Ccircle cx='26' cy='48' r='0.7'/%3E%3Ccircle cx='44' cy='20' r='0.8'/%3E%3Ccircle cx='58' cy='76' r='0.8'/%3E%3Ccircle cx='78' cy='34' r='0.7'/%3E%3Ccircle cx='92' cy='14' r='0.9'/%3E%3Ccircle cx='102' cy='56' r='0.8'/%3E%3Ccircle cx='20' cy='98' r='0.8'/%3E%3Ccircle cx='70' cy='102' r='0.7'/%3E%3Ccircle cx='108' cy='96' r='0.8'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255,255,255,.010), transparent 18%, transparent 82%, rgba(255,255,255,.006)) !important;
  background-size: auto, auto, 140px 140px, auto !important;
}

/* Other major blocks slightly grayer + metal noise */
.mock-panel:not(.hero),
.hero__card,
.price-card,
#contacts .card,
.config-card{
  background-color: #0b1219 !important;
}
.mock-panel:not(.hero)::before,
.hero__card::before{
  background:
    radial-gradient(200px 140px at 48% 30%, rgba(255,255,255,.014), transparent 74%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='white' fill-opacity='.03'%3E%3Ccircle cx='8' cy='12' r='0.7'/%3E%3Ccircle cx='26' cy='48' r='0.6'/%3E%3Ccircle cx='44' cy='20' r='0.7'/%3E%3Ccircle cx='58' cy='76' r='0.7'/%3E%3Ccircle cx='78' cy='34' r='0.6'/%3E%3Ccircle cx='92' cy='14' r='0.8'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255,255,255,.008), transparent 20%, transparent 82%, rgba(255,255,255,.004)) !important;
  background-size: auto, 120px 120px, auto !important;
}

/* Remove dark square under bottom-right corners */
#prices.corner-br::after,
#configs.corner-br::after,
#contacts.corner-br::after{
  background-image: none !important;
  background-color: transparent !important;
  box-shadow: 0 0 6px rgba(0,229,255,.08) !important;
}
#prices.corner-br,
#configs.corner-br,
#contacts.corner-br{
  isolation: isolate;
}
#prices.corner-br > *,
#configs.corner-br > *,
#contacts.corner-br > *{
  position: relative;
  z-index: 1;
}
#prices.corner-br::after,
#configs.corner-br::after,
#contacts.corner-br::after{
  z-index: 2 !important;
}

/* Reviews: only one new corner like "Коротко о клубе" */
.rules-desktop.corner-anim,
.rules-mobile.corner-anim{
  overflow: hidden;
}
.rules-desktop.corner-anim .hero-corner,
.rules-mobile.corner-anim .hero-corner{
  display:none !important;
  opacity:0 !important;
  animation:none !important;
}
.rules-desktop.corner-anim .hero-corner--tl,
.rules-mobile.corner-anim .hero-corner--tl{
  display:block !important;
  opacity:1 !important;
  left:-1px !important;
  top:-1px !important;
  width:72px !important;
  height:72px !important;
  border:none !important;
  background:
    linear-gradient(rgba(102,224,255,.96), rgba(102,224,255,.96)) 0 22px / 3px 42px no-repeat,
    linear-gradient(rgba(102,224,255,.96), rgba(102,224,255,.96)) 22px 0 / 42px 3px no-repeat,
    radial-gradient(42px 32px at 0 0, rgba(0,229,255,.16), transparent 72%) !important;
  filter: drop-shadow(0 0 8px rgba(0,229,255,.12));
  border-top-left-radius: 22px !important;
}

/* Marquee truly seamless and spaced */
.marquee{
  overflow: hidden !important;
}
.marquee__viewport{
  display:flex !important;
  width:max-content !important;
  will-change: transform;
  animation: stormMarqueeStable 26s linear infinite !important;
}
.marquee__track{
  display:inline-flex !important;
  align-items:center;
  gap:36px !important;
  padding-right:36px !important;
  min-width:max-content !important;
  flex-shrink:0 !important;
}
@keyframes stormMarqueeStable{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(calc(-50% - 18px),0,0); }
}
@media (max-width: 880px){
  .marquee__track{
    gap:26px !important;
    padding-right:26px !important;
  }
  @keyframes stormMarqueeStable{
    from{ transform: translate3d(0,0,0); }
    to{ transform: translate3d(calc(-50% - 13px),0,0); }
  }
}


/* ===== v92 unify main panels + remove center glow + clean corner square ===== */

/* Make all main panels same tone */
.hero.mock-panel,
#prices.mock-panel,
#configs.mock-panel,
#contacts.mock-panel{
  background:
    radial-gradient(760px 300px at 18% 14%, rgba(0,229,255,.035), transparent 72%),
    radial-gradient(700px 280px at 82% 16%, rgba(45,125,255,.03), transparent 72%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.008) 0 1px, transparent 1px 48px),
    linear-gradient(180deg, #0a1118 0%, #091018 100%) !important;
}

/* Remove disliked central glow from top main block */
.hero.mock-panel::before{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='white' fill-opacity='.03'%3E%3Ccircle cx='8' cy='12' r='0.8'/%3E%3Ccircle cx='26' cy='48' r='0.7'/%3E%3Ccircle cx='44' cy='20' r='0.8'/%3E%3Ccircle cx='58' cy='76' r='0.8'/%3E%3Ccircle cx='78' cy='34' r='0.7'/%3E%3Ccircle cx='92' cy='14' r='0.9'/%3E%3Ccircle cx='102' cy='56' r='0.8'/%3E%3Ccircle cx='20' cy='98' r='0.8'/%3E%3Ccircle cx='70' cy='102' r='0.7'/%3E%3Ccircle cx='108' cy='96' r='0.8'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255,255,255,.010), transparent 18%, transparent 82%, rgba(255,255,255,.006)) !important;
  background-size: 140px 140px, auto !important;
  opacity: .9;
}
.hero.mock-panel::after{
  content:"";
  position:absolute;
  left:22px;
  right:22px;
  top:0;
  height:16px;
  background: linear-gradient(180deg, rgba(135,228,255,.10), rgba(135,228,255,.02) 48%, transparent 100%) !important;
  pointer-events:none;
  opacity:.75;
}

/* Same subtle texture for other main blocks */
#prices.mock-panel::before,
#configs.mock-panel::before,
#contacts.mock-panel::before{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='white' fill-opacity='.03'%3E%3Ccircle cx='8' cy='12' r='0.8'/%3E%3Ccircle cx='26' cy='48' r='0.7'/%3E%3Ccircle cx='44' cy='20' r='0.8'/%3E%3Ccircle cx='58' cy='76' r='0.8'/%3E%3Ccircle cx='78' cy='34' r='0.7'/%3E%3Ccircle cx='92' cy='14' r='0.9'/%3E%3Ccircle cx='102' cy='56' r='0.8'/%3E%3Ccircle cx='20' cy='98' r='0.8'/%3E%3Ccircle cx='70' cy='102' r='0.7'/%3E%3Ccircle cx='108' cy='96' r='0.8'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255,255,255,.010), transparent 18%, transparent 82%, rgba(255,255,255,.006)) !important;
  background-size: 140px 140px, auto !important;
  opacity: .9;
}
#prices.mock-panel::after,
#configs.mock-panel::after,
#contacts.mock-panel::after{
  content:"";
  position:absolute;
  left:22px;
  right:22px;
  top:0;
  height:16px;
  background: linear-gradient(180deg, rgba(135,228,255,.10), rgba(135,228,255,.02) 48%, transparent 100%) !important;
  pointer-events:none;
  opacity:.75;
}

/* Remove any dark underlay near bottom-right corners completely */
#prices.corner-br,
#configs.corner-br,
#contacts.corner-br{
  background-clip: padding-box;
}
#prices.corner-br::after,
#configs.corner-br::after,
#contacts.corner-br::after{
  content:"";
  position:absolute;
  right:0 !important;
  bottom:0 !important;
  left:auto !important;
  top:auto !important;
  width:40px !important;
  height:40px !important;
  border-right: 3px solid rgba(102,224,255,.96) !important;
  border-bottom: 3px solid rgba(102,224,255,.96) !important;
  border-bottom-right-radius: 14px !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  z-index: 5 !important;
}
#prices.corner-br::before,
#configs.corner-br::before,
#contacts.corner-br::before{
  content: none !important;
}

/* Ensure no inherited pseudo overlays create square in lower-right corner */
#prices.mock-panel > *,
#configs.mock-panel > *,
#contacts.mock-panel > *{
  position:relative;
  z-index:1;
}


/* ===== v93 top horizontal contour glow on main blocks ===== */
.hero.mock-panel,
#prices.mock-panel,
#configs.mock-panel,
#contacts.mock-panel{
  position: relative;
}
.hero.mock-panel > h2,
#prices.mock-panel > h2,
#configs.mock-panel > h2,
#contacts.mock-panel > h2{
  position: relative;
  z-index: 2;
}
.hero.mock-panel::marker,
#prices.mock-panel::marker,
#configs.mock-panel::marker,
#contacts.mock-panel::marker{
  content:"";
}
.hero.mock-panel .panel-topline,
#prices.mock-panel .panel-topline,
#configs.mock-panel .panel-topline,
#contacts.mock-panel .panel-topline{
  display:none;
}
.hero.mock-panel::selection,
#prices.mock-panel::selection,
#configs.mock-panel::selection,
#contacts.mock-panel::selection{
  background: rgba(0,229,255,.14);
}
.hero.mock-panel::before,
#prices.mock-panel::before,
#configs.mock-panel::before,
#contacts.mock-panel::before{
  box-shadow: none !important;
}
.hero.mock-panel::after,
#prices.mock-panel::after,
#configs.mock-panel::after,
#contacts.mock-panel::after{
  content:"";
  position:absolute;
  left:24px;
  right:24px;
  top:0;
  height:18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 70%),
    linear-gradient(90deg, transparent, rgba(120,228,255,.16), rgba(120,228,255,.26), rgba(120,228,255,.16), transparent);
  background-size: 100% 100%, 100% 2px;
  background-repeat:no-repeat;
  background-position: 0 0, center 0;
  pointer-events:none;
  opacity:.95;
  z-index: 2;
}


/* ===== v94 duplicate admin + unified corners ===== */

/* Make panel corner overlay draw above rounded border instead of sinking under it */
#prices.corner-br,
#configs.corner-br,
#contacts.corner-br{
  overflow: visible !important;
}
#prices.corner-br::after,
#configs.corner-br::after,
#contacts.corner-br::after{
  right: -3px !important;
  bottom: -3px !important;
  width: 42px !important;
  height: 42px !important;
  border-right: 3px solid rgba(102,224,255,.96) !important;
  border-bottom: 3px solid rgba(102,224,255,.96) !important;
  border-bottom-right-radius: 16px !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  z-index: 8 !important;
  pointer-events: none !important;
}

/* unify review/gallery/main small top-left corner style */
.rules-desktop.corner-anim,
.rules-mobile.corner-anim,
.gallery .corner-anim,
.gallery-page .corner-anim{
  overflow: hidden;
}
.rules-desktop.corner-anim .hero-corner,
.rules-mobile.corner-anim .hero-corner,
.corner-anim .hero-corner{
  animation:none !important;
  transition:none !important;
}
.rules-desktop.corner-anim .hero-corner--tl,
.rules-mobile.corner-anim .hero-corner--tl,
.corner-anim .hero-corner--tl{
  display:block !important;
  opacity:1 !important;
  left:-1px !important;
  top:-1px !important;
  width:72px !important;
  height:72px !important;
  border:none !important;
  background:
    linear-gradient(rgba(102,224,255,.96), rgba(102,224,255,.96)) 0 22px / 3px 42px no-repeat,
    linear-gradient(rgba(102,224,255,.96), rgba(102,224,255,.96)) 22px 0 / 42px 3px no-repeat,
    radial-gradient(42px 32px at 0 0, rgba(0,229,255,.16), transparent 72%) !important;
  filter: drop-shadow(0 0 8px rgba(0,229,255,.12));
  border-top-left-radius: 22px !important;
  z-index: 9 !important;
}
.rules-desktop.corner-anim .hero-corner--tr,
.rules-desktop.corner-anim .hero-corner--br,
.rules-desktop.corner-anim .hero-corner--bl,
.rules-mobile.corner-anim .hero-corner--tr,
.rules-mobile.corner-anim .hero-corner--br,
.rules-mobile.corner-anim .hero-corner--bl,
.corner-anim .hero-corner--tr,
.corner-anim .hero-corner--br,
.corner-anim .hero-corner--bl{
  display:none !important;
  opacity:0 !important;
}

/* ===== v97 home section-aware nav + numeric tariff price ===== */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"]{
  -moz-appearance: textfield;
}


/* ===== v98 hero title accent + active home section nav ===== */
.hero-title-accent{
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* ===== v99 unified page block colors + logo style ===== */
:root{
  --brand-grad: linear-gradient(180deg, #d7edf9 0%, #9dc8e8 38%, #679fd3 72%, #4478b8 100%);
}

/* Logo in header like mockup */
.brand{
  gap: 12px;
}
.brand__text{
  display:flex;
  flex-direction:column;
  line-height:1;
}
.brand__name{
  font-size: 22px !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
  background: var(--brand-grad) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color: transparent !important;
}
.brand__sub{
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: .18em;
  color: rgba(128,168,210,.72);
  font-weight: 700;
}
@media (max-width: 880px){
  .brand__name{
    font-size: 18px !important;
    letter-spacing: .12em !important;
  }
  .brand__sub{
    font-size: 9px;
    letter-spacing: .14em;
  }
}

/* Same "Шторм" color in main hero title */
.hero-title-accent{
  background: var(--brand-grad) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color: transparent !important;
}

/* Gallery/reviews top titles use same color tone */
.hero .h1 span[style*="background:var(--grad)"]{
  background: var(--brand-grad) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color: transparent !important;
}

/* Make gallery/reviews major sections use same palette as home */
.gallery .photo,
.review-card,
.rules-mobile .card,
.section.mock-panel,
.hero.mock-panel{
  background-color: #0a1118 !important;
}
.gallery .photo,
.review-card{
  border: 1px solid rgba(132,219,255,.10);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 12px 24px rgba(0,0,0,.18);
}
.gallery .photo__img{
  background:
    radial-gradient(260px 140px at 50% 40%, rgba(126,171,255,.06), transparent 66%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.006) 0 1px, transparent 1px 72px),
    linear-gradient(180deg, rgba(15,22,34,.74), rgba(9,13,20,.96)) !important;
}
.review-card,
.section.mock-panel,
.hero.mock-panel{
  background:
    radial-gradient(760px 300px at 18% 14%, rgba(0,229,255,.035), transparent 72%),
    radial-gradient(700px 280px at 82% 16%, rgba(45,125,255,.03), transparent 72%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.008) 0 1px, transparent 1px 48px),
    linear-gradient(180deg, #0a1118 0%, #091018 100%) !important;
}

/* unify sections spacing a bit */
.gallery .photo__cap{
  color: rgba(231,247,255,.86);
}


/* ===== v100 nav mockup + unified photos block + turquoise brand ===== */
:root{
  --brand-grad: linear-gradient(180deg, #d5f7fb 0%, #93f0ef 32%, #4fd7da 68%, #21aeb8 100%);
}

/* More turquoise 'ШТОРМ' */
.brand__name,
.hero-title-accent,
.hero .h1 span[style*="background:var(--grad)"]{
  background: var(--brand-grad) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color: transparent !important;
}
.brand__sub{
  color: rgba(117, 186, 197, .78) !important;
}

/* Desktop nav like mockup: top and bottom faded lines */
@media (min-width: 881px){
  .nav--desktop{
    position: relative;
    gap: 10px !important;
    padding: 9px 18px 11px;
    align-items:center;
  }
  .nav--desktop::before,
  .nav--desktop::after{
    content:"";
    position:absolute;
    left: 8px;
    right: 8px;
    height: 1px;
    pointer-events:none;
    background: linear-gradient(90deg, transparent, rgba(120,228,255,.10) 14%, rgba(120,228,255,.22) 50%, rgba(120,228,255,.10) 86%, transparent);
  }
  .nav--desktop::before{ top: 0; }
  .nav--desktop::after{ bottom: 0; }

  .nav--desktop a{
    position: relative;
    padding: 10px 12px 12px !important;
    border-radius: 12px;
    color: rgba(221,241,247,.84);
    background: transparent !important;
  }

  .nav--desktop a::before,
  .nav--desktop a::after{
    content:"";
    position:absolute;
    left: 12px;
    right: 12px;
    height: 2px;
    border-radius: 999px;
    opacity: 0;
    transition: opacity .18s ease, transform .18s ease;
    transform: scaleX(.65);
    background: linear-gradient(90deg, transparent, rgba(91,228,242,.95), transparent);
  }
  .nav--desktop a::before{ top: -10px; }
  .nav--desktop a::after{ bottom: -11px; }

  .nav--desktop a:hover,
  .nav--desktop a.is-active{
    color: var(--text) !important;
  }
  .nav--desktop a:hover::before,
  .nav--desktop a:hover::after,
  .nav--desktop a.is-active::before,
  .nav--desktop a.is-active::after{
    opacity: 1;
    transform: scaleX(1);
    box-shadow: 0 0 10px rgba(91,228,242,.18);
  }
}

/* Home photos block same color system as main blocks */
#photos.mock-panel{
  background:
    radial-gradient(760px 300px at 18% 14%, rgba(0,229,255,.035), transparent 72%),
    radial-gradient(700px 280px at 82% 16%, rgba(45,125,255,.03), transparent 72%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.008) 0 1px, transparent 1px 48px),
    linear-gradient(180deg, #0a1118 0%, #091018 100%) !important;
}
#photos.mock-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='white' fill-opacity='.03'%3E%3Ccircle cx='8' cy='12' r='0.8'/%3E%3Ccircle cx='26' cy='48' r='0.7'/%3E%3Ccircle cx='44' cy='20' r='0.8'/%3E%3Ccircle cx='58' cy='76' r='0.8'/%3E%3Ccircle cx='78' cy='34' r='0.7'/%3E%3Ccircle cx='92' cy='14' r='0.9'/%3E%3Ccircle cx='102' cy='56' r='0.8'/%3E%3Ccircle cx='20' cy='98' r='0.8'/%3E%3Ccircle cx='70' cy='102' r='0.7'/%3E%3Ccircle cx='108' cy='96' r='0.8'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255,255,255,.010), transparent 18%, transparent 82%, rgba(255,255,255,.006));
  background-size: 140px 140px, auto;
  opacity: .9;
}
#photos.mock-panel .photo{
  background:
    radial-gradient(300px 160px at 50% 48%, rgba(126,171,255,.035), transparent 66%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.006) 0 1px, transparent 1px 72px),
    linear-gradient(180deg, rgba(9,14,22,.92), rgba(7,10,16,.98)) !important;
  border: 1px solid rgba(132,219,255,.10) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 12px 24px rgba(0,0,0,.18);
}
#photos.mock-panel .photo__img{
  background:
    radial-gradient(260px 140px at 50% 40%, rgba(126,171,255,.06), transparent 66%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.006) 0 1px, transparent 1px 72px),
    linear-gradient(180deg, rgba(15,22,34,.74), rgba(9,13,20,.96)) !important;
}

/* Slightly cleaner topbar brand proportions */
.brand__name{
  font-size: 23px !important;
  letter-spacing: .18em !important;
}
.brand__sub{
  font-size: 10px !important;
  letter-spacing: .18em !important;
}


/* ===== v101 remove header admin + cyan storm + normal rules spacing ===== */
:root{
  --brand-grad: linear-gradient(180deg, #c9fbff 0%, #8ff2ff 34%, #47dfff 70%, #12bfe8 100%);
}

/* Match 'ШТОРМ' more closely to marquee cyan */
.brand__name,
.hero-title-accent,
.hero .h1 span[style*="background:var(--grad)"]{
  background: var(--brand-grad) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color: transparent !important;
  text-shadow: none !important;
}

/* Reviews rules block: same spacing/alignment as regular side cards */
.rules-desktop{
  padding: 18px !important;
}
.rules-desktop h2,
.rules-mobile h2{
  margin: 0 0 10px !important;
  padding: 0 !important;
  position: static !important;
  top: auto !important;
}
.rules-desktop .help,
.rules-mobile .card{
  margin: 0 !important;
  padding: 0 !important;
}
@media (min-width: 881px){
  .rules-desktop h2{
    padding-left: 0 !important;
  }
}


/* ===== v102 remove header admin + texture on main big blocks ===== */

/* Main large blocks get transparent texture layer */
.hero.mock-panel,
#prices.mock-panel,
#configs.mock-panel,
#contacts.mock-panel,
#photos.mock-panel,
.gallery.php .section.mock-panel,
.reviews.php .section.mock-panel{
  background-image:
    linear-gradient(rgba(255,255,255,.00), rgba(255,255,255,.00)),
        radial-gradient(760px 300px at 18% 14%, rgba(0,229,255,.035), transparent 72%),
    radial-gradient(700px 280px at 82% 16%, rgba(45,125,255,.03), transparent 72%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.008) 0 1px, transparent 1px 48px),
    linear-gradient(180deg, #0a1118 0%, #091018 100%) !important;
  background-size:
    100% 100%,
    cover,
    auto,
    auto,
    auto,
    auto !important;
  background-position:
    center center,
    center center,
    center center,
    center center,
    center center,
    center center !important;
  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    repeat,
    no-repeat !important;
  background-blend-mode:
    normal,
    soft-light,
    normal,
    normal,
    normal,
    normal !important;
}

/* Slightly lower texture on cards inside large blocks so it stays subtle */
.hero.mock-panel::before,
#prices.mock-panel::before,
#configs.mock-panel::before,
#contacts.mock-panel::before,
#photos.mock-panel::before{
  opacity: .55 !important;
}

/* ===== v105 corners from v104 on v102 base ===== */
#prices.corner-br,
#configs.corner-br,
#contacts.corner-br{
  overflow: visible !important;
  border-bottom-right-radius: 28px !important;
  isolation: isolate;
}

#prices.corner-br > *,
#configs.corner-br > *,
#contacts.corner-br > *{
  position: relative;
  z-index: 1;
}

#prices.corner-br::before,
#configs.corner-br::before,
#contacts.corner-br::before{
  content: "" !important;
  position: absolute !important;
  right: -2px !important;
  bottom: -2px !important;
  width: 120px !important;
  height: 120px !important;
  border: 0 !important;
  background:
    radial-gradient(110px 110px at 100% 100%,
      rgba(116,232,255,.18) 0%,
      rgba(116,232,255,.10) 14%,
      rgba(116,232,255,.05) 28%,
      rgba(116,232,255,.022) 44%,
      rgba(116,232,255,.008) 58%,
      transparent 76%) !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: none !important;
  z-index: 7 !important;
  -webkit-mask-image: radial-gradient(110px 110px at 100% 100%,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,.78) 20%,
      rgba(0,0,0,.35) 46%,
      rgba(0,0,0,0) 78%);
  mask-image: radial-gradient(110px 110px at 100% 100%,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,.78) 20%,
      rgba(0,0,0,.35) 46%,
      rgba(0,0,0,0) 78%);
}

#prices.corner-br::after,
#configs.corner-br::after,
#contacts.corner-br::after{
  content: "" !important;
  position: absolute !important;
  right: -2px !important;
  bottom: -2px !important;
  left: auto !important;
  top: auto !important;
  width: 58px !important;
  height: 58px !important;
  border-right: 3px solid rgba(116,232,255,.96) !important;
  border-bottom: 3px solid rgba(116,232,255,.96) !important;
  border-bottom-right-radius: 28px !important;
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  pointer-events: none !important;
  z-index: 8 !important;
  -webkit-mask-image: radial-gradient(84px 84px at 100% 100%,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,.95) 16%,
      rgba(0,0,0,.72) 34%,
      rgba(0,0,0,.34) 52%,
      rgba(0,0,0,.08) 66%,
      rgba(0,0,0,0) 78%);
  mask-image: radial-gradient(84px 84px at 100% 100%,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,.95) 16%,
      rgba(0,0,0,.72) 34%,
      rgba(0,0,0,.34) 52%,
      rgba(0,0,0,.08) 66%,
      rgba(0,0,0,0) 78%);
}


/* ===== v106: smaller corners, no texture, grayer panels, metallic buttons ===== */

/* Remove texture from big main panels */
.hero.mock-panel,
#prices.mock-panel,
#configs.mock-panel,
#contacts.mock-panel,
#photos.mock-panel{
  background-image:
    radial-gradient(760px 300px at 18% 14%, rgba(0,229,255,.028), transparent 72%),
    radial-gradient(700px 280px at 82% 16%, rgba(45,125,255,.024), transparent 72%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.008) 0 1px, transparent 1px 52px),
    linear-gradient(180deg, #0d1219 0%, #0b1118 100%) !important;
  background-size: auto, auto, auto, auto !important;
  background-position: center center, center center, center center, center center !important;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat !important;
  background-blend-mode: normal, normal, normal, normal !important;
  box-shadow:
    inset 0 1px 0 rgba(235,245,255,.05),
    inset 0 -1px 0 rgba(255,255,255,.012),
    0 18px 46px rgba(0,0,0,.48) !important;
}

/* Add a little gray + subtle noise to main blocks */
.hero.mock-panel::before,
#prices.mock-panel::before,
#configs.mock-panel::before,
#contacts.mock-panel::before,
#photos.mock-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(260px 180px at 48% 30%, rgba(255,255,255,.014), transparent 74%),
    radial-gradient(220px 160px at 60% 74%, rgba(255,255,255,.010), transparent 76%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='white' fill-opacity='.026'%3E%3Ccircle cx='8' cy='12' r='0.8'/%3E%3Ccircle cx='26' cy='48' r='0.7'/%3E%3Ccircle cx='44' cy='20' r='0.8'/%3E%3Ccircle cx='58' cy='76' r='0.8'/%3E%3Ccircle cx='78' cy='34' r='0.7'/%3E%3Ccircle cx='92' cy='14' r='0.9'/%3E%3Ccircle cx='102' cy='56' r='0.8'/%3E%3Ccircle cx='20' cy='98' r='0.8'/%3E%3Ccircle cx='70' cy='102' r='0.7'/%3E%3Ccircle cx='108' cy='96' r='0.8'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255,255,255,.012), transparent 18%, transparent 82%, rgba(255,255,255,.006)) !important;
  background-size: auto, auto, 140px 140px, auto !important;
  opacity: .68 !important;
  z-index: 0;
}
.hero.mock-panel > *,
#prices.mock-panel > *,
#configs.mock-panel > *,
#contacts.mock-panel > *,
#photos.mock-panel > *{
  position: relative;
  z-index: 1;
}

/* Slightly smaller corners but same shape feeling */
#prices.corner-br,
#configs.corner-br,
#contacts.corner-br{
  overflow: visible !important;
  border-bottom-right-radius: 28px !important;
  isolation: isolate;
}
#prices.corner-br::before,
#configs.corner-br::before,
#contacts.corner-br::before{
  content: "" !important;
  position: absolute !important;
  right: -1px !important;
  bottom: -1px !important;
  width: 96px !important;
  height: 96px !important;
  background:
    radial-gradient(88px 88px at 100% 100%,
      rgba(116,232,255,.14) 0%,
      rgba(116,232,255,.08) 16%,
      rgba(116,232,255,.036) 32%,
      rgba(116,232,255,.014) 48%,
      transparent 70%) !important;
  -webkit-mask-image: radial-gradient(88px 88px at 100% 100%,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,.74) 22%,
      rgba(0,0,0,.28) 48%,
      rgba(0,0,0,0) 76%);
  mask-image: radial-gradient(88px 88px at 100% 100%,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,.74) 22%,
      rgba(0,0,0,.28) 48%,
      rgba(0,0,0,0) 76%);
  box-shadow: none !important;
  filter: none !important;
  pointer-events: none !important;
  z-index: 7 !important;
}
#prices.corner-br::after,
#configs.corner-br::after,
#contacts.corner-br::after{
  content: "" !important;
  position: absolute !important;
  right: -1px !important;
  bottom: -1px !important;
  width: 46px !important;
  height: 46px !important;
  border-right: 3px solid rgba(116,232,255,.94) !important;
  border-bottom: 3px solid rgba(116,232,255,.94) !important;
  border-bottom-right-radius: 28px !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
  z-index: 8 !important;
  -webkit-mask-image: radial-gradient(66px 66px at 100% 100%,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,.92) 18%,
      rgba(0,0,0,.64) 38%,
      rgba(0,0,0,.24) 58%,
      rgba(0,0,0,0) 76%);
  mask-image: radial-gradient(66px 66px at 100% 100%,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,.92) 18%,
      rgba(0,0,0,.64) 38%,
      rgba(0,0,0,.24) 58%,
      rgba(0,0,0,0) 76%);
}

/* Metallic bright buttons closer to mockup */
.btn{
  position: relative;
  overflow: hidden;
  border-radius: 16px !important;
  padding: 11px 18px !important;
  border: 1px solid rgba(175,205,225,.28) !important;
  background:
    linear-gradient(180deg, rgba(84,100,117,.62) 0%, rgba(47,58,71,.72) 55%, rgba(23,29,38,.82) 100%) !important;
  color: #eef7ff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 10px 20px rgba(0,0,0,.24),
    0 0 0 1px rgba(255,255,255,.02) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 38%),
    radial-gradient(120px 22px at 50% 0%, rgba(230,245,255,.22), transparent 68%);
  pointer-events:none;
}
.btn::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background:
    linear-gradient(90deg, transparent, rgba(116,232,255,.12), rgba(116,232,255,.22), rgba(116,232,255,.12), transparent) top center / calc(100% - 22px) 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(116,232,255,.14), rgba(116,232,255,.26), rgba(116,232,255,.14), transparent) bottom center / calc(100% - 22px) 1px no-repeat;
  opacity:.95;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.26),
    0 12px 24px rgba(0,0,0,.28),
    0 0 14px rgba(116,232,255,.06) !important;
}
.btn--primary{
  border-color: rgba(136,214,240,.34) !important;
  background:
    linear-gradient(180deg, rgba(102,128,148,.70) 0%, rgba(56,72,87,.78) 54%, rgba(24,31,41,.86) 100%) !important;
}
.btn--ghost{
  background:
    linear-gradient(180deg, rgba(70,84,98,.44) 0%, rgba(37,47,58,.56) 60%, rgba(20,26,34,.72) 100%) !important;
}


/* ===== v107 buttons: only primary/accent buttons redesigned ===== */

/* Restore regular buttons closer to previous simple style */
.btn{
  position: relative;
  overflow: hidden;
  border-radius: 14px !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.03) !important;
  color: var(--text) !important;
  font-weight: 700;
  text-shadow: none !important;
  box-shadow: none !important;
  transform: none !important;
}
.btn::before,
.btn::after{
  content: none !important;
}
.btn:hover{
  transform: none !important;
  box-shadow: none !important;
  border-color: rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.04) !important;
}

/* Only accent/green buttons get the "mockup" treatment */
.btn--primary,
.btn--cta{
  border-radius: 13px !important;
  border: 1px solid rgba(124, 211, 245, .50) !important;
  background:
    linear-gradient(180deg, rgba(90,120,145,.74) 0%, rgba(58,76,94,.82) 52%, rgba(28,36,48,.92) 100%) !important;
  color: #f2fbff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.35) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 0 0 1px rgba(124, 211, 245, .08),
    0 10px 24px rgba(0,0,0,.22),
    0 0 18px rgba(74,196,235,.08) !important;
}
.btn--primary::before,
.btn--cta::before{
  content:"" !important;
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,0) 38%),
    radial-gradient(140px 22px at 50% 0%, rgba(228,245,255,.24), transparent 68%);
}
.btn--primary::after,
.btn--cta::after{
  content:"" !important;
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background:
    linear-gradient(90deg, transparent, rgba(113,221,248,.10), rgba(113,221,248,.20), rgba(113,221,248,.10), transparent) top center / calc(100% - 24px) 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(113,221,248,.12), rgba(113,221,248,.24), rgba(113,221,248,.12), transparent) bottom center / calc(100% - 24px) 1px no-repeat;
  opacity: .95;
}
.btn--primary:hover,
.btn--cta:hover{
  border-color: rgba(146, 223, 250, .62) !important;
  background:
    linear-gradient(180deg, rgba(98,132,160,.80) 0%, rgba(63,83,103,.86) 52%, rgba(30,40,53,.94) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 0 0 1px rgba(124, 211, 245, .10),
    0 12px 26px rgba(0,0,0,.24),
    0 0 22px rgba(74,196,235,.10) !important;
}

/* Booking button a bit larger like screenshot */
.btn--cta{
  padding: 12px 20px !important;
  min-height: 48px;
  letter-spacing: .04em;
}


/* ===== v108 refine primary buttons + photos border + thinner corners ===== */

/* Primary buttons closer to screenshot */
.btn--primary,
.btn--cta{
  border-radius: 11px !important;
  border: 1px solid rgba(126, 201, 230, .58) !important;
  background:
    linear-gradient(180deg, rgba(92,119,144,.88) 0%, rgba(63,81,99,.86) 46%, rgba(36,48,61,.94) 100%) !important;
  color: #f4fbff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 0 0 1px rgba(126, 201, 230, .10),
    0 8px 18px rgba(0,0,0,.18),
    0 8px 16px rgba(74,196,235,.05) !important;
}
.btn--primary::before,
.btn--cta::before{
  content:"" !important;
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 42%),
    radial-gradient(180px 24px at 50% 0%, rgba(235,247,255,.18), transparent 70%);
}
.btn--primary::after,
.btn--cta::after{
  content:"" !important;
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background:
    linear-gradient(90deg, transparent, rgba(118,220,248,.10), rgba(118,220,248,.22), rgba(118,220,248,.10), transparent) top center / calc(100% - 24px) 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(118,220,248,.18), rgba(118,220,248,.34), rgba(118,220,248,.18), transparent) bottom center / calc(100% - 24px) 1px no-repeat;
  opacity: .95;
}
.btn--primary:hover,
.btn--cta:hover{
  border-color: rgba(147, 220, 246, .68) !important;
  background:
    linear-gradient(180deg, rgba(100,130,156,.90) 0%, rgba(69,90,110,.88) 46%, rgba(39,52,66,.96) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 0 0 1px rgba(126, 201, 230, .12),
    0 9px 20px rgba(0,0,0,.20),
    0 0 14px rgba(74,196,235,.08) !important;
}
.btn--cta{
  padding: 12px 20px !important;
  min-height: 48px;
  letter-spacing: .04em;
}

/* Restore neat photo card borders on homepage */
#photos.mock-panel .photo{
  border: 1px solid rgba(132,219,255,.11) !important;
  border-radius: 18px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 10px 20px rgba(0,0,0,.16) !important;
  overflow: hidden;
}
#photos.mock-panel .photo__cap{
  border-top: 1px solid rgba(132,219,255,.09) !important;
}
#photos.mock-panel .gallery{
  gap: 16px !important;
}

/* Slightly thinner corners */
#prices.corner-br::after,
#configs.corner-br::after,
#contacts.corner-br::after{
  border-right-width: 2px !important;
  border-bottom-width: 2px !important;
}


/* ===== v109 final buttons + photos + nav tracking ===== */

/* More square + more cyan primary buttons */
.btn--primary{
  border-radius: 9px !important;
  padding: 10px 18px !important;
  border: 1px solid rgba(111, 214, 248, .62) !important;
  background:
    linear-gradient(180deg, rgba(76,112,142,.90) 0%, rgba(48,74,95,.92) 50%, rgba(24,38,52,.98) 100%) !important;
  color: #eefbff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.30) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 0 0 1px rgba(111,214,248,.08),
    0 8px 18px rgba(0,0,0,.16),
    0 0 16px rgba(74,196,235,.08) !important;
}
.btn--primary::before{
  content:"" !important;
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 40%),
    radial-gradient(180px 24px at 50% 0%, rgba(229,247,255,.16), transparent 72%);
}
.btn--primary::after{
  content:"" !important;
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background:
    linear-gradient(90deg, transparent, rgba(117,223,250,.12), rgba(117,223,250,.28), rgba(117,223,250,.12), transparent) top center / calc(100% - 20px) 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(117,223,250,.18), rgba(117,223,250,.38), rgba(117,223,250,.18), transparent) bottom center / calc(100% - 20px) 1px no-repeat;
  opacity: .95;
}
.btn--primary:hover{
  border-color: rgba(147, 226, 250, .74) !important;
  background:
    linear-gradient(180deg, rgba(86,124,156,.94) 0%, rgba(55,82,106,.96) 50%, rgba(27,42,56,1) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(0,0,0,.16),
    0 0 0 1px rgba(111,214,248,.10),
    0 10px 20px rgba(0,0,0,.18),
    0 0 18px rgba(74,196,235,.10) !important;
}

/* Homepage photos block border/highlight repaired */
#photos.mock-panel .gallery{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px !important;
}
@media (max-width: 880px){
  #photos.mock-panel .gallery{
    grid-template-columns: 1fr;
  }
}
#photos.mock-panel .photo{
  border: 1px solid rgba(126, 208, 238, .14) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background:
    radial-gradient(300px 160px at 50% 48%, rgba(126,171,255,.035), transparent 66%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.006) 0 1px, transparent 1px 72px),
    linear-gradient(180deg, rgba(9,14,22,.92), rgba(7,10,16,.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 10px 20px rgba(0,0,0,.16) !important;
}
#photos.mock-panel .photo:hover{
  border-color: rgba(126, 208, 238, .26) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.028),
    0 12px 24px rgba(0,0,0,.18),
    0 0 0 1px rgba(126, 208, 238, .05) !important;
}
#photos.mock-panel .photo__img{
  display:block;
  border-bottom: 1px solid rgba(126, 208, 238, .08) !important;
}
#photos.mock-panel .photo__cap{
  border-top: 0 !important;
  color: rgba(231,247,255,.84) !important;
}

/* Stronger active state visibility in top nav */
@media (min-width: 881px){
  .nav--desktop a.is-active{
    color: #f0fbff !important;
  }
  .nav--desktop a.is-active::before,
  .nav--desktop a.is-active::after{
    opacity: 1 !important;
    transform: scaleX(1) !important;
  }
}


/* ===== v110 final overrides ===== */

/* Primary buttons: more square and more cyan */
.btn--primary{
  border-radius: 8px !important;
  padding: 10px 18px !important;
  border: 1px solid rgba(107, 214, 255, .64) !important;
  background:
    linear-gradient(180deg, rgba(78,125,164,.92) 0%, rgba(47,92,128,.94) 52%, rgba(24,55,82,.98) 100%) !important;
  color: #eefcff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.15),
    0 0 0 1px rgba(107,214,255,.08),
    0 8px 18px rgba(0,0,0,.14),
    0 0 16px rgba(73,200,255,.10) !important;
}
.btn--primary::before{
  content:"" !important;
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 42%),
    radial-gradient(180px 24px at 50% 0%, rgba(229,247,255,.18), transparent 72%);
}
.btn--primary::after{
  content:"" !important;
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background:
    linear-gradient(90deg, transparent, rgba(107,214,255,.14), rgba(107,214,255,.28), rgba(107,214,255,.14), transparent) top center / calc(100% - 18px) 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(107,214,255,.18), rgba(107,214,255,.38), rgba(107,214,255,.18), transparent) bottom center / calc(100% - 18px) 1px no-repeat;
}
.btn--primary:hover{
  border-color: rgba(143, 227, 255, .74) !important;
  background:
    linear-gradient(180deg, rgba(88,136,178,.94) 0%, rgba(54,102,140,.96) 52%, rgba(28,62,91,1) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 0 0 1px rgba(107,214,255,.10),
    0 10px 20px rgba(0,0,0,.16),
    0 0 20px rgba(73,200,255,.12) !important;
}

/* Homepage photos use same border language as other cards */
#photos.mock-panel .photo{
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background:
    radial-gradient(300px 160px at 50% 48%, rgba(126,171,255,.035), transparent 66%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.006) 0 1px, transparent 1px 72px),
    linear-gradient(180deg, rgba(9,14,22,.92), rgba(7,10,16,.98)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 12px 24px rgba(0,0,0,.18) !important;
}
#photos.mock-panel .photo__cap{
  border-top: 1px solid rgba(255,255,255,.06) !important;
}
#photos.mock-panel .photo:hover{
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 12px 24px rgba(0,0,0,.18) !important;
}

/* Longer corners without thicker line */
#prices.corner-br::after,
#configs.corner-br::after,
#contacts.corner-br::after{
  width: 56px !important;
  height: 56px !important;
  border-right-width: 2px !important;
  border-bottom-width: 2px !important;
}
#prices.corner-br::before,
#configs.corner-br::before,
#contacts.corner-br::before{
  width: 112px !important;
  height: 112px !important;
}

/* Strong active nav state on desktop */
@media (min-width: 881px){
  .nav--desktop a.is-active{
    color: #eefcff !important;
  }
  .nav--desktop a.is-active::before,
  .nav--desktop a.is-active::after{
    opacity: 1 !important;
    transform: scaleX(1) !important;
    box-shadow: 0 0 10px rgba(107,214,255,.16) !important;
  }
}


/* ===== v111 photos border + thinner corners ===== */
#photos.mock-panel .photo{
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.02) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 12px 24px rgba(0,0,0,.18) !important;
}
#photos.mock-panel .photo__img{
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
#photos.mock-panel .photo__cap{
  border-top: 0 !important;
  color: var(--text) !important;
}

#prices.corner-br::after,
#configs.corner-br::after,
#contacts.corner-br::after{
  border-right-width: 1.5px !important;
  border-bottom-width: 1.5px !important;
}


/* ===== v113 gallery db-driven images ===== */
.photo__img--real{
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}


/* ===== v114 gallery images + lightbox + homepage photo border + anchor offset ===== */

/* Real images in gallery */
.photo--clickable{
  display:block;
  width:100%;
  text-align:left;
  cursor:pointer;
  padding:0;
  color:inherit;
  font:inherit;
}
.photo__img--real{
  position: relative;
  overflow: hidden;
}
.photo__img--real img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.photo--clickable:hover{
  opacity:1;
}

/* Lightbox */
body.lightbox-open{
  overflow:hidden;
}
.lightbox[hidden]{
  display:none !important;
}
.lightbox{
  position:fixed;
  inset:0;
  z-index:2000;
}
.lightbox__backdrop{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(4,7,12,.82);
  cursor:pointer;
}
.lightbox__dialog{
  position:relative;
  z-index:1;
  width:min(92vw, 1100px);
  max-height:88vh;
  margin:6vh auto;
  padding:14px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  background:linear-gradient(180deg, rgba(12,15,24,.96), rgba(10,12,19,.94));
  box-shadow:0 20px 60px rgba(0,0,0,.55);
}
.lightbox__img{
  display:block;
  width:100%;
  max-height:74vh;
  object-fit:contain;
  border-radius:14px;
  background:#0a1016;
}
.lightbox__cap{
  margin-top:10px;
  color:var(--muted);
}
.lightbox__close{
  position:absolute;
  top:10px;
  right:10px;
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
}

/* Homepage photos: same border style and visible hover */
#photos.mock-panel .photo{
  border: 1px solid var(--line) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.02) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.35) !important;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease !important;
}
#photos.mock-panel .photo:hover{
  border-color: rgba(0,229,255,.55) !important;
  box-shadow: 0 0 0 4px rgba(0,229,255,.10), 0 16px 40px rgba(0,0,0,.45) !important;
  transform: translateY(-1px);
}
#photos.mock-panel .photo__cap{
  border-top:1px solid rgba(255,255,255,.06) !important;
}

/* Anchor offset under sticky header */
html{
  scroll-padding-top: 112px;
}
#about,
#prices,
#configs,
#contacts,
#photos{
  scroll-margin-top: 112px;
}
@media (max-width: 880px){
  html{
    scroll-padding-top: 88px;
  }
  #about,
  #prices,
  #configs,
  #contacts,
  #photos{
    scroll-margin-top: 88px;
  }
}


/* ===== v115 gallery FAQ + side art ===== */
@media (min-width: 1320px){
  .side-art{
    position:fixed;
    top:110px;
    bottom:36px;
    width:min(34vw, 520px);
    pointer-events:none;
    z-index:0;
    opacity:.18;
    background-image:url('/assets/img/gaming-side-art.png');
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center bottom;
    filter: drop-shadow(0 0 18px rgba(0,229,255,.06));
  }
  .side-art--left{
    left:-80px;
  }
  .side-art--right{
    right:-80px;
    transform:scaleX(-1);
  }
  .container{
    position:relative;
    z-index:1;
  }
}

.faq-block{
  margin-top:18px;
}
.faq-list{
  display:grid;
  gap:12px;
}
.faq-item{
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.02);
  overflow:hidden;
}
.faq-item__q{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px;
  border:0;
  background:transparent;
  color:var(--text);
  font:inherit;
  font-weight:800;
  text-align:left;
  cursor:pointer;
}
.faq-item__plus{
  color:var(--cyan);
  font-size:24px;
  line-height:1;
  transition:transform .18s ease;
}
.faq-item__a{
  display:none;
  padding:0 18px 16px;
}
.faq-item.is-open .faq-item__a{
  display:block;
}
.faq-item.is-open .faq-item__plus{
  transform:rotate(45deg);
}


/* ===== v116 footer solid + single bigger side art ===== */
@media (min-width: 1280px){
  .side-art-single{
    position:fixed;
    right:-80px;
    bottom:0;
    width:min(44vw, 760px);
    height:min(82vh, 1180px);
    pointer-events:none;
    z-index:0;
    opacity:.22;
    background-image:url('/assets/img/gaming-hero-art.png');
    background-repeat:no-repeat;
    background-size:contain;
    background-position:right bottom;
    filter: drop-shadow(0 0 20px rgba(0,229,255,.08));
  }
  .container{
    position:relative;
    z-index:1;
  }
}
@media (max-width: 1279px){
  .side-art-single{ display:none; }
}


/* ===== v117 menu spacing + two characters + dynamic socials ===== */
@media (min-width: 881px){
  .nav--desktop{
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }
  .nav--desktop a{
    font-size: 13px !important;
    white-space: nowrap;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

.footer__social{
  display:flex;
  gap:10px;
  align-items:center;
}
.footer__social:empty{
  display:none;
}

.side-art-single{
  display:none !important;
}
@media (min-width: 1280px){
  .side-art{
    position:fixed;
    bottom:0;
    width:min(38vw, 660px);
    height:min(84vh, 1150px);
    pointer-events:none;
    z-index:0;
    opacity:.22;
    background-repeat:no-repeat;
    background-size:contain;
    filter: drop-shadow(0 0 20px rgba(0,229,255,.08));
  }
  .side-art--left{
    left:-90px;
    background-image:url('/assets/img/gaming-hero-art-left.png');
    background-position:left bottom;
    opacity:.18;
  }
  .side-art--right{
    right:-90px;
    background-image:url('/assets/img/gaming-hero-art-right.png');
    background-position:right bottom;
    opacity:.22;
  }
  .container{
    position:relative;
    z-index:1;
  }
}
@media (max-width: 1279px){
  .side-art{display:none;}
}

/* Home photos with real img */
#photos.mock-panel .photo__img--real{
  overflow:hidden;
}
#photos.mock-panel .photo__img--real img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

#faq{
  scroll-margin-top: 112px;
}
@media (max-width: 880px){
  #faq{
    scroll-margin-top: 88px;
  }
}


/* ===== v118 character positioning fix ===== */
@media (min-width: 1280px){
  /* Return right character to the better previous position */
  .side-art--right{
    right: -80px !important;
    bottom: 0 !important;
    width: min(44vw, 760px) !important;
    height: min(82vh, 1180px) !important;
    background-position: right bottom !important;
    opacity: .22 !important;
  }

  /* Drop left character lower to hide seam at the bottom */
  .side-art--left{
    left: -90px !important;
    bottom: -70px !important;
    width: min(38vw, 660px) !important;
    height: min(88vh, 1220px) !important;
    background-position: left bottom !important;
    opacity: .18 !important;
  }
}


/* ===== v119 character positioning fix 2 ===== */
@media (min-width: 1280px){
  /* Move right character further to the right */
  .side-art--right{
    right: -145px !important;
    bottom: 0 !important;
    width: min(44vw, 760px) !important;
    height: min(82vh, 1180px) !important;
    background-position: right bottom !important;
    opacity: .22 !important;
  }

  /* Push left character much lower */
  .side-art--left{
    left: -90px !important;
    bottom: -180px !important;
    width: min(38vw, 660px) !important;
    height: min(92vh, 1280px) !important;
    background-position: left bottom !important;
    opacity: .18 !important;
  }
}


/* ===== v120 character positioning fix 3 ===== */
@media (min-width: 1280px){
  .side-art--right{
    right: -240px !important;
    bottom: 0 !important;
    width: min(44vw, 760px) !important;
    height: min(82vh, 1180px) !important;
    background-position: right bottom !important;
    opacity: .22 !important;
  }

  .side-art--left{
    left: -90px !important;
    bottom: -320px !important;
    width: min(38vw, 660px) !important;
    height: min(98vh, 1380px) !important;
    background-position: left bottom !important;
    opacity: .18 !important;
  }
}


/* ===== v121 character positioning fix 4 ===== */
@media (min-width: 1280px){
  .side-art--right{
    right: -340px !important;
    bottom: 0 !important;
  }

  .side-art--left{
    left: -170px !important;
    bottom: -460px !important;
  }
}


/* ===== v122 character positioning fix 5 ===== */
@media (min-width: 1280px){
  .side-art--right{
    right: -390px !important;
  }

  .side-art--left{
    bottom: -540px !important;
  }
}


/* ===== v123 character positioning fix 6 ===== */
@media (min-width: 1280px){
  .side-art--right{
    right: -355px !important;
  }

  .side-art--left{
    bottom: -700px !important;
  }
}


/* ===== v124 character positioning fix 7 ===== */
@media (min-width: 1280px){
  .side-art--right{
    bottom: -140px !important;
  }

  .side-art--left{
    bottom: -900px !important;
  }
}


/* ===== v125 left character much lower ===== */
@media (min-width: 1280px){
  .side-art--left{
    bottom: -1250px !important;
  }
}


/* ===== v126 remove left character + contacts-only corners + FAQ before photos ===== */
.side-art--left{
  display: none !important;
}


/* ===== v127 reviews yandex + mobile layout fixes ===== */
.yandex-reviews__card{
  max-width: 680px;
}

/* Make section titles normal on mobile, no vertical break */
.section h2,
.hero__card h2,
.rules-mobile h2{
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.section-ico{
  flex: 0 0 auto;
}

@media (max-width: 880px){
  /* Address/phone cards stack, so text no longer breaks vertically */
  .kv{
    grid-template-columns: 1fr !important;
  }
  .kv .item,
  .kv .v,
  .kv a{
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* Main section titles stay horizontal and readable */
  .section h2{
    font-size: 20px !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
  }

  /* Hero buttons should stay horizontal */
  .hero-actions{
    display:flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap:10px !important;
  }
  .hero-actions .btn{
    width: auto !important;
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
  }
}

@media (max-width: 520px){
  .section h2{
    font-size: 18px !important;
  }
  .kv .item{
    min-width: 0;
  }
}


/* ===== v128 yandex reviews widget ===== */
.yandex-reviews__widget-wrap{
  display:flex;
  justify-content:center;
}
.yandex-reviews__widget{
  width:min(100%, 560px);
  height:800px;
  overflow:hidden;
  position:relative;
  border-radius:12px;
}
.yandex-reviews__iframe{
  width:100%;
  height:100%;
  border:1px solid #e6e6e6;
  border-radius:8px;
  box-sizing:border-box;
  background:#fff;
}
.yandex-reviews__link{
  box-sizing:border-box;
  text-decoration:none;
  color:#b3b3b3;
  font-size:10px;
  font-family:Arial, sans-serif;
  padding:0 20px;
  position:absolute;
  bottom:8px;
  width:100%;
  text-align:center;
  left:0;
}
@media (max-width: 680px){
  .yandex-reviews__widget{
    width:100%;
    height:620px;
  }
}


/* ===== v129 yandex widget admin + stronger mobile fixes ===== */
.yandex-reviews__widget{
  width:min(100%, 728px) !important;
  height:560px !important;
  overflow:hidden;
  position:relative;
  border-radius:12px;
  margin:0 auto;
  background:linear-gradient(180deg, rgba(10,14,22,.96), rgba(8,11,18,.96));
  box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.yandex-reviews__iframe{
  width:100%;
  height:100%;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:8px;
  box-sizing:border-box;
  background:#0a1016;
}
@media (max-width: 768px){
  .yandex-reviews__widget{
    width:100% !important;
    height:420px !important;
  }
}

/* hard mobile overrides for broken top blocks */
@media (max-width: 880px){
  .hero{
    padding:18px !important;
  }
  .hero__grid{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  .hero__grid > div{
    min-width:0 !important;
  }

  .h1,
  .hero .h1,
  .hero .h1 span{
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    display:block !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:anywhere !important;
    line-height:1.1 !important;
  }
  .h1{ font-size:30px !important; }
  .sub{ font-size:14px !important; }

  .hero-actions{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    align-items:stretch !important;
  }
  .hero-actions .btn{
    writing-mode:horizontal-tb !important;
    text-orientation:mixed !important;
    white-space:nowrap !important;
    width:auto !important;
    min-width:0 !important;
    flex:0 1 auto !important;
  }

  .kv{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  .kv .item{
    min-width:0 !important;
    width:100% !important;
  }
  .kv .k,
  .kv .v,
  .kv a{
    writing-mode:horizontal-tb !important;
    text-orientation:mixed !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:anywhere !important;
  }
  .kv .v a{
    display:block !important;
  }

  .section h2,
  .hero__card h2,
  .rules-mobile h2{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    flex-wrap:wrap !important;
    writing-mode:horizontal-tb !important;
    text-orientation:mixed !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:anywhere !important;
  }
}

@media (max-width: 520px){
  .h1{ font-size:26px !important; }
  .section h2{ font-size:18px !important; }
  .hero-actions{
    flex-direction:column !important;
  }
  .hero-actions .btn{
    width:100% !important;
  }
}


/* ===== v131 yandex link plus widget ===== */
.yandex-reviews__actions{
  margin-top: 14px;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}


/* ===== v133 sticky footer + home photos strip ===== */
html, body{
  min-height: 100%;
}
body{
  display: block;
}
.page-shell{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.page-main{
  flex: 1 0 auto;
}
/* Home photos directly under marquee, no outer block */
.home-photos-strip{
  margin: 14px auto 0;
}
.home-photos-grid{
  width: min(1100px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.home-photo{
  display: block;
  height: 210px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.home-photo img,
.home-photo__ph{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-photo:hover{
  transform: translateY(-2px);
  border-color: rgba(0,229,255,.42);
  box-shadow: 0 0 0 4px rgba(0,229,255,.08), 0 18px 36px rgba(0,0,0,.42);
}
@media (max-width: 980px){
  .home-photos-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-photo{
    height: 190px;
  }
}
@media (max-width: 520px){
  .home-photos-grid{
    gap: 10px;
  }
  .home-photo{
    height: 150px;
    border-radius: 16px;
  }
}


/* ===== v135 hard cleanup: remove all legacy tariff dot animations ===== */
#prices::before,
#prices::after{
  content: none !important;
  display: none !important;
  animation: none !important;
  transition: none !important;
  transform: none !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Keep pricing block stable */
#prices{
  isolation: isolate;
}


/* ===== v137 layout and cleanup ===== */

/* sticky footer */
html, body{
  min-height: 100%;
}
body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-attachment: scroll !important;
}
.page-shell{
  min-height: 100vh;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
.page-main{
  flex: 1 0 auto;
}
/* hard-disable any old tariff decoration leftovers */
#prices::before,
#prices::after{
  content: none !important;
  display: none !important;
  animation: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 0 !important;
}

/* make configs section same visual weight as others */
#configs{
  background: rgba(12,15,24,.55) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.35) !important;
}
#configs::before,
#configs::after{
  content: none !important;
  display: none !important;
  animation: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* mobile topbar icons unified */
@media (max-width: 880px){
  .topbar__actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
  }
  .hamburger,
  .topbar__actions .btn{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    padding:0 !important;
    border-radius:14px !important;
    border:1px solid var(--line) !important;
    background: rgba(255,255,255,.03) !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-shadow:none !important;
  }
  .hamburger{
    flex-direction:column !important;
    gap:4px !important;
  }
  .hamburger span{
    width:18px !important;
    height:2px !important;
    margin:0 !important;
    border-radius:99px !important;
    background: rgba(231,247,255,.9) !important;
  }
  .topbar__actions .profile-ico,
  .topbar__actions .gico{
    width:18px !important;
    height:18px !important;
    font-size:18px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
}

/* prevent light mobile white patch / overscroll glow */
.bg-glow{
  display:none !important;
}
@media (max-width: 880px){
  html, body{
    background-color:#06070b !important;
    overscroll-behavior-y:none;
  }
}







/* ===== v142 duplicate main removed + clean auth layout ===== */
.auth-page{
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
  padding: 18px 0;
}
.auth-page > .section{
  width: 100%;
  margin: 0;
}


/* ===== v143 admin uploads preview ===== */
.admin-image-preview{
  width: min(100%, 360px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  overflow:hidden;
  background: rgba(255,255,255,.02);
}
.admin-image-preview img{
  display:block;
  width:100%;
  height:220px;
  object-fit:cover;
}


/* ===== v146 gallery lightbox above header ===== */
.lightbox{
  z-index: 2000 !important;
}
.lightbox__dialog{
  position: relative;
  z-index: 2001 !important;
  margin: max(24px, calc(var(--topbar-offset) + 28px)) auto 24px !important;
  max-height: calc(100vh - var(--topbar-offset) - 56px) !important;
}
.lightbox__img{
  max-height: calc(100vh - var(--topbar-offset) - 120px) !important;
}
.lightbox__close{
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 2002 !important;
}
@media (max-width: 880px){
  .lightbox{
    z-index: 2500 !important;
  }
  .lightbox__dialog{
    margin: calc(var(--topbar-offset) + 20px) auto 16px !important;
    max-height: calc(100vh - var(--topbar-offset) - 36px) !important;
  }
  .lightbox__img{
    max-height: calc(100vh - var(--topbar-offset) - 90px) !important;
  }
  .lightbox__close{
    top: 10px !important;
    right: 10px !important;
  }
}


/* ===== v148 auth redirect + pretty 404 ===== */
.not-found-page{
  min-height: 58vh;
}
.not-found-card{
  align-self: stretch;
}


/* ===== v168 clean footer rules on v149 ===== */
.footer{
  margin-top: auto;
  flex-shrink: 0;
}

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

.footer__left.footer__social{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.footer__right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
  text-align:right;
  color:var(--muted);
}

.footer__copy{
  color:var(--text);
  font-size:14px;
  font-weight:700;
  line-height:1.35;
}

.footer__meta{
  color:var(--muted);
  font-size:13px;
  line-height:1.35;
}

.dot{
  width:4px;
  height:4px;
  border-radius:99px;
  background: rgba(255,255,255,.25);
}

@media (max-width: 880px){
  .footer__inner{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:10px !important;
    padding:16px 0 !important;
  }

  .footer__left.footer__social{
    justify-content:flex-start !important;
  }

  .footer__right{
    align-items:flex-end !important;
    text-align:right !important;
    width:100% !important;
  }

  .footer__copy,
  .footer__meta{
    display:block !important;
    width:100% !important;
    text-align:right !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    margin:0 !important;
  }

  .footer__meta{
    margin-top:4px !important;
  }
}


/* ===== v170 same-page FAQ + marquee speed + compact mobile footer ===== */
@media (max-width: 880px){
  .footer__inner{
    gap: 6px !important;
    padding: 12px 0 !important;
  }
  .footer__right{
    gap: 2px !important;
  }
  .footer__meta{
    margin-top: 2px !important;
  }
}