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

:root {
  --bg: #05070a;
  --cyan: #00f2ff;
  --cyan-dim: rgba(0,242,255,0.15);
  --steel: #4f5b66;
  --white: #e8f0f5;
  --font-main: 'Inter', sans-serif;
  --font-mono: 'Roboto Mono', monospace;
}

html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--white); font-family: var(--font-main); overflow-x: hidden; }

/* SCANNER */
.scanner-line {
  position: fixed; top: 0; left: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  animation: scan 7s linear infinite; z-index: 9999; pointer-events: none;
}
@keyframes scan { 0%{top:0} 100%{top:100vh} }

/* HEADER */
.header {
  position: fixed; top: 0; width: 100%; padding: 16px 40px;
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(5,7,10,0.85); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,242,255,0.1); z-index: 1000;
}
.logo { font-family: var(--font-mono); font-size: 1rem; letter-spacing: 2px; }
.logo span:first-child { color: var(--cyan); margin-left: 4px; }
.pulse-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--cyan); margin-left: 8px;
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.7)} }

.lang-nav { display: flex; gap: 8px; }
.lang-nav button {
  background: transparent; border: 1px solid var(--steel);
  color: var(--steel); font-family: var(--font-mono); font-size: 0.7rem;
  padding: 4px 10px; cursor: pointer; transition: all 0.3s;
}
.lang-nav button:hover, .lang-nav button.active {
  border-color: var(--cyan); color: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}

/* HERO */
.hero {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 100px 40px 60px;
  background: radial-gradient(ellipse at center, rgba(0,242,255,0.04) 0%, transparent 70%);
}
.hero-inner { text-align: center; max-width: 800px; }
.system-check {
  font-family: var(--font-mono); color: var(--cyan); font-size: 0.85rem;
  letter-spacing: 3px; margin-bottom: 20px; opacity: 0.7;
}
.hero-title {
  font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 700; letter-spacing: 4px;
  text-shadow: 0 0 30px rgba(0,242,255,0.4); margin-bottom: 16px;
}
.hero-sub {
  font-family: var(--font-mono); color: var(--steel); font-size: 0.95rem;
  letter-spacing: 2px; margin-bottom: 30px;
}
.specs-bar {
  display: flex; gap: 24px; justify-content: center; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--steel);
  border: 1px solid rgba(0,242,255,0.1); padding: 12px 24px; margin-bottom: 30px;
}
.specs-bar b { color: var(--cyan); }
.price-block { margin-bottom: 30px; display: flex; gap: 20px; justify-content: center; align-items: center; flex-wrap: wrap; }
.old-price { font-family: var(--font-mono); color: var(--steel); text-decoration: line-through; font-size: 1rem; }
.error-tag { color: #ff4444; font-size: 0.7rem; margin-left: 4px; }
.new-price { font-family: var(--font-mono); color: var(--cyan); font-size: 1.6rem; font-weight: 600; text-shadow: 0 0 15px var(--cyan); }
.active-tag { font-size: 0.65rem; color: #00ff88; margin-left: 4px; animation: pulse 1.5s infinite; }

.cta-btn {
  display: inline-block; padding: 16px 40px;
  border: 1px solid var(--cyan); color: var(--cyan);
  font-family: var(--font-mono); font-size: 1rem; letter-spacing: 2px;
  text-decoration: none; cursor: pointer; background: transparent;
  transition: all 0.3s; margin-bottom: 20px;
}
.cta-btn:hover { background: var(--cyan-dim); box-shadow: 0 0 25px rgba(0,242,255,0.3); }

.live-badge {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--steel);
}
.green-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #00ff88;
  animation: pulse 1.5s infinite;
}
#live-counter { color: var(--cyan); font-weight: 600; }

/* SECTIONS */
.section { padding: 80px 40px; max-width: 1100px; margin: 0 auto; }
.section-label {
  font-family: var(--font-mono); color: var(--cyan); font-size: 0.75rem;
  letter-spacing: 3px; margin-bottom: 40px; opacity: 0.7;
}

/* PROBLEM */
.problem-section { text-align: center; }
.fade-line {
  font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 300; letter-spacing: 2px;
  margin-bottom: 24px; opacity: 0; transform: translateY(20px);
  transition: all 0.8s ease; color: var(--white);
}
.fade-line.visible { opacity: 1; transform: translateY(0); }

/* PROTOCOLS */
.protocols-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.proto-card {
  border: 1px solid rgba(0,242,255,0.15); padding: 24px;
  transition: all 0.3s; cursor: default;
}
.proto-card:hover { border-color: var(--cyan); box-shadow: 0 0 20px rgba(0,242,255,0.1); background: var(--cyan-dim); }
.proto-id { font-family: var(--font-mono); color: var(--cyan); font-size: 0.75rem; display: block; margin-bottom: 10px; }
.proto-card p { color: var(--steel); font-size: 0.9rem; }

