:root{
  --bg-1:#03041a;
  --bg-2:#071733;
  --accent-1:#4fb0ff;
  --accent-2:#86dcff;
  --glass: rgba(255,255,255,0.03);
  --border: rgba(95,175,255,0.14);
  --muted: rgba(180,210,235,0.72);
  --text: #eaf6ff;
  --btn-text-dark: #041520;
  --ok-grad: linear-gradient(90deg,#0b6ef6,#59c8ff);
  --transition-time: 0.4s;
}
body.light{
  --bg-1:#f0f8ff;
  --bg-2:#e6f3ff;
  --accent-1:#0b66d9;
  --accent-2:#3aa0ff;
  --glass: rgba(2,6,23,0.03);
  --border: rgba(11,110,246,0.15);
  --muted:#4a6a8a;
  --text:#041c36;
  --btn-text-dark: #f0f8ff;
  --ok-grad: linear-gradient(90deg,#0a54c4,#2aa0ee);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--text);
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-y:auto;
  min-height:100vh;
  transition: background-color var(--transition-time) ease, color var(--transition-time) ease;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.bg { 
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; height:100vh;
}
.bg .grad {
  position:absolute; inset:-100%;
  background:
    radial-gradient(1200px 800px at 8% 18%, rgba(120,60,220,0.06), transparent 25%),
    radial-gradient(1400px 900px at 80% 68%, rgba(10,150,220,0.05), transparent 22%),
    radial-gradient(800px 600px at 50% 40%, rgba(80,140,255,0.03), transparent 15%);
  filter: blur(40px) contrast(110%);
  animation: bgDrift 45s linear infinite;
}

body.light .bg .grad {
  background:
    radial-gradient(1200px 800px at 8% 18%, rgba(120,60,220,0.03), transparent 25%),
    radial-gradient(1400px 900px at 80% 68%, rgba(10,150,220,0.02), transparent 22%),
    radial-gradient(800px 600px at 50% 40%, rgba(80,140,255,0.015), transparent 15%);
}

#preloader {
  position:fixed; inset:0; z-index:9999; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px;
  background: linear-gradient(180deg, rgba(2,6,23,0.96), rgba(3,9,35,0.96));
  color:var(--accent-2); font-weight:900; font-size:28px;
  transition: opacity .5s ease, visibility .5s ease;
}
body.light #preloader {
  background: linear-gradient(180deg, rgba(240,248,255,0.96), rgba(230,243,255,0.96));
  color: var(--accent-1);
}
#preloader.hidden { opacity:0; visibility:hidden; pointer-events:none; }
#preloader .logo {
  width:80px; height:80px; margin-bottom:20px;
  background-image:url('logo.png'); background-size:contain; background-repeat:no-repeat; background-position:center;
  animation:spin 2.2s linear infinite;
}

#site { opacity:0; transition:opacity .8s ease; z-index:2; position:relative; min-height:100vh; }
#site.visible { opacity:1; }

.container { max-width:1400px; margin:0 auto; padding:36px; position:relative; z-index:2; }
header { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; }
.brand { display:flex; align-items:center; gap:12px; font-weight:900; font-size:20px; }
.brand .logo { width:32px; height:32px; background-image:url('logo.png'); background-size:contain; background-repeat:no-repeat; background-position:center; }

/* Анимация текста */
.typing-animation {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 10px;
  font-weight: 700;
  font-size: 16px;
}

.typing-container {
  background: rgba(79, 176, 255, 0.1);
  border: 1px solid rgba(79, 176, 255, 0.2);
  border-radius: 10px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 140px;
  height: 36px;
  backdrop-filter: blur(10px);
  transition: all var(--transition-time) ease;
  position: relative;
}

body.light .typing-container {
  background: rgba(79, 176, 255, 0.08);
  border: 1px solid rgba(79, 176, 255, 0.15);
}

.typing-text {
  color: var(--accent-1);
  font-weight: 800;
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1;
  min-height: 20px;
}

.typing-cursor {
  display: inline-block;
  width: 2px;
  height: 16px;
  background-color: var(--accent-1);
  animation: blink 1s infinite;
  border-radius: 1px;
  margin-left: 2px;
  flex-shrink: 0;
}

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

