:root {
  --bg: #070b14;
  --bg-soft: #0c1220;
  --card: rgba(18, 24, 40, 0.82);
  --card-2: rgba(13, 18, 31, 0.92);
  --border: rgba(130, 146, 187, 0.18);
  --text: #f5f7fb;
  --muted: #a9b4ca;
  --accent: #6d5efc;
  --accent-2: #4f8cff;
  --success: #70e4a2;
  --danger: #ff8f95;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
  --radius: 22px;
  --radius-sm: 14px;
  --container: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(79, 140, 255, 0.18), transparent 28%),
    radial-gradient(circle at top right, rgba(109, 94, 252, 0.18), transparent 30%),
    linear-gradient(180deg, #070b14 0%, #060911 100%);
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container { width: min(100% - 40px, var(--container)); margin: 0 auto; }

.site-header {
  position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px);
  background: rgba(7, 11, 20, 0.72); border-bottom: 1px solid rgba(255,255,255,0.05);
}
.header-inner { display:flex; align-items:center; justify-content:space-between; min-height:76px; gap:20px; }
.logo { display:flex; align-items:center; gap:14px; font-weight:800; letter-spacing:-0.03em; }
.logo-mark {
  width:42px; height:42px; border-radius:14px; background:linear-gradient(135deg,var(--accent),var(--accent-2));
  display:grid; place-items:center; box-shadow:0 14px 30px rgba(79,140,255,.25); font-size:18px;
}
.header-right { display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:flex-end; }
.site-nav { display:flex; align-items:center; gap:18px; color:var(--muted); flex-wrap:wrap; }
.site-nav a:hover, .footer-links a:hover, .back-link:hover { color: var(--text); }
.nav-cta {
  padding:11px 16px; border:1px solid rgba(255,255,255,.08); border-radius:999px; background:rgba(255,255,255,.03);
}






.lang-switch{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
}

.lang-btn{
  width:34px;
  height:24px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:6px;
  padding:0;
  cursor:pointer;
  background:transparent;
  position:relative;
  overflow:hidden;
  opacity:.78;
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease, border-color .18s ease;
  flex:0 0 34px;
}

.lang-btn:hover{
  opacity:1;
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.28);
  box-shadow:0 6px 14px rgba(0,0,0,.18);
}

.lang-btn.active{
  opacity:1;
  border-color:rgba(123,140,255,.68);
  box-shadow:0 0 0 2px rgba(123,140,255,.16), 0 8px 18px rgba(79,140,255,.18);
}

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


.hero { padding:72px 0 28px; }
.hero-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:stretch; }
.panel {
  background: linear-gradient(180deg, rgba(17,24,38,.88), rgba(10,15,26,.92)); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
}
.hero-copy { padding:42px; }
.badge {
  display:inline-flex; gap:8px; align-items:center; padding:10px 14px; border-radius:999px; background:rgba(109,94,252,.14);
  border:1px solid rgba(109,94,252,.2); color:#d9d4ff; font-size:14px; margin-bottom:22px;
}
.hero h1, .page-hero h1 { margin:0; font-size:clamp(38px, 6vw, 64px); line-height:1.02; letter-spacing:-0.04em; }
.hero p, .page-hero p { color:var(--muted); font-size:18px; line-height:1.7; margin:20px 0 0; max-width:780px; }
.hero-actions, .inline-actions, .actions { display:flex; flex-wrap:wrap; gap:14px; }
.hero-actions { margin-top:28px; }
.btn {
  appearance:none; border:none; cursor:pointer; padding:14px 20px; border-radius:14px; font-weight:700; font-size:15px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; display:inline-flex; justify-content:center; align-items:center; gap:10px;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 18px 34px rgba(89,95,252,.28); }
