:root{
  --bg:#060812;
  --bg2:#090c1e;
  --card:rgba(10,16,40,.72);
  --text:#e8f1ff;
  --muted:#9ab1d6;
  --line:rgba(122, 162, 255, .18);
  --neon:#7a5cff;     /* purple */
  --neon2:#00e5ff;    /* cyan */
  --danger:#ff4d6d;
  --ok:#3dff9b;
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --radius: 18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(122,92,255,.22), transparent 60%),
    radial-gradient(900px 500px at 80% 20%, rgba(0,229,255,.18), transparent 65%),
    radial-gradient(900px 700px at 50% 100%, rgba(122,92,255,.10), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
}
a{color:var(--neon2); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1040px; margin:0 auto; padding:22px}
.header{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:14px 0 16px;
  border-bottom:1px solid var(--line);
}
.brand{
  display:flex; align-items:center; gap:10px;
  min-width: 180px;
}

.brand .name{
  font-weight:800;
  letter-spacing:.3px;
  line-height:1.1;
}
.brand .domain{
  font-size:12px;
  color:var(--muted);
  letter-spacing:.2px;
}
.nav{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}
.nav a{
  color:var(--muted);
  padding:8px 10px;
  border:1px solid transparent;
  border-radius:999px;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.nav a:hover{
  color:var(--text);
  border-color:var(--line);
  background:rgba(255,255,255,.03);
  text-decoration:none;
}
.hero{
  display:grid;
  grid-template-columns: 1.35fr .65fr;
  gap:14px;
  margin-top:18px;
}
@media (max-width: 920px){ .hero{grid-template-columns:1fr} .brand{min-width:auto} }
.card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.h1{
  margin:0 0 10px;
  font-size:28px;
  letter-spacing:.2px;
}
.h2{
  margin:0 0 8px;
  font-size:18px;
}
.p{
  color:var(--muted);
  line-height:1.55;
  margin:10px 0;
}
.hr{height:1px; background:var(--line); margin:14px 0}
.badges{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.badge{
  font-size:12px;
  color:var(--muted);
  border:1px solid var(--line);
  padding:6px 10px;
  border-radius:999px;
}
.price{
  font-size:30px;
  font-weight:900;
  margin:10px 0 4px;
  background: linear-gradient(90deg, var(--neon2), var(--neon));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.small{font-size:12px; color:var(--muted); line-height:1.45}
.ul{margin:8px 0 0 18px; color:var(--muted); line-height:1.6}
.btns{display:flex; gap:10px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid transparent;
  font-weight:800;
  letter-spacing:.2px;
  cursor:pointer;
}
.btn.primary{
  background: linear-gradient(90deg, rgba(0,229,255,.95), rgba(122,92,255,.95));
  color:#051018;
  box-shadow: 0 14px 40px rgba(0,229,255,.12);
}
.btn.primary:hover{filter:saturate(1.05) brightness(1.03); text-decoration:none}
.btn.secondary{
  background: rgba(255,255,255,.03);
  border-color: var(--line);
  color: var(--text);
}
.btn.secondary:hover{background:rgba(255,255,255,.05); text-decoration:none}
.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
  margin-top:12px;
}
@media (max-width: 920px){ .grid{grid-template-columns:1fr} }
.kv{margin:8px 0}
.kv b{color:var(--text)}
.notice{
  font-size:12px;
  color:var(--muted);
  border:1px dashed rgba(0,229,255,.25);
  background: rgba(0,229,255,.04);
  padding:10px 12px;
  border-radius: 14px;
}
.footer{
  margin-top:22px;
  padding-top:16px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:13px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:space-between;
}
.footer a{color:var(--muted)}
.footer a:hover{color:var(--text); text-decoration:none}


/* Tariffs */
.tariff-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:12px;
  margin-top:12px;
}
@media (max-width: 920px){ .tariff-grid{grid-template-columns:1fr} }

.tariff-card{
  position:relative;
  padding:14px;
  border-radius:16px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  overflow:hidden;
}
.tariff-card:hover{
  border-color: rgba(0,229,255,.28);
  background: rgba(255,255,255,.03);
}
.tariff-top{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
.tariff-title{font-weight:900; letter-spacing:.2px}
.tariff-sub{font-size:12px; color:var(--muted)}
.tariff-price{
  margin:10px 0 10px;
  font-size:26px;
  font-weight:950;
  background: linear-gradient(90deg, var(--neon2), var(--neon));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.tariff-deal{
  font-size:12px;
  color:var(--muted);
  margin:-4px 0 10px;
}
.w100{width:100%; text-align:center}
.tariff-card.best{
  border-color: rgba(0,229,255,.60);
  box-shadow:
    0 0 0 1px rgba(0,229,255,.16),
    0 28px 110px rgba(0,229,255,.16),
    0 0 100px rgba(122,92,255,.12);
}
.ribbon {
  position:absolute;
  top:12px;
  right:-34px;
  width:130px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform: rotate(40deg);
  background: linear-gradient(90deg, #00e5ff, #7a5cff);
  color:#051018;
  font-size:11px;
  font-weight:900;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,229,255,.22);
  z-index:5;
  pointer-events:none;
}


/* --- Cyberpunk neon enhancements --- */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity:.22;
  mix-blend-mode: overlay;
}
body::after{
  content:"";
  position:fixed;
  inset:-40px;
  pointer-events:none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 6px,
    rgba(0,229,255,.040) 7px
  );
  opacity:.20;
  filter: blur(.2px);
  mix-blend-mode: screen;
}

.header{
  border-bottom:1px solid rgba(0,229,255,.14);
  box-shadow: 0 12px 60px rgba(0,229,255,.06);
}

/* Logo image */

.brand .name, .brand .domain{display:none}

.header-ctas{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.header-cta{
  padding:10px 12px;
  border-radius:14px;
}

.h1, .h2{
  text-shadow: 0 0 14px rgba(0,229,255,.14), 0 0 34px rgba(122,92,255,.12);
}

.card{
  border-color: rgba(0,229,255,.14);
  box-shadow:
    0 18px 60px rgba(0,0,0,.45),
    0 0 0 1px rgba(122,92,255,.08),
    0 0 45px rgba(0,229,255,.07);
}
.card:hover{
  border-color: rgba(0,229,255,.30);
  box-shadow:
    0 18px 60px rgba(0,0,0,.45),
    0 0 0 1px rgba(0,229,255,.16),
    0 0 70px rgba(0,229,255,.12);
}

.btn.primary{
  box-shadow:
    0 18px 60px rgba(0,229,255,.16),
    0 0 0 1px rgba(0,229,255,.20);
}
.btn.secondary{
  box-shadow: 0 0 0 1px rgba(122,92,255,.12);
}
.btn.secondary:hover{
  box-shadow: 0 0 0 1px rgba(0,229,255,.20), 0 14px 50px rgba(122,92,255,.12);
}


/* --- Integrated Logo Style (no box) --- */
.brand{
  display:flex;
  align-items:center;
  gap:0;
}

.brand img{
  width:220px;
  height:auto;
  background:none;
  border:none;
  border-radius:0;
  box-shadow:
    0 0 40px rgba(0,229,255,.25),
    0 0 80px rgba(122,92,255,.20);
}

.header{
  border:none;
  box-shadow:none;
  padding-top:30px;
  padding-bottom:10px;
  background:transparent;
}


/* --- Logo Pulse Animation & Hover Glow --- */
@keyframes neonPulse {
  0%   { filter: drop-shadow(0 0 10px rgba(0,229,255,.22)) drop-shadow(0 0 22px rgba(122,92,255,.16)); opacity: .96; transform: translateZ(0) scale(1); }
  50%  { filter: drop-shadow(0 0 18px rgba(0,229,255,.35)) drop-shadow(0 0 40px rgba(122,92,255,.26)); opacity: 1;   transform: translateZ(0) scale(1.01); }
  100% { filter: drop-shadow(0 0 10px rgba(0,229,255,.22)) drop-shadow(0 0 22px rgba(122,92,255,.16)); opacity: .96; transform: translateZ(0) scale(1); }
}

.brand img{
  width: 300px;              /* bigger, closer to hero-banner */
  max-width: 70vw;
  animation: neonPulse 2.8s ease-in-out infinite;
  transition: transform .18s ease, filter .18s ease;
  box-shadow: none;          /* rely on drop-shadow for "no rectangle" feel */
}

.brand img:hover{
  animation-play-state: paused;
  transform: scale(1.04);
  filter: drop-shadow(0 0 22px rgba(0,229,255,.50)) drop-shadow(0 0 55px rgba(122,92,255,.38));
}

/* Make header feel like part of the hero */
.header{
  margin-bottom: 6px;
}


/* --- desktop-mobile-layout-fix --- */
.container{
  max-width: 480px;
  margin: 0 auto;
}

@media (min-width: 900px){
  body{
    display:flex;
    justify-content:center;
  }
  .container{
    max-width:480px;
    margin-top:40px;
    margin-bottom:40px;
  }
  body::before{
    background:
      radial-gradient(circle at 20% 30%, rgba(0,229,255,.20), transparent 40%),
      radial-gradient(circle at 80% 70%, rgba(122,92,255,.20), transparent 40%);
  }
}


/* brand link */
.brand-link{display:inline-flex; text-decoration:none}
.brand-link:hover{text-decoration:none}


/* --- Centered Logo Fix --- */
.header{
  display:flex;
  justify-content:center !important;
  align-items:center;
  text-align:center;
}

.brand{
  margin:0 auto !important;
}

.brand img{
  display:block;
  margin:0 auto;
}

/* --- Ribbon: centered label (counter-rotate text) --- */
.ribbon {
  position:absolute;
  top:12px;
  right:-34px;
  width:130px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform: rotate(40deg);
  background: linear-gradient(90deg, #00e5ff, #7a5cff);
  color:#051018;
  font-size:11px;
  font-weight:900;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,229,255,.22);
  z-index:5;
  pointer-events:none;
}
.ribbon {
  position:absolute;
  top:12px;
  right:-34px;
  width:130px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform: rotate(40deg);
  background: linear-gradient(90deg, #00e5ff, #7a5cff);
  color:#051018;
  font-size:11px;
  font-weight:900;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,229,255,.22);
  z-index:5;
  pointer-events:none;
}
.ribbon {
  position:absolute;
  top:12px;
  right:-34px;
  width:130px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform: rotate(40deg);
  background: linear-gradient(90deg, #00e5ff, #7a5cff);
  color:#051018;
  font-size:11px;
  font-weight:900;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,229,255,.22);
  z-index:5;
  pointer-events:none;
}
.ribbon {
  position:absolute;
  top:12px;
  right:-34px;
  width:130px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform: rotate(40deg);
  background: linear-gradient(90deg, #00e5ff, #7a5cff);
  color:#051018;
  font-size:11px;
  font-weight:900;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,229,255,.22);
  z-index:5;
  pointer-events:none;
}
.ribbon {
  position:absolute;
  top:12px;
  right:-34px;
  width:130px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform: rotate(40deg);
  background: linear-gradient(90deg, #00e5ff, #7a5cff);
  color:#051018;
  font-size:11px;
  font-weight:900;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,229,255,.22);
  z-index:5;
  pointer-events:none;
}
.ribbon {
  position:absolute;
  top:12px;
  right:-34px;
  width:130px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform: rotate(40deg);
  background: linear-gradient(90deg, #00e5ff, #7a5cff);
  color:#051018;
  font-size:11px;
  font-weight:900;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,229,255,.22);
  z-index:5;
  pointer-events:none;
}
.ribbon {
  position:absolute;
  top:12px;
  right:-34px;
  width:130px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform: rotate(40deg);
  background: linear-gradient(90deg, #00e5ff, #7a5cff);
  color:#051018;
  font-size:11px;
  font-weight:900;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,229,255,.22);
  z-index:5;
  pointer-events:none;
}
.ribbon {
  position:absolute;
  top:12px;
  right:-34px;
  width:130px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform: rotate(40deg);
  background: linear-gradient(90deg, #00e5ff, #7a5cff);
  color:#051018;
  font-size:11px;
  font-weight:900;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,229,255,.22);
  z-index:5;
  pointer-events:none;
}
.ribbon::before{ content:none; }

/* counter-rotate label text */
.ribbon {
  position:absolute;
  top:12px;
  right:-34px;
  width:130px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform: rotate(40deg);
  background: linear-gradient(90deg, #00e5ff, #7a5cff);
  color:#051018;
  font-size:11px;
  font-weight:900;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,229,255,.22);
  z-index:5;
  pointer-events:none;
}
.ribbon {
  position:absolute;
  top:12px;
  right:-34px;
  width:130px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform: rotate(40deg);
  background: linear-gradient(90deg, #00e5ff, #7a5cff);
  color:#051018;
  font-size:11px;
  font-weight:900;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,229,255,.22);
  z-index:5;
  pointer-events:none;
}
.ribbon {
  position:absolute;
  top:12px;
  right:-34px;
  width:130px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform: rotate(40deg);
  background: linear-gradient(90deg, #00e5ff, #7a5cff);
  color:#051018;
  font-size:11px;
  font-weight:900;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,229,255,.22);
  z-index:5;
  pointer-events:none;
}
.ribbon {
  position:absolute;
  top:12px;
  right:-34px;
  width:130px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform: rotate(40deg);
  background: linear-gradient(90deg, #00e5ff, #7a5cff);
  color:#051018;
  font-size:11px;
  font-weight:900;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,229,255,.22);
  z-index:5;
  pointer-events:none;
}
.ribbon > *{ transform: rotate(-40deg); display:inline-block; }


/* === desktop-like-mobile: keep layout like phone on PC === */
html, body { min-height: 100%; }

@media (min-width: 900px){
  /* center "mobile canvas" */
  body{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding: 24px 0;
  }

  /* main content stays like mobile */
  .container{
    width: min(520px, 92vw);
    margin: 0 auto;
  }

  /* force any grids/rows into single column */
  .grid, .row, .cols, .columns, .cards, .tariffs, .tariff-grid, .pricing, .pricing-grid{
    display: block !important;
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  /* make items full width */
  .card, .tariff-card, .pricing-card, .plan, .tile{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* neon side background */
  body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    background:
      radial-gradient(circle at 15% 25%, rgba(0,229,255,.18), transparent 42%),
      radial-gradient(circle at 85% 70%, rgba(122,92,255,.18), transparent 45%),
      radial-gradient(circle at 55% 15%, rgba(0,229,255,.10), transparent 40%),
      linear-gradient(180deg, rgba(6,10,22,.95), rgba(5,9,18,.98));
  }
}

/* === Desktop wider, mobile unchanged + fix docs alignment === */
.container{
  margin-left:auto;
  margin-right:auto;
}

/* Документы не должны уезжать влево */
body .container{
  padding-left: 16px;
  padding-right: 16px;
}

/* Десктоп: расширяем "мобильную" область примерно на 35% */
@media (min-width: 900px){
  body{
    display:flex !important;
    justify-content:center !important;
    align-items:flex-start !important;
    padding:24px 0 !important;
  }

  .container{
    width: 100% !important;
    max-width: 700px !important; /* было ~520, стало шире примерно на 35% */
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* === HARD CENTER FIX for docs/pages drifting left === */
.container{
  margin-left: auto !important;
  margin-right: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  position: relative !important;
}

@media (min-width: 900px){
  body{
    display:flex !important;
    justify-content:center !important;
  }
  .container{
    width: 100% !important;
    max-width: 700px !important;
  }
}

/* === FORCE CENTER ALL PAGES LIKE INDEX === */

@media (min-width: 900px){

  body{
    display:flex !important;
    justify-content:center !important;
    align-items:flex-start !important;
  }

  body > *{
    width:100% !important;
    max-width:700px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

}

/* === HOME: force single-column layout on desktop === */
@media (min-width: 900px){
  body.home .container{
    max-width: 700px !important;
    margin: 0 auto !important;
  }

  /* если где-то есть двухколоночная обертка */
  body.home .layout,
  body.home .grid,
  body.home .row,
  body.home .columns,
  body.home .cols,
  body.home .cards,
  body.home .tariff-grid,
  body.home .pricing-grid{
    display:flex !important;
    flex-direction:column !important;
  }

  body.home .grid,
  body.home .tariff-grid,
  body.home .pricing-grid{
    grid-template-columns: 1fr !important;
  }

  /* убрать "пустую колонку" если она сделана через псевдо/сайдбар */
  body.home .sidebar,
  body.home .aside,
  body.home .right,
  body.home .left{
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* === Desktop: render like mobile (single column), keep wider container === */
@media (min-width: 921px){
  /* главный двухколоночный блок */
  .hero{ grid-template-columns: 1fr !important; }

  /* любые сетки на главной тоже в 1 колонку */
  .grid{ grid-template-columns: 1fr !important; }
  .tariff-grid{ grid-template-columns: 1fr !important; }

  /* чтобы карточки не растягивались странно */
  .hero > *{ min-width: 0 !important; }
}