:root {
  --bg:#f0f4f8;
  --text:#1f2933;
  --top:#111827;
  --main:#4f46e5;
  --accent:#06b6d4;
  --card:#ffffff;
  --footer:#1e293b;
}

body.dark {
  --bg:#0f172a;
  --text:#e5e7eb;
  --top:#020617;
  --card:#1e293b;
  --footer:#111827;
}

body {
  margin:0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg,#4f46e5,#06b6d4);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  color:var(--text);
  transition: all 0.3s;
}

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

/* HERO */
.hero {
  min-height:400px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  color:white;
  position:relative;
  overflow:hidden;
}

.hero h1{ font-size:3rem; text-shadow:0 4px 10px rgba(0,0,0,0.3);}
.hero p{ font-size:1.2rem; margin-top:10px; text-shadow:0 3px 8px rgba(0,0,0,0.2);}
.hero::before{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.2); z-index:0;}

/* HEADER */
.menu {
  background:var(--top);
  padding:15px 20px;
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  border-bottom-left-radius:12px;
  border-bottom-right-radius:12px;
  z-index:10;
}

.menu a {
  color:white;
  margin:0 15px;
  text-decoration:none;
  opacity:0.8;
  position:relative;
  padding:5px 0;
  transition: all 0.3s;
}

/* NUOLAT PULSUOJANTIS GRADIENT MENIU */
.menu a {
  color: white;
  margin: 0 15px;
  text-decoration: none;
  opacity: 0.9;
  position: relative;
  padding: 8px 12px;
  border-radius: 12px;
  background: linear-gradient(45deg, #4f46e5, #06b6d4, #f472b6, #facc15);
  background-size: 400% 400%;
  transition: all 0.4s ease, transform 0.3s ease;
  animation: menuGradientPulse 6s ease infinite;
}

.menu a:hover {
  transform: scale(1.1);
  opacity: 1;
}

.menu a.active {
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  transform: scale(1.1);
}

/* PULSUOJANTIS GRADIENTAS */
@keyframes menuGradientPulse {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.menu a:hover {
  background-position: 100% 0;
  transform: scale(1.1);
  opacity:1;
}

.menu a::after {
  content:"";
  display:block;
  height:2px;
  width:0;
  background:var(--accent);
  transition: width 0.3s;
  position:absolute;
  bottom:0;
  left:0;
}

.menu a:hover::after { width:100%; }
.menu a.active { opacity:1; }

.theme-btn { background:none; border:none; color:white; cursor:pointer; font-size:20px; margin-left:10px; transition: transform 0.2s;}
.theme-btn:hover { transform:scale(1.2); }

/* BURGER */
.burger { display:none; cursor:pointer; font-size:28px; margin-left:10px; transition: transform 0.2s;}
.burger:hover { transform:scale(1.2); }

.menu-mobile {
  display:none;
  flex-direction:column;
  background:var(--top);
  position:absolute;
  top:60px;
  right:10px;
  width:180px;
  padding:15px;
  border-radius:12px;
  box-shadow:0 8px 16px rgba(0,0,0,0.2);
  z-index:9;
}

.menu-mobile a { margin:10px 0; color:white; transition: all 0.3s;}
.menu-mobile a:hover { color:var(--accent); }

/* CONTENT */
.content { max-width:900px; margin:50px auto; padding:30px; background:var(--card); border-radius:16px; box-shadow:0 10px 20px rgba(0,0,0,0.08); opacity:0; transform: translateY(30px); transition: all 0.8s ease;}

/* CARDS */
.card { background:var(--card); padding:20px; border-radius:14px; text-align:center; box-shadow:0 8px 16px rgba(0,0,0,0.08); transition: all 0.3s; margin-bottom:20px; cursor:pointer;}
.card.tilt:hover { transform: rotateX(5deg) rotateY(5deg) scale(1.05); box-shadow:0 14px 28px rgba(0,0,0,0.15); }

/* ANIMUOTAS GRADIENTAS KORTELESE */
.card {
  background: linear-gradient(135deg, #4f46e5, #06b6d4, #f472b6, #facc15);
  background-size: 400% 400%;
  color: white;
  font-weight: bold;
  text-shadow: 0 2px 5px rgba(0,0,0,0.3);
  transition: all 0.5s ease;
  position: relative;
  overflow: hidden;
}

.card.tilt:hover {
  animation: gradientShift 3s ease infinite;
}

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

/* SHADOW HOVER EFFECT */
.card:hover {
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
  transform: rotateX(5deg) rotateY(5deg) scale(1.05);
}

/* ICON ANIMATION (iš ankstesnio žingsnio) */
.card span.icon {
  display:inline-block;
  font-size:2rem;
  transition: transform 0.5s ease, color 0.5s ease;
}

.card.tilt:hover span.icon {
  transform: rotate(360deg) scale(1.3);
  color: var(--accent);
}

/* POP-IN ANIMATION */
.card.show {
  animation: popIn 0.6s ease forwards;
}

@keyframes popIn {
  0% { opacity:0; transform: translateY(20px) scale(0.9);}
  60% { opacity:1; transform: translateY(-5px) scale(1.05);}
  100% { opacity:1; transform: translateY(0) scale(1);}
}

/* FORM */
form { max-width:450px; margin:auto; display:flex; flex-direction:column; gap:15px; }
input, textarea { padding:14px; border-radius:12px; border:1px solid #ccc; font-size:15px; transition: all 0.3s;}
input:focus, textarea:focus { border-color:var(--main); box-shadow:0 0 8px var(--accent); outline:none;}
button { padding:14px; border:none; border-radius:25px; background:var(--main); color:white; font-weight:bold; cursor:pointer; transition: all 0.3s;}
button:hover { background:var(--accent); transform:scale(1.05); }

/* FOOTER */
.footer { text-align:center; padding:30px; background:var(--footer); color:white; border-top-left-radius:12px; border-top-right-radius:12px;}

/* ANIMATION SHOW */
.content.show, .fade.show { opacity:1; transform: translateY(0); }

/* RESPONSIVE */
@media(max-width:700px){ .menu a {display:none;} .burger {display:block;} }

/* IKONŲ ANIMACIJA KORTELESE */
.card span.icon {
  display:inline-block;
  font-size:2rem;
  transition: transform 0.5s ease, color 0.5s ease;
}

.card.tilt:hover span.icon {
  transform: rotate(360deg) scale(1.3);
  color: var(--accent);
}

/* CARD POP-IN ANIMATION */
.card.show {
  animation: popIn 0.6s ease forwards;
}

@keyframes popIn {
  0% { opacity:0; transform: translateY(20px) scale(0.9);}
  60% { opacity:1; transform: translateY(-5px) scale(1.05);}
  100% { opacity:1; transform: translateY(0) scale(1);}
}

/* ANIMUOTAS GRADIENT MYGTUKUI */
form button {
  background: linear-gradient(45deg, #4f46e5, #06b6d4, #f472b6, #facc15);
  background-size: 400% 400%;
  transition: all 0.5s ease, transform 0.3s ease;
  color: white;
  font-weight: bold;
}

form button:hover {
  animation: buttonGradient 3s ease infinite;
  transform: scale(1.1);
}

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