/* =========================================================
   VICE / RP LANDING — общий стиль для всех страниц
   Палитра: чёрный фон + неон фиолетовый/розовый (Vice City)
   ========================================================= */

:root{
  --bg:        #0a0012;
  --bg-soft:   #150726;
  --surface:   #1c0e34;
  --surface-2: #241243;
  --line:      #3a1b5c;

  --pink:      #ff2bd6;
  --pink-soft: #ff8ae8;
  --purple:    #9b2bff;
  --purple-2:  #6a1fce;

  --text:      #f4ecff;
  --text-dim:  #b79ad1;

  --radius:    14px;
  --gap:       24px;
  --maxw:      1180px;

  --font-display: 'Audiowide', system-ui, sans-serif;
  --font-body:    'Rajdhani', system-ui, sans-serif;
}

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

html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:18px;
  font-weight:500;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

.wrap{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:24px;
}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:.5px;
  line-height:1.15;
}

/* ---------- focus visibility (accessibility) ---------- */
a:focus-visible,
button:focus-visible{
  outline:2px solid var(--pink-soft);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}

/* =========================================================
   HEADER / NAV
   ========================================================= */
.header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(10,0,18,.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}

.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-block:14px;
}

.logo{
  font-family:var(--font-display);
  font-size:22px;
  color:var(--text);
  white-space:nowrap;
}
.logo span{ color:var(--pink); }

.nav{
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
}

.nav__list{
  display:flex;
  gap:22px;
  list-style:none;
  flex-wrap:wrap;
}

.nav__list a{
  font-size:15px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--text-dim);
  padding-block:6px;
  border-bottom:2px solid transparent;
  transition:color .2s, border-color .2s;
}
.nav__list a:hover{
  color:var(--pink-soft);
  border-color:var(--pink);
}

.nav__toggle{
  display:none;
  background:none;
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--text);
  font-size:22px;
  padding:6px 12px;
  cursor:pointer;
}

@media (max-width:860px){
  .nav__toggle{ display:block; }
  .nav{
    position:absolute;
    top:100%;
    left:0; right:0;
    background:var(--bg-soft);
    border-bottom:1px solid var(--line);
    flex-direction:column;
    align-items:flex-start;
    padding:16px 24px 24px;
    display:none;
  }
  .nav.is-open{ display:flex; }
  .nav__list{ flex-direction:column; gap:14px; }
}

/* =========================================================
   HERO / BANNER (signature: неоновый закат Vice City)
   ========================================================= */
.hero{
  position:relative;
  overflow:hidden;
  min-height:88vh;
  display:flex;
  align-items:center;
  padding-block:80px 40px;
  background:
    radial-gradient(60% 55% at 50% 28%, rgba(255,43,214,.28), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
}

.hero__sun{
  position:absolute;
  left:50%;
  top:16%;
  width:420px;
  height:420px;
  transform:translateX(-50%);
  border-radius:50%;
  background:linear-gradient(180deg, var(--pink-soft), var(--purple) 60%, var(--purple-2));
  box-shadow:0 0 140px 30px rgba(255,43,214,.35);
  opacity:.55;
  animation:pulse 6s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ opacity:.45; }
  50%{ opacity:.65; }
}

.hero__grid{
  position:absolute;
  left:0; right:0; bottom:0;
  height:45%;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,43,214,.35) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255,43,214,.35) 0 1px, transparent 1px 40px);
  transform:perspective(400px) rotateX(58deg);
  transform-origin:bottom;
  mask-image:linear-gradient(180deg, transparent, #000 25%);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 25%);
}

.hero__content{
  position:relative;
  z-index:2;
  text-align:center;
  width:100%;
}

.hero__eyebrow{
  display:inline-block;
  font-size:14px;
  font-weight:700;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--pink-soft);
  margin-bottom:18px;
}

.hero__title{
  font-size:clamp(40px, 7vw, 84px);
  color:#fff;
  text-shadow:0 0 18px rgba(255,43,214,.6), 0 0 46px rgba(155,43,255,.4);
  margin-bottom:18px;
}

.hero__subtitle{
  max-width:640px;
  margin:0 auto 34px;
  color:var(--text-dim);
  font-size:19px;
}

.hero__actions{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:56px;
}

/* рекламный баннер-плейсхолдер на первом экране */
.ad-banner{
  position:relative;
  z-index:2;
  max-width:920px;
  margin:0 auto;
  padding:22px;
  text-align:center;
  border:1px dashed var(--line);
  border-radius:var(--radius);
  background:rgba(255,255,255,.03);
  color:var(--text-dim);
  font-size:14px;
  letter-spacing:1px;
  text-transform:uppercase;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 28px;
  border-radius:999px;
  font-family:var(--font-body);
  font-weight:700;
  font-size:15px;
  text-transform:uppercase;
  letter-spacing:.5px;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{ transform:translateY(-2px); }

.btn--primary{
  background:linear-gradient(90deg, var(--pink), var(--purple));
  color:#fff;
  box-shadow:0 6px 24px rgba(255,43,214,.35);
}
.btn--primary:hover{ box-shadow:0 10px 30px rgba(255,43,214,.5); }

.btn--ghost{
  background:transparent;
  color:var(--text);
  border-color:var(--line);
}
.btn--ghost:hover{ border-color:var(--pink); color:var(--pink-soft); }

.btn--card{
  width:100%;
  background:transparent;
  color:var(--pink-soft);
  border-color:var(--purple-2);
}
.btn--card:hover{
  background:linear-gradient(90deg, var(--pink), var(--purple));
  color:#fff;
  border-color:transparent;
}

/* =========================================================
   SECTIONS / TITLES
   ========================================================= */
.section{
  padding-block:88px;
  border-top:1px solid var(--line);
}
.section:nth-of-type(odd){ background:var(--bg-soft); }

.section__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:40px;
}