.primary-btn{
  display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:12px;
  background:linear-gradient(90deg,var(--accent-1),var(--accent-2)); color:var(--btn-text-dark);
  border:none; font-weight:800; cursor:pointer; box-shadow:0 14px 40px rgba(2,6,20,0.6);
  transition:transform .12s, box-shadow .12s;
  text-decoration:none;
}
body.light .primary-btn {
  box-shadow:0 14px 40px rgba(0,60,120,0.15);
}
.primary-btn:hover{ transform:translateY(-3px); box-shadow:0 26px 60px rgba(2,6,20,0.65); }
body.light .primary-btn:hover{ box-shadow:0 26px 60px rgba(0,60,120,0.2); }

.ghost-btn{
  display:inline-flex; align-items:center; gap:10px; padding:9px 14px; border-radius:12px;
  background:transparent; border:1px solid var(--border); color:var(--text); font-weight:700; cursor:pointer;
  transition:all var(--transition-time) ease;
  text-decoration:none;
}

.hero {
  display:flex; gap:22px; align-items:flex-start; padding:26px; border-radius:16px;
  border:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
  backdrop-filter:blur(6px);
}
body.light .hero {
  background:linear-gradient(180deg, rgba(2,6,23,0.01), rgba(2,6,23,0.005));
}

.title { font-size:48px; font-weight:900; margin-bottom:8px; }
.subtitle { color:var(--muted); margin-bottom:18px; }

.stats { display:flex; flex-wrap:wrap; gap:16px; margin-bottom:18px; }
.stat { flex:1; min-width:210px; padding:16px; border-radius:12px; border:1px solid rgba(255,255,255,0.03); background:rgba(255,255,255,0.01); }
body.light .stat { border:1px solid rgba(2,6,23,0.03); background:rgba(2,6,23,0.01); }
.stat .label { color:var(--muted); font-weight:700; font-size:13px; margin-bottom:8px; }
.stat .value { font-weight:900; font-size:30px; }

.status-row { display:flex; gap:12px; align-items:center; margin-top:10px; flex-wrap:wrap; }
.pill { padding:10px 14px; border-radius:999px; background:var(--ok-grad); color:#04122a; font-weight:900; box-shadow:0 14px 40px rgba(79,176,255,0.08); }
body.light .pill { box-shadow:0 14px 40px rgba(79,176,255,0.15); }

.uptime { margin-top:14px; padding:16px; border-radius:12px; border:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent); }
body.light .uptime { background:linear-gradient(180deg, rgba(2,6,23,0.01), transparent); }
.uptime h3 { margin-bottom:8px; font-weight:900; color:var(--accent-1); }
.uptime-row { display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px dashed rgba(255,255,255,0.03); }
body.light .uptime-row { border-bottom:1px dashed rgba(2,6,23,0.03); }
.uptime-row:last-child{ border-bottom:none; }
.loc-name { width:190px; font-weight:800; color:var(--muted); }
.bar-track { flex:1; height:16px; background:rgba(255,255,255,0.03); border-radius:8px; padding:3px; }
body.light .bar-track { background:rgba(2,6,23,0.03); }
.bar-fill { height:100%; border-radius:6px; background:linear-gradient(90deg,var(--accent-1),var(--accent-2)); width:0; box-shadow:0 8px 30px rgba(79,176,255,0.1); transition:width 1.6s cubic-bezier(.2,.9,.25,1); }
body.light .bar-fill { box-shadow:0 8px 30px rgba(79,176,255,0.2); }
.uptime-pct { width:80px; text-align:right; font-weight:900; }

.plans-section { margin-top:26px; padding:20px; border-radius:14px; border:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent); }
body.light .plans-section { background:linear-gradient(180deg, rgba(2,6,23,0.01), transparent); }
.plans-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; }
.plan-card { padding:18px; border-radius:12px; border:1px solid rgba(255,255,255,0.03); background:rgba(255,255,255,0.01); transition:transform .14s, box-shadow .14s; position:relative; }
body.light .plan-card { border:1px solid rgba(2,6,23,0.03); background:rgba(2,6,23,0.01); }
.plan-card:hover { transform:translateY(-6px); box-shadow:0 40px 110px rgba(2,6,20,0.6); }
body.light .plan-card:hover { box-shadow:0 40px 110px rgba(0,60,120,0.15); }
.plan-title { font-weight:900; color:var(--accent-1); margin-bottom:8px; }

