/* Premium animated educational theme overlay
   Safe CSS-only upgrade for the public homepage. */

:root {
  --premium-bg-1: #050816;
  --premium-bg-2: #07111f;
  --premium-bg-3: #0f172a;
  --premium-card: rgba(15, 23, 42, .72);
  --premium-card-soft: rgba(255, 255, 255, .075);
  --premium-border: rgba(255, 255, 255, .13);
  --premium-text: #f8fafc;
  --premium-muted: rgba(226, 232, 240, .76);
  --premium-cyan: #38bdf8;
  --premium-green: #22c55e;
  --premium-violet: #8b5cf6;
  --premium-amber: #fbbf24;
  --premium-radius: 28px;
  --premium-shadow: 0 24px 70px rgba(0,0,0,.34);
}

html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(circle at 15% 8%, rgba(56,189,248,.20), transparent 34%),
    radial-gradient(circle at 85% 12%, rgba(34,197,94,.15), transparent 28%),
    radial-gradient(circle at 45% 95%, rgba(139,92,246,.18), transparent 34%),
    linear-gradient(135deg, var(--premium-bg-1) 0%, var(--premium-bg-2) 44%, var(--premium-bg-3) 100%) !important;
  color: var(--premium-text);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .36;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at center, #000 0%, transparent 76%);
}

body::after {
  content: "";
  position: fixed;
  inset: -30%;
  pointer-events: none;
  z-index: 0;
  opacity: .12;
  background: conic-gradient(from 120deg, transparent, rgba(56,189,248,.26), transparent, rgba(34,197,94,.18), transparent);
  animation: premiumAurora 28s linear infinite;
}

@keyframes premiumAurora {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.08); }
  100% { transform: rotate(360deg) scale(1); }
}

.site-shell {
  position: relative;
  z-index: 2;
}

.edu-ambient {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.edu-orb {
  position: absolute;
  width: var(--size, 180px);
  height: var(--size, 180px);
  right: var(--x, 10%);
  top: var(--y, 20%);
  border-radius: 999px;
  opacity: .38;
  filter: blur(10px);
  background: radial-gradient(circle at 35% 35%, var(--color, rgba(56,189,248,.4)), transparent 66%);
  animation: eduFloat var(--speed, 13s) ease-in-out infinite alternate;
}

.edu-orb.o1 { --x: 6%; --y: 16%; --size: 190px; --color: rgba(56,189,248,.42); --speed: 12s; }
.edu-orb.o2 { --x: 76%; --y: 7%; --size: 150px; --color: rgba(34,197,94,.36); --speed: 15s; }
.edu-orb.o3 { --x: 62%; --y: 72%; --size: 210px; --color: rgba(139,92,246,.30); --speed: 18s; }
.edu-orb.o4 { --x: 14%; --y: 76%; --size: 128px; --color: rgba(251,191,36,.26); --speed: 16s; }

.edu-symbol {
  position: absolute;
  right: var(--x);
  top: var(--y);
  width: 58px;
  height: 58px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.84);
  font-size: 25px;
  background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 20px 60px rgba(0,0,0,.22);
  backdrop-filter: blur(16px);
  animation: eduDrift var(--duration, 18s) ease-in-out infinite;
  transform: rotate(var(--r, 0deg));
}

.edu-symbol.s1 { --x: 8%; --y: 34%; --duration: 16s; --r: -10deg; }
.edu-symbol.s2 { --x: 87%; --y: 32%; --duration: 19s; --r: 12deg; }
.edu-symbol.s3 { --x: 18%; --y: 61%; --duration: 21s; --r: 8deg; }
.edu-symbol.s4 { --x: 78%; --y: 66%; --duration: 17s; --r: -14deg; }
.edu-symbol.s5 { --x: 42%; --y: 18%; --duration: 23s; --r: 11deg; }

@keyframes eduFloat {
  from { transform: translate3d(0,0,0) scale(1); }
  to { transform: translate3d(28px,-34px,0) scale(1.12); }
}

@keyframes eduDrift {
  0%, 100% { transform: translate3d(0,0,0) rotate(var(--r)); }
  50% { transform: translate3d(-18px,-26px,0) rotate(calc(var(--r) + 10deg)); }
}

.site-header {
  position: sticky !important;
  top: 14px;
  z-index: 30;
  padding-inline: 16px;
}

.nav {
  max-width: 1240px;
  margin: 0 auto;
  padding: 13px 16px !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  background: rgba(3, 7, 18, .62) !important;
  border-radius: 28px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.28) !important;
  backdrop-filter: blur(22px) saturate(130%);
}

.brand-logo {
  box-shadow: 0 12px 34px rgba(56,189,248,.18);
}

.brand h1, .brand p, .menu a, .nav a { color: var(--premium-text); }
.menu a {
  border-radius: 999px;
  padding: 10px 12px;
  transition: background .2s ease, transform .2s ease, color .2s ease;
}
.menu a:hover {
  background: rgba(255,255,255,.10);
  color: #bae6fd;
  transform: translateY(-1px);
}

