/* ============================================================
   ACCOUNTING BABA — Premium Animation & Design Layer
   ============================================================ */

/* --- Animation Tokens --- */
:root {
  --ease-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-micro:  150ms;
  --dur-fast:   250ms;
  --dur-normal: 400ms;
  --dur-slow:   600ms;
  --dur-slower: 900ms;
}

/* ============================================================
   SCROLL PROGRESS BAR
   ============================================================ */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  z-index: 9999;
  pointer-events: none;
  background: linear-gradient(90deg, #6DBE3B 0%, #A8E07A 50%, #6DBE3B 100%);
  background-size: 200% 100%;
  animation: progressShimmer 2.4s linear infinite;
  border-radius: 0 2px 2px 0;
  transition: width 80ms linear;
}
@keyframes progressShimmer {
  0%   { background-position:  200% 0 }
  100% { background-position: -200% 0 }
}

/* ============================================================
   BACK TO TOP
   ============================================================ */
#back-top {
  position: fixed;
  bottom: 100px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(13,13,13,0.88);
  border: 1.5px solid rgba(109,190,59,0.45);
  color: #6DBE3B;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 300;
  opacity: 0;
  transform: translateY(16px) scale(0.9);
  transition: opacity 0.35s var(--ease-expo),
              transform 0.35s var(--ease-expo),
              background 0.2s ease,
              border-color 0.2s ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
#back-top.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
#back-top:hover {
  background: #6DBE3B;
  color: #fff;
  border-color: #6DBE3B;
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 8px 28px rgba(109,190,59,0.4);
}

/* ============================================================
   NAV — BLUR ON SCROLL
   ============================================================ */
.nav {
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}
.nav.scrolled {
  background: rgba(13,13,13,0.82) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  border-bottom: 1px solid rgba(109,190,59,0.12) !important;
  box-shadow: 0 1px 40px rgba(0,0,0,0.35) !important;
}

/* ============================================================
   HERO — ANIMATED BLOBS
   ============================================================ */
.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  pointer-events: none;
  z-index: 1;
}
.hero-blob-1 {
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(109,190,59,0.18) 0%, transparent 70%);
  top: -120px;
  right: -80px;
  animation: blobDrift1 10s ease-in-out infinite;
}
.hero-blob-2 {
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(109,190,59,0.1) 0%, transparent 70%);
  bottom: -60px;
  left: 15%;
  animation: blobDrift2 13s ease-in-out infinite;
}
.hero-blob-3 {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(168,224,122,0.12) 0%, transparent 70%);
  top: 40%;
  left: 42%;
  animation: blobDrift1 8s ease-in-out infinite reverse;
}
@keyframes blobDrift1 {
  0%,100% { transform: translate(0px,   0px)  scale(1);    }
  33%      { transform: translate(24px, -18px) scale(1.06); }
  66%      { transform: translate(-16px, 20px) scale(0.95); }
}
@keyframes blobDrift2 {
  0%,100% { transform: translate(0px,  0px)  scale(1);    }
  33%      { transform: translate(-20px, 22px) scale(1.04); }
  66%      { transform: translate(18px, -16px) scale(0.97); }
}

/* Particle canvas */
#hero-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.65;
}
.hero-canvas-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.65;
}

/* ============================================================
   HERO — ENHANCED GLASSMORPHISM FORM
   ============================================================ */