/* BEFORE / AFTER */
.before-after-section { text-align: center; }
.ba-grid {
  display: flex; align-items: center; justify-content: center;
  gap: 24px; flex-wrap: wrap;
}
.ba-card {
  border: 1px solid rgba(0,242,255,0.15); padding: 24px;
  width: 280px; transition: all 0.3s;
}
.ba-card:hover { border-color: var(--cyan); box-shadow: 0 0 20px rgba(0,242,255,0.1); }
.ba-label {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 3px;
  color: var(--steel); margin-bottom: 16px;
}
.ba-label-after { color: var(--cyan); }
.ba-photo {
  width: 100%; height: 320px; object-fit: cover;
  border: 1px solid rgba(0,242,255,0.2); margin-bottom: 16px;
}
.ba-desc { font-family: var(--font-mono); color: var(--steel); font-size: 0.8rem; line-height: 1.6; }
.ba-divider {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.ba-arrow { font-size: 2rem; color: var(--cyan); text-shadow: 0 0 15px var(--cyan); }
.ba-protocol {
  font-family: var(--font-mono); color: var(--cyan); font-size: 0.7rem;
  letter-spacing: 2px; text-align: center; line-height: 1.8; opacity: 0.7;
}

/* AUTHOR */
.author-card { display: flex; align-items: center; gap: 30px; border: 1px solid rgba(0,242,255,0.15); padding: 30px; }
.author-photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 2px solid var(--cyan); box-shadow: 0 0 20px rgba(0,242,255,0.3); }
.author-info h3 { font-family: var(--font-mono); color: var(--cyan); font-size: 1.2rem; margin-bottom: 10px; }
.author-info p { color: var(--steel); font-size: 0.9rem; line-height: 1.6; }

/* SERVERS */
.servers-section { text-align: center; }
.servers-sub { font-family: var(--font-mono); color: var(--steel); font-size: 0.85rem; margin-bottom: 30px; letter-spacing: 2px; }
.servers-grid { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.server-card {
  border: 1px solid var(--steel); padding: 14px 24px;
  font-family: var(--font-mono); font-size: 0.85rem; color: var(--steel);
  cursor: pointer; transition: all 0.3s;
}
.server-card:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 15px rgba(0,242,255,0.2); }
.srv-status { color: #00ff88; margin-left: 8px; }

/* REVIEWS */
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.review-card { border: 1px solid rgba(0,242,255,0.1); padding: 24px; transition: all 0.3s; }
.review-card:hover { border-color: var(--cyan); box-shadow: 0 0 15px rgba(0,242,255,0.1); }
.rev-name { font-family: var(--font-mono); color: var(--cyan); font-size: 0.75rem; margin-bottom: 4px; }
.rev-loc { font-family: var(--font-mono); color: var(--steel); font-size: 0.65rem; margin-bottom: 12px; opacity: 0.6; }
.review-card p { color: var(--steel); font-size: 0.9rem; line-height: 1.6; }

/* CHECKOUT */
.checkout-section { text-align: center; }
.checkout-card { max-width: 480px; margin: 0 auto; border: 1px solid rgba(0,242,255,0.2); padding: 40px; }
.checkout-price { margin-bottom: 24px; display: flex; gap: 16px; justify-content: center; align-items: center; flex-wrap: wrap; }
#checkout-form { display: flex; flex-direction: column; gap: 12px; }
#checkout-form input,
.lang-select-input {
  background: rgba(0,242,255,0.05); border: 1px solid var(--steel);
  color: var(--white); font-family: var(--font-mono); padding: 12px 16px; font-size: 0.9rem;
  width: 100%;
}
#checkout-form input:focus,
.lang-select-input:focus { outline: none; border-color: var(--cyan); }
.lang-select-input option { background: var(--bg); color: var(--white); }
.checkout-note { font-family: var(--font-mono); color: var(--steel); font-size: 0.75rem; margin-top: 16px; }

/* FOOTER */
.footer {
  text-align: center; padding: 40px; border-top: 1px solid rgba(0,242,255,0.1);
  font-family: var(--font-mono); color: var(--steel); font-size: 0.75rem;
}
.footer-links { display: flex; gap: 20px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.footer-links a { color: var(--steel); text-decoration: none; transition: color 0.3s; }
.footer-links a:hover { color: var(--cyan); }

/* RESPONSIVE */
@media (max-width: 768px) {
  .ba-grid { flex-direction: column; align-items: center; }
  .ba-divider { flex-direction: row; }
  .ba-arrow { font-size: 1.5rem; }
}
@media (max-width: 600px) {
  .header { padding: 12px 16px; }
  .lang-nav button { font-size: 0.6rem; padding: 3px 7px; }
  .section { padding: 60px 20px; }
  .author-card { flex-direction: column; text-align: center; }
  .ba-card { width: 100%; }
}


/* Particle title styles — вставить в <style> */
.particle-title-wrap{
  position:relative;
  width:100%;
  height:auto;
  line-height:1;
  display:block;
  margin-bottom:8px;
  min-height:120px; /* подстраивай под мобильные/десктопные размеры */
}

/* Canvas покроет всю область заголовка */
#particleTitleCanvas{
  display:block;
  width:100%;
  height: auto;
  max-height:220px;
}

/* Скрытый h1 — остаётся в DOM для SEO/локализации */
.sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  visibility: hidden;
}