:root{
  --bg:#05070d;
  --panel:rgba(20,30,60,0.65);
  --border:rgba(255,255,255,0.12);

  --cyan:#00f7ff;
  --violet:#7c5cff;
  --gold:#ffcc00;

  --text:#f4f6ff;
  --muted:#aab3d9;
}

*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:Inter,system-ui;
  background:radial-gradient(circle at top,#111a35,transparent 70%),var(--bg);
  color:var(--text);
}

canvas{
  position:fixed;
  inset:0;
  z-index:-1;
}

.topbar{
  position:fixed;
  top:0;
  width:100%;
  height:78px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 40px;
  background:rgba(5,7,13,0.75);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}

.logo span{
  font-size:1.4rem;
  font-weight:900;
  background:linear-gradient(135deg,var(--cyan),var(--violet));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.logo small{
  display:block;
  font-size:.8rem;
  color:var(--muted);
}

nav a{
  margin:0 14px;
  color:var(--muted);
  text-decoration:none;
  font-weight:700;
}
nav a:hover{color:var(--cyan);}

.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding-top:120px;
}

.hero.small{min-height:60vh;}

.hero h1{
  font-size:4rem;
  font-weight:900;
}
.hero span{
  background:linear-gradient(135deg,var(--cyan),var(--violet));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.section{
  padding:110px 10%;
  text-align:center;
}

.subtitle{margin-top:10px;color:var(--muted);}

.grid3{
  margin-top:60px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:25px;
}

.grid2{
  margin-top:60px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:25px;
}

.card,.product,.mod,.plan{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:22px;
  padding:35px;
}

.btn{
  padding:14px 28px;
  border-radius:16px;
  font-weight:900;
  border:none;
  cursor:pointer;
}

.btn.primary{
  background:linear-gradient(135deg,var(--cyan),var(--violet));
  color:black;
}

.btn.outline{
  background:transparent;
  border:1px solid var(--border);
  color:white;
}

.full{width:100%;}

.mods-grid,.boost-grid{
  margin-top:60px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:22px;
}

.price{
  font-size:2rem;
  font-weight:900;
  color:var(--cyan);
}

.badge{
  display:inline-block;
  padding:6px 14px;
  border-radius:14px;
  font-size:.75rem;
  font-weight:900;
  background:linear-gradient(135deg,var(--gold),#ff8800);
  color:black;
}

.max{
  background:linear-gradient(135deg,var(--violet),var(--cyan));
}

.terminal-box{
  background:black;
  border-radius:18px;
  padding:30px;
  max-width:700px;
  margin:40px auto;
  text-align:left;
  color:lime;
}

footer{
  padding:50px;
  text-align:center;
  border-top:1px solid var(--border);
  color:var(--muted);
}
/* ================================
   SLIDE TEXT ANIMATIONS (PureSafe)
   ================================ */

.slide {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.9s ease;
}

.slide-left {
  opacity: 0;
  transform: translateX(-80px);
  transition: all 0.9s ease;
}

.slide-right {
  opacity: 0;
  transform: translateX(80px);
  transition: all 0.9s ease;
}

.slide-up {
  opacity: 0;
  transform: translateY(80px);
  transition: all 0.9s ease;
}

/* Когда появляется */
.show {
  opacity: 1;
  transform: translateX(0) translateY(0);
}

.hero p {
  margin-top: 30px;
  margin-bottom: 40px; /* 🔥 вот это спасает */
}

.hero-buttons {
  position: relative;
  z-index: 10;
}

.motto {
  margin-top: 20px;
  font-size: 1.4rem;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
  text-shadow: 0 0 20px rgba(0,247,255,0.25);
}

.plan p {
  margin: 15px 0;
  color: var(--muted);
}

.plan.maximum {
  border: 2px solid var(--cyan);
  box-shadow: 0 0 25px rgba(0,247,255,0.25);
}