.hero,
.section,
.site-section,
.courses,
.register-section,
.support-section,
.bottom-contact-section {
  position: relative;
}

.hero {
  border-radius: 36px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background:
    linear-gradient(135deg, rgba(15,23,42,.78), rgba(2,6,23,.52)) !important;
  box-shadow: var(--premium-shadow) !important;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 25%, rgba(56,189,248,.18), transparent 35%),
    radial-gradient(circle at 83% 72%, rgba(34,197,94,.13), transparent 30%),
    linear-gradient(120deg, transparent 0%, rgba(255,255,255,.055) 46%, transparent 52%);
  animation: premiumShine 7s ease-in-out infinite;
}

@keyframes premiumShine {
  0%, 100% { transform: translateX(-8%); opacity: .45; }
  50% { transform: translateX(8%); opacity: .78; }
}

.hero h1, .hero h2, .section h2, .bottom-contact-head h2 {
  letter-spacing: -.7px;
  text-shadow: 0 12px 38px rgba(0,0,0,.22);
}

.hero h1, .hero h2 {
  background: linear-gradient(135deg, #fff 10%, #bae6fd 46%, #bbf7d0 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

.btn, button, input[type="submit"], .course-action-btn {
  border-radius: 18px !important;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
}

.btn:hover, button:hover, input[type="submit"]:hover, .course-action-btn:hover {
  transform: translateY(-3px);
  filter: brightness(1.05);
}

.btn.green, .course-action-btn.primary, button[type="submit"], input[type="submit"] {
  background: linear-gradient(135deg, #22c55e, #10b981 48%, #0ea5e9) !important;
  box-shadow: 0 16px 34px rgba(34,197,94,.22) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
}

.btn.secondary, .course-action-btn.secondary {
  background: rgba(255,255,255,.09) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  backdrop-filter: blur(14px);
}

.feature-card,
.course-card,
.form-card,
.bottom-contact-card,
.about-card,
.daily-card,
.footer-cert-logo {
  border: 1px solid rgba(255,255,255,.12) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.035)) !important;
  box-shadow: var(--premium-shadow) !important;
  backdrop-filter: blur(18px) saturate(125%);
}

.course-card,
.feature-card,
.form-card,
.bottom-contact-card {
  position: relative;
  overflow: hidden;
}

.course-card::before,
.feature-card::before,
.form-card::before,
.bottom-contact-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(56,189,248,.13), transparent 34%, rgba(34,197,94,.09));
  opacity: .72;
}

.course-card > *, .feature-card > *, .form-card > *, .bottom-contact-card > * {
  position: relative;
  z-index: 1;
}

.course-card {
  transform: translateY(0);
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease !important;
}

.course-card:hover {
  transform: translateY(-8px);
  border-color: rgba(56,189,248,.34) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.42) !important;
}

.course-card img,
.course-image img,
.about-card img {
  transition: transform .5s ease, filter .3s ease;
}
.course-card:hover img,
.course-image:hover img {
  transform: scale(1.045);
  filter: saturate(1.12) contrast(1.04);
}

.course-info-box {
  gap: 12px !important;
}
.course-info-item {
  background: rgba(2,6,23,.42) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
.course-info-icon {
  background: linear-gradient(135deg, rgba(56,189,248,.22), rgba(34,197,94,.16)) !important;
}
.course-teachers-dropdown {
  background: rgba(2,6,23,.44) !important;
  border-color: rgba(255,255,255,.13) !important;
}
.course-teachers-dropdown[open] {
  box-shadow: inset 0 0 0 1px rgba(56,189,248,.16);
}

input, textarea, select {
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(2,6,23,.46) !important;
  color: #fff !important;
  border-radius: 18px !important;
  outline: none !important;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
input:focus, textarea:focus, select:focus {
  border-color: rgba(56,189,248,.55) !important;
  box-shadow: 0 0 0 4px rgba(56,189,248,.12) !important;
  background: rgba(2,6,23,.62) !important;
}
::placeholder { color: rgba(226,232,240,.48) !important; }

.bottom-contact-card,
.footer {
  overflow: hidden;
}
.footer {
  margin-top: 34px;
  border-top: 1px solid rgba(255,255,255,.11);
  background: linear-gradient(180deg, transparent, rgba(2,6,23,.70));
}
.footer-inner {
  color: rgba(226,232,240,.82) !important;
}

.social-icon, .footer-cert-logo {
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease !important;
}
.social-icon:hover, .footer-cert-logo:hover {
  transform: translateY(-5px) scale(1.03) !important;
}

.map-embed iframe, .map-embed {
  border-radius: 26px !important;
  overflow: hidden;
}

@media (max-width: 900px) {
  .site-header { top: 8px; padding-inline: 10px; }
  .nav { border-radius: 22px !important; }
  .edu-symbol { opacity: .46; transform: scale(.82); }
}

@media (max-width: 640px) {
  .edu-symbol { display: none; }
  .edu-orb { opacity: .22; }
  .hero { border-radius: 26px !important; }
  .nav { padding: 10px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}