.section__eyebrow{
  display:block;
  font-size:13px;
  font-weight:700;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--purple);
  margin-bottom:10px;
}

.section__title{
  font-size:clamp(26px, 4vw, 38px);
  color:#fff;
}

.section__desc{
  max-width:520px;
  color:var(--text-dim);
  font-size:15px;
}

/* =========================================================
   CITIES
   ========================================================= */
.cities{
  display:flex;
  flex-wrap:wrap;
  /* flex вместо grid: сколько бы карточек ни было и как бы ни делилась
     последняя строка — карточки сами растягиваются и не оставляют дыр */
  gap:14px;
}

.city-card{
  flex:0 1 200px;
  min-width:160px;
  min-height:100px;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(10,0,18,.1), rgba(10,0,18,.85)),
    linear-gradient(135deg, var(--surface), var(--surface-2));
  display:flex;
  align-items:center;
  padding:20px 24px;
  transition:border-color .2s, transform .2s;
}
.city-card:hover{
  border-color:var(--pink);
  transform:translateY(-4px);
}

.city-card__name{
  font-family:var(--font-display);
  font-size:26px;
  color:#fff;
}
.city-card__hint{
  display:block;
  margin-top:6px;
  font-size:14px;
  color:var(--text-dim);
  text-transform:uppercase;
  letter-spacing:1px;
}

/* =========================================================
   PRODUCT GRID / CARDS
   ========================================================= */
.grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--gap);
}

@media (max-width:1020px){
  .grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:560px){
  .grid{ grid-template-columns:1fr; }
}

.card{
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--surface);
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.card:hover{
  border-color:var(--pink);
  transform:translateY(-4px);
  box-shadow:0 16px 34px rgba(0,0,0,.4);
}

.card__media{
  aspect-ratio:4/3;
  background:
    linear-gradient(135deg, var(--surface-2), var(--surface));
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-dim);
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:1px;
  border-bottom:1px solid var(--line);
}

.card__body{
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:14px;
  flex:1;
}

.card__title{
  font-family:var(--font-body);
  font-size:18px;
  font-weight:700;
  color:#fff;
}

.card__title[contenteditable]{
  outline:none;
  border-bottom:1px dashed transparent;
}
.card__title[contenteditable]:hover,
.card__title[contenteditable]:focus{
  border-bottom:1px dashed var(--purple-2);
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  border-top:1px solid var(--line);
  background:var(--bg-soft);
  padding-block:60px 30px;
}

.footer__grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:40px;
  margin-bottom:40px;
}

.footer__logo{
  font-family:var(--font-display);
  font-size:20px;
  color:#fff;
  margin-bottom:12px;
}
.footer__logo span{ color:var(--pink); }

.footer__text{
  color:var(--text-dim);
  font-size:14px;
  max-width:320px;
}

.footer__title{
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:2px;
  color:var(--purple);
  margin-bottom:16px;
}

.footer__list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.footer__list a{
  color:var(--text-dim);
  font-size:15px;
  transition:color .2s;
}
.footer__list a:hover{ color:var(--pink-soft); }

.footer__bottom{
  border-top:1px solid var(--line);
  padding-top:22px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  color:var(--text-dim);
  font-size:13px;
}

@media (max-width:760px){
  .footer__grid{ grid-template-columns:1fr; gap:30px; }
}

/* =========================================================
   BREADCRUMB (страницы городов)
   ========================================================= */
.breadcrumb{
  padding-block:18px;
  font-size:14px;
  color:var(--text-dim);
  border-bottom:1px solid var(--line);
}
.breadcrumb a:hover{ color:var(--pink-soft); }
.breadcrumb__sep{ margin-inline:8px; color:var(--purple-2); }

.city-hero{
  padding-block:56px;
  background:
    radial-gradient(50% 100% at 50% 0%, rgba(255,43,214,.18), transparent 70%),
    var(--bg-soft);
  border-bottom:1px solid var(--line);
  text-align:center;
}
.city-hero__title{
  font-size:clamp(32px, 5vw, 54px);
  color:#fff;
  text-shadow:0 0 18px rgba(255,43,214,.5);
}
.city-hero__desc{
  max-width:560px;
  margin:14px auto 0;
  color:var(--text-dim);
}


/* ===== SEO-текст: универсальный блок, вставляй куда нужно ===== */
.seo-text{
  max-width:820px;
  margin:32px auto 0;
  color:var(--text-dim);
  font-size:16px;
  line-height:1.7;
}
.seo-text h2,
.seo-text h3{
  font-family:var(--font-display);
  color:var(--text);
  font-size:20px;
  margin:24px 0 10px;
}
.seo-text p{
  margin:0 0 12px;
}
.seo-text--wide{
  max-width:100%;
}