.btn-secondary { color:#e8eeff; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1); }
.btn-block { width:100%; }
.btn-store { background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); color:#fff; }
.hero-meta { display:flex; flex-wrap:wrap; gap:14px 26px; margin-top:28px; color:var(--muted); font-size:14px; }
.hero-card { padding:26px; display:grid; gap:16px; }
.mini-window { border-radius:18px; border:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg, rgba(12,18,32,.9), rgba(8,12,22,.92)); overflow:hidden; }
.window-top { padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.06); display:flex; gap:8px; }
.dot { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.18); }
.window-body { padding:18px; display:grid; gap:14px; }
.fake-input, .input, textarea {
  width:100%; border-radius:14px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); color:var(--text); padding:14px 16px; font-size:15px; outline:none;
}
.input:focus, textarea:focus { border-color: rgba(79, 140, 255, 0.55); box-shadow: 0 0 0 4px rgba(79, 140, 255, 0.12); }
.fake-row { display:grid; grid-template-columns: 1fr 110px; gap:10px; }
.fake-button {
  background: linear-gradient(90deg, #6a5cff, #7b8cff); padding:14px 20px; border-radius:10px; text-align:center; font-weight:600; color:white; opacity:.9; cursor:default; pointer-events:none; user-select:none;
}
.stat-grid,.feature-grid,.doc-grid,.contact-grid,.pricing-grid,.steps { display:grid; gap:18px; }
.stat-grid { grid-template-columns:repeat(3,1fr);} .feature-grid{grid-template-columns:repeat(3,1fr);} .steps{grid-template-columns:repeat(3,1fr);} .doc-grid{grid-template-columns:repeat(2,1fr);} .contact-grid{grid-template-columns:repeat(2,1fr);} .pricing-grid{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);} 
section { padding:26px 0; }
.section-title { margin:0 0 10px; font-size:clamp(28px,4vw,40px); letter-spacing:-.03em; }
.section-copy { margin:0 0 28px; color:var(--muted); font-size:17px; line-height:1.65; max-width:760px; }
.card { background:linear-gradient(180deg, rgba(15,20,34,.88), rgba(10,14,24,.9)); border:1px solid var(--border); border-radius:20px; padding:24px; }
.card h3 { margin:0 0 12px; font-size:22px; }
.card p, .card li { color:var(--muted); line-height:1.7; }
.kicker { color:#d7d3ff; font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:.12em; margin-bottom:12px; }
.step-number { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:rgba(109,94,252,.15); border:1px solid rgba(109,94,252,.2); color:#e3deff; font-weight:800; margin-bottom:16px; }
.page-shell { padding:46px 0 80px; }
.page-hero { padding:34px; margin-bottom:24px; }
.form-card,.info-card { padding:28px; }
.label { display:block; margin-bottom:10px; color:#e8eeff; font-weight:700; }
.helper,.status,.meta,.note,.list-muted li,.footer-note { color:var(--muted); }
.status { min-height:24px; margin-top:14px; } .status.error{color:var(--danger);} .status.success{color:var(--success);} 
.result-box { margin-top:18px; padding:18px; border:1px dashed rgba(255,255,255,.15); border-radius:16px; background:rgba(255,255,255,.025); }
.license-box { margin-top:10px; word-break:break-word; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:16px; }
.price-card { padding:30px; }
.price { font-size:56px; font-weight:800; letter-spacing:-.04em; margin:8px 0; }
.price small { font-size:18px; color:var(--muted); }
.list { list-style:none; padding:0; margin:18px 0 0; display:grid; gap:12px; }
.list li::before { content:"✓"; color:var(--success); margin-right:10px; }
.doc-content h2 { margin-top:28px; } .doc-content p, .doc-content li { color:var(--muted); line-height:1.8; } .doc-content ul { padding-left:20px; }
.notice { padding:18px 20px; border-radius:16px; border:1px solid rgba(112,228,162,.18); background:rgba(112,228,162,.08); color:#dff8e9; }
.back-link { display:inline-flex; align-items:center; gap:8px; color:var(--muted); margin-bottom:20px; }
.site-footer { padding:32px 0 56px; color:var(--muted); }
.footer-inner { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:18px; border-top:1px solid rgba(255,255,255,.06); }
.footer-links { display:flex; gap:18px; flex-wrap:wrap; }
.success-banner, .store-banner {
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; font-size:14px; font-weight:700; margin-bottom:18px;
}
.success-banner { background: rgba(112, 228, 162, 0.12); border: 1px solid rgba(112, 228, 162, 0.18); color:#dff8e9; }
.store-banner { background: rgba(79,140,255,.12); border:1px solid rgba(79,140,255,.18); color:#d9e6ff; }
.install-box { margin-top:22px; }
.doc-callout { margin-top:22px; }
.hidden { display:none !important; }

@media (max-width: 960px) {
  .hero-grid,.pricing-grid,.feature-grid,.steps,.doc-grid,.contact-grid,.stat-grid { grid-template-columns:1fr; }
  .hero-copy,.page-hero,.form-card,.info-card,.price-card { padding:24px; }
  .header-inner { align-items:flex-start; padding:12px 0; }
}
@media (max-width: 640px) {
  .container { width:min(100% - 24px, var(--container)); }
  .hero { padding-top:36px; }
  .hero h1,.page-hero h1 { font-size:34px; }
  .hero p,.page-hero p,.section-copy { font-size:16px; }
  .header-inner { min-height:68px; }
  .site-nav { gap:14px; font-size:14px; }
  .btn, .hero-actions .btn { width:100%; }
  .fake-row { grid-template-columns:1fr; }
  .price { font-size:44px; }
  .lang-switch { width:100%; justify-content:center; }
}


@media (max-width: 900px){
  .lang-switch{
    gap:6px;
    padding:4px 6px;
  }
  .lang-btn{
    width:30px;
    height:22px;
    flex-basis:30px;
  }
}


/* ===== LANG FLAGS FINAL FIX ===== */
.lang-switch{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  padding:4px 8px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.08) !important;
}

.lang-btn{
  width:28px !important;
  height:20px !important;
  min-width:28px !important;
  flex:0 0 28px !important;
  border-radius:4px !important;
  overflow:hidden !important;
  padding:0 !important;
  border:1px solid rgba(255,255,255,.15) !important;
  cursor:pointer !important;
  background:transparent !important;
  opacity:.82 !important;
  transition:.2s !important;
  box-shadow:none !important;
}

.lang-btn:hover{
  opacity:1 !important;
  transform:translateY(-1px) !important;
}

.lang-btn.active{
  opacity:1 !important;
  border-color:#7b8cff !important;
  box-shadow:0 0 0 2px rgba(123,140,255,.2) !important;
}

.flag-img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
  border-radius:0 !important;
}

.flag, .lang-code{
  display:none !important;
}

.flag::after{
  display:none !important;
}



/* ===== DESKTOP HEADER LAYOUT ===== */
.site-header{
  overflow: visible;
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:76px;
  gap:16px;
}

.logo{
  flex:0 0 auto;
  white-space:nowrap;
}

.header-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
  flex:1 1 auto;
  min-width:0;
}

.site-nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:16px;
  min-width:0;
  flex:1 1 auto;
  white-space:nowrap;
}

.site-nav > a{
  white-space:nowrap;
  font-size:15px;
}

.nav-overflow-item{
  display:none;
}

.nav-more{
  position:relative;
  flex:0 0 auto;
}

.nav-more-toggle,
.menu-toggle{
  width:42px;
  height:42px;
  padding:0;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}

.nav-more-toggle span,
.menu-toggle span{
  display:block;
  width:18px;
  height:2px;
  border-radius:999px;
  background:#fff;
}

.nav-more-menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width:240px;
  padding:10px;
  display:none;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(17,24,38,.96), rgba(10,15,26,.98));
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  z-index:120;
}

