﻿:root{
  --wave-a:rgba(16,185,129,.14);
  --wave-b:rgba(59,130,246,.12);
  --glow:rgba(16,185,129,.35);
}

body{
  position:relative;
  overflow-x:hidden;
}

body::before,
body::after{
  content:"";
  position:fixed;
  inset:auto auto -18vh -12vw;
  width:56vw;
  height:56vw;
  max-width:680px;
  max-height:680px;
  border-radius:43% 57% 63% 37% / 44% 39% 61% 56%;
  background:radial-gradient(circle at 30% 30%,var(--wave-a),transparent 62%);
  filter:blur(14px);
  z-index:-1;
  animation:waveDriftA 18s ease-in-out infinite;
}

body::after{
  inset:8vh -12vw auto auto;
  width:48vw;
  height:48vw;
  border-radius:59% 41% 46% 54% / 35% 55% 45% 65%;
  background:radial-gradient(circle at 70% 30%,var(--wave-b),transparent 64%);
  animation:waveDriftB 21s ease-in-out infinite;
}

@keyframes waveDriftA{
  0%,100%{transform:translate(0,0) rotate(0deg) scale(1)}
  50%{transform:translate(4vw,-3vh) rotate(7deg) scale(1.08)}
}

@keyframes waveDriftB{
  0%,100%{transform:translate(0,0) rotate(0deg) scale(1)}
  50%{transform:translate(-3vw,3vh) rotate(-8deg) scale(1.06)}
}

.hero::before,
.info-hub::before,
.content-page::before,
.policies::before,
.exams::before,
.national-identity-policy::before,
.fees::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,rgba(255,255,255,.16),transparent 45%,rgba(255,255,255,.08));
  pointer-events:none;
}

.stage,
.hub-card,
.policy-card,
.grade-group,
.info-item,
.requirements,
.contact-map,
.tabs-container,
.fees-content,
.pdf-container{
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.45);
}

.stage:hover,
.hub-card:hover,
.policy-card:hover,
.grade-group:hover,
.info-item:hover{
  box-shadow:0 14px 28px rgba(2,6,23,.12),0 0 0 1px rgba(16,185,129,.25) inset;
}

.hub-card i,
.policy-card i,
.group-title i,
.social-icon i,
.info-item i{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.8rem;
  height:2.8rem;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,#0f766e,#0ea5e9 55%,#22c55e);
  box-shadow:0 10px 22px rgba(14,165,233,.28);
  animation:iconPulse 4s ease-in-out infinite;
}

@keyframes iconPulse{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-3px) scale(1.06)}
}

.hero-content,
.navbar,
.mobile-menu{
  box-shadow:0 12px 34px rgba(2,6,23,.16);
}

.navbar .nav-links a{
  position:relative;
}

.navbar .nav-links a::after{
  content:"";
  position:absolute;
  inset:auto .7rem .3rem;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,#86efac,#38bdf8);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .28s ease;
}

.navbar .nav-links a:hover::after,
.navbar .nav-links a.active::after{
  transform:scaleX(1);
  transform-origin:left;
}

.whatsapp-float,
.back-to-top{
  animation:floatLift 3.5s ease-in-out infinite;
}

.whatsapp-float i,
.back-to-top i{
  animation:none;
  box-shadow:none;
  background:none;
  width:auto;
  height:auto;
  color:inherit;
}

@keyframes floatLift{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
  }
}