.glass {
  background: linear-gradient(135deg,
    rgba(255,255,255,0.13) 0%,
    rgba(255,255,255,0.05) 100%
  ) !important;
  backdrop-filter: blur(28px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow:
    0 40px 100px rgba(0,0,0,0.65),
    0 0 0 1px rgba(255,255,255,0.04),
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 0 60px rgba(109,190,59,0.06) !important;
  animation: formFloat 6s ease-in-out infinite;
}
@keyframes formFloat {
  0%,100% { transform: translateY(0px);  }
  50%      { transform: translateY(-8px); }
}

/* ============================================================
   SECTION REVEALS — data-reveal system
   ============================================================ */
[data-reveal] {
  opacity: 0;
  will-change: transform, opacity;
  transition:
    opacity  var(--dur-slow) var(--ease-expo),
    transform var(--dur-slow) var(--ease-expo);
}
[data-reveal="up"]    { transform: translateY(44px); }
[data-reveal="down"]  { transform: translateY(-30px); }
[data-reveal="left"]  { transform: translateX(44px); }
[data-reveal="right"] { transform: translateX(-44px); }
[data-reveal="scale"] { transform: scale(0.88); }
[data-reveal="fade"]  { transform: none; }
[data-reveal].revealed {
  opacity: 1;
  transform: none;
}

/* ============================================================
   CARD GLOW — magnetic spotlight + hover lift
   ============================================================ */
.card-glow {
  position: relative;
  transition:
    box-shadow  0.35s var(--ease-expo),
    transform   0.35s var(--ease-expo),
    border-color 0.25s ease !important;
  overflow: hidden;
}
.card-glow::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(109,190,59,0.15) 0%,
    transparent 70%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  left: var(--mouse-x, 50%);
  top:  var(--mouse-y, 50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}
.card-glow:hover::before { opacity: 1; }
.card-glow:hover {
  box-shadow:
    0 24px 64px rgba(109,190,59,0.18),
    0 4px 20px rgba(0,0,0,0.15),
    0 0 0 1.5px rgba(109,190,59,0.3) !important;
  transform: translateY(-7px) !important;
  border-color: rgba(109,190,59,0.45) !important;
}

/* ============================================================
   3D TILT CARD
   ============================================================ */
.tilt-card {
  transform-style: preserve-3d;
  will-change: transform;
}

/* ============================================================
   BUTTON — RIPPLE EFFECT
   ============================================================ */
.btn-p, .btn-s, .btn-enroll, .fsub, .nav-call, .jb-cta {
  position: relative;
  overflow: hidden;
}
.btn-p::after, .btn-s::after, .btn-enroll::after,
.fsub::after, .nav-call::after, .jb-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.15);
  border-radius: inherit;
  opacity: 0;
  transform: scale(0);
  transform-origin: center;
  transition: transform 0.4s ease, opacity 0.4s ease;
  pointer-events: none;
}
.btn-p:active::after, .btn-s:active::after, .btn-enroll:active::after,
.fsub:active::after, .nav-call:active::after, .jb-cta:active::after {
  transform: scale(1);
  opacity: 0;
  transition: transform 0s, opacity 0s;
}

/* ============================================================
   BUTTON — MAGNETIC LIFT
   ============================================================ */
.btn-p, .btn-enroll, .fsub, .nav-call, .jb-cta {
  transition: background 0.2s ease, transform 0.3s var(--ease-expo),
              box-shadow 0.3s var(--ease-expo) !important;
}
.btn-p:hover, .btn-enroll:hover, .fsub:hover,
.nav-call:hover, .jb-cta:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 12px 30px rgba(109,190,59,0.35) !important;
}
.btn-p:active, .btn-enroll:active, .fsub:active,
.nav-call:active, .jb-cta:active {
  transform: translateY(-1px) scale(0.98) !important;
}

/* ============================================================
   WHY CARDS — icon bounce + shimmer sweep
   ============================================================ */
.why-card {
  position: relative;
  overflow: hidden;
  transition:
    box-shadow  0.3s var(--ease-expo),
    transform   0.3s var(--ease-expo),
    border-color 0.25s ease !important;
}
.why-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(109,190,59,0.06),
    transparent);
  transform: skewX(-15deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
.why-card:hover::after { left: 150%; }
.why-card:hover {
  box-shadow: 0 16px 48px rgba(109,190,59,0.14) !important;
  transform: translateY(-5px) !important;
  border-color: rgba(109,190,59,0.4) !important;
}
.why-icon {
  transition: background 0.3s var(--ease-spring),
              transform  0.3s var(--ease-spring) !important;
}
.why-card:hover .why-icon {
  background: var(--green) !important;
  transform: scale(1.15) rotate(-8deg) !important;
}

/* ============================================================
   FACULTY CARDS — shimmer sweep
   ============================================================ */
.fac-card {
  position: relative;
  overflow: hidden;
  transition:
    box-shadow   0.35s var(--ease-expo),
    transform    0.35s var(--ease-expo),
    border-color 0.25s ease !important;
}
.fac-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(109,190,59,0.05),
    transparent);
  transform: skewX(-15deg);
  transition: left 0.55s ease;
  pointer-events: none;
}
.fac-card:hover::after { left: 150%; }
.fac-card:hover {
  box-shadow: 0 16px 44px rgba(109,190,59,0.2) !important;
  transform: translateY(-6px) !important;
  border-color: rgba(109,190,59,0.5) !important;
}