.nav-more.is-open .nav-more-menu{
  display:grid;
  gap:8px;
}

.nav-more-menu a{
  padding:12px 14px;
  border-radius:12px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  white-space:nowrap;
}

.lang-switch{
  flex:0 0 auto !important;
  margin-left:2px !important;
  position:static !important;
  transform:none !important;
}

.menu-toggle{
  display:none;
}

.menu-toggle.is-open span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
.menu-toggle.is-open span:nth-child(2){
  opacity:0;
}
.menu-toggle.is-open span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

@media (max-width: 900px){
  .menu-toggle{
    display:inline-flex;
    margin-left:auto;
    flex:0 0 auto;
  }

  .header-right{
    display:none;
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    width:min(360px, calc(100vw - 24px));
    padding:14px;
    border-radius:18px;
    background:linear-gradient(180deg, rgba(17,24,38,.96), rgba(10,15,26,.98));
    border:1px solid var(--border);
    box-shadow:var(--shadow);
    z-index:100;
  }

  .header-right.is-open{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:14px;
  }

  .site-nav{
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }

  .site-nav > a,
  .site-nav .nav-cta{
    width:100%;
    padding:12px 14px;
    border-radius:12px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.06);
  }

  .nav-overflow-item{
    display:block;
  }

  .nav-more{
    display:none;
  }

  .lang-switch{
    align-self:flex-end;
    margin-left:0 !important;
  }
}