/* =========================
   PAGRINDINIAI NUSTATYMAI
========================== */
body {
  margin: 0;
  padding: 0;
  font-family: 'Orbitron', sans-serif;
  background: #0a0a12;
  color: white;
  text-align: center;
  overflow-x: hidden; /* Neleidžia puslapiui slinktis į šonus */
}

/* Animuotas fonas */
.bg {
  position: fixed;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, #ff00cc, #00ffff, #6600ff);
  background-size: 400% 400%;
  animation: move 20s infinite;
  filter: blur(140px);
  opacity: 0.15;
  z-index: -1;
  top: -50%;
  left: -50%;
}

@keyframes move {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* =========================
   TEKSTAI IR ANTRAŠTĖS
========================== */
h1, h2 {
  margin: 0 auto 15px auto;
  line-height: 1.2;
}

h2 {
  font-size: clamp(24px, 5vw, 40px);
  color: #00ffff;
}

p {
  font-size: clamp(16px, 4vw, 20px); /* Telefone 16px, kompiuteryje max 20px */
  line-height: 1.5;
  margin: 0 auto;
  max-width: 800px;
  padding: 0 15px; /* Neleidžia tekstui liesti ekrano kraštų */
}

.subtitle {
  margin-top: 20px;
  font-weight: bold;
}

/* =========================
   SEKCIJOS
========================== */
.hero {
  min-height: 80vh; /* Užima visą ekrano aukštį */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

.minus {
  font-size: 40px;
  margin: 10px 0;
}

.section {
  padding: 80px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section.dark {
  background: rgba(17, 17, 17, 0.8); /* Šiek tiek permatomas juodas fonas, kad matytųsi neonas */
}

.timeline p {
  font-size: 18px;
  margin: 8px 0;
}

/* =========================
   MYGTUKAI
========================== */
.button {
  display: inline-block;
  margin-top: 30px;
  width: 80%; /* Telefone užims 80% pločio */
  max-width: 300px; /* Kompiuteryje nebus platesnis nei 300px */
  padding: 15px;
  border: none;
  border-radius: 50px;
  background: linear-gradient(90deg, #ff00cc, #00ffff);
  color: white;
  font-weight: bold;
  font-size: 18px;
  text-decoration: none;
  cursor: pointer;
  transition: 0.3s;
  box-sizing: border-box;
}

.button:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
}

/* =========================
   GLITCH EFEKTAS
========================== */
.glitch {
  /* Čia magija: šriftas prisitaiko prie ekrano. Min: 35px, Max: 70px */
  font-size: clamp(35px, 7vw, 70px); 
  position: relative;
  font-weight: 900;
  margin: 0;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  width: 100%;
}

.glitch::before {
  color: #ff00cc;
  animation: glitch1 2s infinite;
  z-index: -1;
}

.glitch::after {
  color: #00ffff;
  animation: glitch2 2s infinite;
  z-index: -2;
}

@keyframes glitch1 {
  0% { transform: translate(2px, 0); }
  50% { transform: translate(-2px, 2px); }
  75% { transform: translate(1px, -1px); }
  100% { transform: translate(2px, 0); }
}

@keyframes glitch2 {
  0% { transform: translate(2px, 0); }
  50% { transform: translate(-2px, 2px); }
  75% { transform: translate(1px, -1px); }
  100% { transform: translate(2px, 0); }
}

/* =========================
   FOOTER
========================== */
footer {
  padding: 30px 20px;
  background: #05050a;
  font-size: 12px;
  opacity: 0.6;
}

@media (max-width: 768px) {
  /* Pakeisk '.tavo-antraste' į tą klasę, kurią naudoji (pvz. h1, .glitch, .title) */
  .glitch {
    font-size: 28px; /* Sumažink šriftą, kol gražiai tilps */
    line-height: 1.4; /* Duok daugiau erdvės tarp eilučių */
    letter-spacing: 2px; /* Šiek tiek suspausk tarpus tarp raidžių */
  }

  .minus {
    font-size: 28px; /* Sumažink šriftą, kol gražiai tilps */
    line-height: 1.4; /* Duok daugiau erdvės tarp eilučių */
    letter-spacing: 2px; /* Šiek tiek suspausk tarpus tarp raidžių */
  }

  .antra-eilute{
    white-space: nowrap;
    font-size: 7vw;
  }
}