/* ============================================================
   COURSE CARDS — glow border + lift
   ============================================================ */
.acct-card, .fin-card {
  transition:
    box-shadow  0.35s var(--ease-expo),
    border-color 0.25s ease !important;
}
.acct-card:hover {
  box-shadow: 0 20px 64px rgba(109,190,59,0.2),
              0 0 0 1px rgba(109,190,59,0.3) !important;
}
.ccard {
  transition:
    box-shadow  0.3s var(--ease-expo),
    transform   0.3s var(--ease-expo),
    border-color 0.25s ease !important;
}
.ccard:hover {
  box-shadow: 0 20px 52px rgba(0,0,0,0.15) !important;
  transform: translateY(-7px) !important;
  border-color: rgba(109,190,59,0.4) !important;
}

/* ============================================================
   STAT SECTION — animated radial pulse
   ============================================================ */
.stat-inter {
  position: relative;
  overflow: hidden;
}
.stat-inter::after {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  border: 1px solid rgba(109,190,59,0.08);
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) scale(0.3);
  animation: statPulse 4s ease-out infinite;
  pointer-events: none;
}
@keyframes statPulse {
  0%   { transform: translate(-50%,-50%) scale(0.3); opacity: 0.8; }
  100% { transform: translate(-50%,-50%) scale(1.4); opacity: 0;   }
}
.stn {
  transition: color 0.3s ease;
  cursor: default;
}
.stn:hover { color: #A8E07A !important; }

/* ============================================================
   HERO TRUST STRIP — hover glow
   ============================================================ */
.ti {
  transition: background 0.25s ease !important;
  cursor: default;
}
.ti:hover {
  background: rgba(109,190,59,0.06) !important;
}
.ti:hover .tn { color: #A8E07A !important; }
.tn { transition: color 0.25s ease; }

/* ============================================================
   SECTION HEADING — gradient underline
   ============================================================ */
.sh2 {
  position: relative;
  display: inline-block;
}

/* ============================================================
   ANCHOR NAV — active pill indicator
   ============================================================ */
.anav a {
  position: relative;
  transition: color 0.2s ease, border-bottom-color 0.2s ease !important;
}
.anav a.on::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 12px;
  right: 12px;
  height: 2px;
  background: var(--green);
  border-radius: 2px;
  animation: pillIn 0.25s var(--ease-expo);
}
@keyframes pillIn {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ============================================================
   FAQ — smooth open/close
   ============================================================ */
.faq-item {
  transition: border-color 0.25s ease !important;
}
.faq-q {
  transition: background 0.2s ease !important;
}

/* ============================================================
   GALLERY ITEM — hover zoom
   ============================================================ */
.g-item {
  transition: transform 0.3s var(--ease-expo), box-shadow 0.3s ease !important;
}
.g-item:hover {
  transform: scale(1.06) !important;
  box-shadow: 0 10px 32px rgba(0,0,0,0.22) !important;
}

/* ============================================================
   BRANCH CARDS
   ============================================================ */
.br-card {
  transition:
    box-shadow  0.3s var(--ease-expo),
    transform   0.3s var(--ease-expo) !important;
}
.br-card:hover {
  box-shadow: 0 14px 42px rgba(0,0,0,0.1) !important;
  transform: translateY(-5px) !important;
}

/* ============================================================
   COMPARISON TABLE — row hover
   ============================================================ */
.crow:not(.crow-h) {
  transition: background 0.2s ease;
}
.crow:not(.crow-h):hover {
  background: rgba(109,190,59,0.03);
}

/* ============================================================
   FLOATING WA BUTTON — enhanced
   ============================================================ */
.wa-float {
  transition: transform 0.3s var(--ease-spring),
              box-shadow 0.3s ease !important;
}
.wa-float:hover {
  transform: scale(1.14) !important;
  box-shadow: 0 8px 32px rgba(37,211,102,0.55) !important;
}

/* ============================================================
   TESTIMONIAL CARDS
   ============================================================ */
.sc {
  transition:
    box-shadow 0.3s var(--ease-expo),
    transform  0.3s var(--ease-expo),
    border-color 0.25s ease !important;
}
.sc:hover {
  box-shadow: 0 12px 36px rgba(109,190,59,0.15) !important;
  transform: translateY(-4px) !important;
  border-color: rgba(109,190,59,0.35) !important;
}

/* ============================================================
   BUNDLE CARDS
   ============================================================ */
.bun-card:not(.feat) {
  transition:
    box-shadow  0.3s var(--ease-expo),
    transform   0.3s var(--ease-expo),
    border-color 0.25s ease !important;
}
.bun-card:not(.feat):hover {
  box-shadow: 0 16px 44px rgba(0,0,0,0.12) !important;
  transform: translateY(-5px) !important;
  border-color: rgba(109,190,59,0.35) !important;
}

/* ============================================================
   SUCCESS STORY CARDS
   ============================================================ */
.sf {
  transition:
    box-shadow 0.35s var(--ease-expo),
    transform  0.35s var(--ease-expo) !important;
}
.sf:hover {
  box-shadow: 0 24px 72px rgba(109,190,59,0.22) !important;
  transform: translateY(-4px) !important;
}

/* ============================================================
   HERO PILL — float animation
   ============================================================ */
.hero-pill {
  animation: heroPillFloat 4s ease-in-out infinite !important;
}
@keyframes heroPillFloat {
  0%,100% { transform: translateY(0px) translateX(0px); }
  50%      { transform: translateY(-3px) translateX(1px); }
}

/* ============================================================
   GRADIENT TEXT (hero em)
   ============================================================ */
.hero-h1 em {
  background: linear-gradient(135deg, #6DBE3B 0%, #A8E07A 45%, #6DBE3B 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientFlow 3s ease-in-out infinite alternate;
}
@keyframes gradientFlow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* ============================================================
   PLACEMENT STEPS
   ============================================================ */
.pl-step {
  transition:
    box-shadow 0.3s var(--ease-expo),
    transform  0.3s var(--ease-expo) !important;
}
.pl-step:hover {
  box-shadow: 0 12px 40px rgba(109,190,59,0.14) !important;
  transform: translateY(-4px) !important;
}

/* ============================================================
   SECTION LABEL — animated dot
   ============================================================ */
.slbl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.slbl::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: dotPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes dotPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}

/* ============================================================
   INPUT FOCUS GLOW
   ============================================================ */
.ff input:focus, .ff select:focus {
  box-shadow: 0 0 0 3px rgba(109,190,59,0.25),
              0 0 16px rgba(109,190,59,0.1) !important;
  transform: scale(1.01);
  transition: box-shadow 0.25s ease, transform 0.25s ease !important;
}
.ff input, .ff select {
  transition: box-shadow 0.25s ease, transform 0.25s ease !important;
}

/* ============================================================
   FOOTER SOCIAL ICONS
   ============================================================ */
.fsoc {
  transition: background 0.2s ease, color 0.2s ease,
              transform 0.3s var(--ease-spring),
              box-shadow 0.3s ease !important;
}
.fsoc:hover {
  transform: translateY(-4px) scale(1.1) !important;
  box-shadow: 0 6px 18px rgba(109,190,59,0.2) !important;
  background: rgba(109,190,59,0.15) !important;
  color: #6DBE3B !important;
}

/* ============================================================
   HERO BG GRID OVERLAY
   ============================================================ */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(109,190,59,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(109,190,59,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 1;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%,
    black 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%,
    black 20%, transparent 100%);
}

/* ============================================================
   NUMBER COUNTER — tabular-nums for smooth animation
   ============================================================ */
.tn, [data-target] {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   CHECKOUT PAGE — form card hover
   ============================================================ */
.co-card {
  transition: box-shadow 0.3s var(--ease-expo) !important;
}
.co-card:hover {
  box-shadow: 0 8px 36px rgba(0,0,0,0.08) !important;
}
.course-opt {
  transition: border-color 0.2s ease, background 0.2s ease,
              transform 0.2s var(--ease-expo) !important;
}
.course-opt:hover {
  transform: scale(1.02) !important;
}
.pay-opt {
  transition: border-color 0.2s ease, background 0.2s ease,
              transform 0.2s var(--ease-expo) !important;
}
.pay-opt:hover {
  transform: scale(1.02) !important;
}

/* ============================================================
   COURSE DETAIL PAGES — hero section
   ============================================================ */
.course-hero {
  position: relative;
  overflow: hidden;
}
.course-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(109,190,59,0.4), transparent);
}

/* ============================================================
   PREFERS REDUCED MOTION — respect user setting
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.05ms !important;
  }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
  .glass {
    animation: none !important;
    transform: none !important;
  }
  .hero-blob { animation: none !important; }
  .hero-pill { animation: none !important; }
}