/* Цены с поддержкой скидок */
.plan-price {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  font-size: 26px;
  margin-bottom: 10px;
}
.plan-price-old {
  text-decoration: line-through;
  opacity: 0.6;
  font-weight: 500;
}
.plan-price-new {
  font-weight: 900;
}
.plan-price-discount {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-1);
  color: #041520;
  font-weight: 700;
}
.plan-price-period {
  font-size: 14px;
  font-weight: 600;
  margin-left: 4px;
  opacity: 0.8;
}

.plan-desc { color:var(--muted); line-height:1.5; margin-bottom:12px; }
.plan-row { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:8px; }

.devices-btn {
  display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; border:1px solid var(--border);
  background:transparent; color:var(--text); cursor:pointer; font-weight:800; position:relative;
  transition: background-color var(--transition-time) ease, border-color var(--transition-time) ease, color var(--transition-time) ease;
}
.devices-popup {
  position:absolute; left:0; top:110%; min-width:160px; padding:6px 8px; border-radius:10px;
  background:linear-gradient(180deg, rgba(10,20,40,0.95), rgba(6,14,30,0.95)); border:1px solid rgba(255,255,255,0.04);
  box-shadow:0 20px 60px rgba(2,6,23,0.6); opacity:0; transform:translateY(6px) scale(.98); transition:opacity .18s ease, transform .18s ease;
  pointer-events:none; z-index:30; color:var(--text);
}
body.light .devices-popup {
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(240,248,255,0.95));
  border: 1px solid rgba(2,6,23,0.1);
  box-shadow: 0 20px 60px rgba(0, 60, 120,0.15);
  color: #041c36;
}
.devices-popup.open { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.devices-item { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:8px; cursor:pointer; transition: background-color var(--transition-time) ease; font-size:13px; white-space: nowrap; }
.devices-item:hover { background:rgba(255,255,255,0.05); }
body.light .devices-item:hover { background:rgba(2,6,23,0.05); }
.devices-item.active { background:rgba(79,176,255,0.15); }
body.light .devices-item.active { background:rgba(79,176,255,0.2); }
.devices-item.active .device-check { display:block; }
.device-check { 
  display: none; 
  color: var(--accent-1); 
  font-size: 11px; 
  width: 16px; 
  text-align: center;
}
.device-placeholder { 
  width: 16px; 
  height: 11px; 
  display: inline-block;
}

.loc-btn {
  display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; border:1px solid var(--border);
  background:transparent; color:var(--text); cursor:pointer; font-weight:800; position:relative;
}
.loc-popup {
  position:absolute; left:0; top:110%; min-width:220px; padding:8px 10px; border-radius:10px;
  background:linear-gradient(180deg, rgba(10,20,40,0.95), rgba(6,14,30,0.95)); border:1px solid rgba(255,255,255,0.04);
  box-shadow:0 20px 60px rgba(2,6,23,0.6); opacity:0; transform:translateY(6px) scale(.98); transition:opacity .18s ease, transform .18s ease;
  pointer-events:none; z-index:30;
}
body.light .loc-popup {
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(240,248,255,0.95));
  border: 1px solid rgba(2,6,23,0.1);
  box-shadow: 0 20px 60px rgba(0, 60, 120,0.15);
  color: #041c36;
}
.loc-popup.open { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.loc-item { display:flex; align-items:center; gap:10px; padding:6px 6px; border-radius:8px; }

.flag {
  width:34px;
  height:20px;
  border-radius:4px;
  box-shadow:0 8px 30px rgba(0,0,0,0.45);
  position:relative;
  flex-shrink:0;
  overflow:hidden;
}
.flag.de { background:linear-gradient(to bottom,#000 0%,#000 33%,#dd0000 33%,#dd0000 66%,#ffce00 66%,#ffce00 100%); }
.flag.fi { background:white; }
.flag.fi::before { content:''; position:absolute; inset:0; background:
    linear-gradient(to right, transparent 0%, transparent 30%, #003580 30%, #003580 40%, transparent 40%),
    linear-gradient(to bottom, transparent 0%, transparent 40%, #003580 40%, #003580 60%, transparent 60%); }
.flag.se { background:#006AA7; }
.flag.se::before { content:''; position:absolute; inset:0; background:
  linear-gradient(to right, transparent 0%, transparent 30%, #FECC02 30%, #FECC02 40%, transparent 40%),
  linear-gradient(to bottom, transparent 0%, transparent 40%, #FECC02 40%, #FECC02 60%, transparent 60%); }

/* Латвия с закруглёнными краями */
.flag.lv { background:#9E3039; }
.flag.lv::before {
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    linear-gradient(
      to bottom,
      #9E3039 0%,
      #9E3039 40%,
      white 40%,
      white 60%,
      #9E3039 60%,
      #9E3039 100%
    );
}

/* Нидерланды */
.flag.nl {
  background:#21468B;
}
.flag.nl::before {
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    linear-gradient(
      to bottom,
      #AE1C28 0%,
      #AE1C28 33.33%,
      white 33.33%,
      white 66.66%,
      #21468B 66.66%,
      #21468B 100%
    );
}

.plan-cta { 
  display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:10px; 
  background:linear-gradient(90deg,var(--accent-1),var(--accent-2)); color:var(--btn-text-dark); 
  font-weight:900; border:none; cursor:pointer; transition:transform .12s, box-shadow .12s; 
  width:100%; justify-content:center; margin-top:16px;
  text-decoration:none;
}
.plan-cta:hover{ transform:translateY(-3px); box-shadow:0 24px 60px rgba(2,6,20,0.6); }
body.light .plan-cta:hover { box-shadow:0 24px 60px rgba(0,60,120,0.2); }
.plan-cta.ghost{ background:transparent; border:1px solid var(--border); color:var(--text); }

footer { margin-top:26px; padding:30px 12px 40px; text-align:center; color:var(--muted); }
.footer-links { display:inline-flex; gap:12px; margin-bottom:12px; }
.foot-pill { display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; background:linear-gradient(90deg, rgba(120,60,220,0.12), rgba(79,176,255,0.06)); border:1px solid rgba(255,255,255,0.04); color:var(--text); font-weight:800; text-decoration:none; }
body.light .foot-pill { background:linear-gradient(90deg, rgba(120,60,220,0.08), rgba(79,176,255,0.04)); border:1px solid rgba(2,6,23,0.08); }

@keyframes spin{ 0%{transform:rotate(0)}100%{transform:rotate(360deg)} }
@keyframes gradientShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.02)} }
@keyframes bounce { 0%,20%,50%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-5px)} 60%{transform:translateY(-3px)} }
@keyframes bgDrift { 0%{transform:translate3d(0,0,0) rotate(0deg) scale(1);} 25%{transform:translate3d(-2%,1%,0) rotate(0.3deg) scale(1.02);} 50%{transform:translate3d(-1%,2%,0) rotate(0.6deg) scale(1);} 75%{transform:translate3d(1%,1%,0) rotate(0.3deg) scale(1.01);} 100%{transform:translate3d(0,0,0) rotate(0deg) scale(1);} }
@keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

@media(max-width:1100px){ .hero{ flex-direction:column; } .loc-name{ width:140px; } }
@media(max-width:768px){ 
  .title{ font-size:34px; } 
  .container{ padding:20px; } 
  .hero{ padding:20px; } 
  .stats{ gap:12px; } 
  .stat{ min-width:calc(50% - 12px); } 
  .plans-grid{ grid-template-columns:1fr; }
  .typing-animation { display: none; }
}
@media(max-width:480px){ .stat{ min-width:100%; } .title{ font-size:28px; } }

@media(prefers-reduced-motion:reduce){ 
  .bg .grad, #preloader .logo, .anniversary-banner, .discount-badge, .bar-fill { animation:none; } 
  * { transition-duration:0.01ms !important; } 
}