/* =========================================================================
   CodeAugs V3 — Premium edTech Enhancement Layer
   Non-destructive overlay on top of Mobirise. Safe to remove standalone.
   Brand: Cyan #00E5FF • Purple #A855F7 • Dark #0A0F1C
   ========================================================================= */

:root {
  --ca-cyan: #00E5FF;
  --ca-purple: #A855F7;
  --ca-dark: #0A0F1C;
  --ca-glass-bg: rgba(15, 22, 41, 0.55);
  --ca-glass-border: rgba(255, 255, 255, 0.10);
  --ca-glow-cyan: 0 0 24px rgba(0, 229, 255, 0.35);
  --ca-glow-purple: 0 0 24px rgba(168, 85, 247, 0.35);
  --ca-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* -------------------------------------------------------------------------
   1) GLOBAL SCROLL REVEAL
   ------------------------------------------------------------------------- */
.ca-reveal {
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  transition:
    opacity 0.7s var(--ca-ease),
    transform 0.7s var(--ca-ease);
  will-change: opacity, transform;
}
.ca-reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.ca-reveal.is-leaving {
  opacity: 0;
  transform: translateY(-20px) scale(0.99);
}

/* Stagger helpers for grouped children */
.ca-reveal[data-ca-delay="1"] { transition-delay: 0.08s; }
.ca-reveal[data-ca-delay="2"] { transition-delay: 0.16s; }
.ca-reveal[data-ca-delay="3"] { transition-delay: 0.24s; }
.ca-reveal[data-ca-delay="4"] { transition-delay: 0.32s; }
.ca-reveal[data-ca-delay="5"] { transition-delay: 0.40s; }
.ca-reveal[data-ca-delay="6"] { transition-delay: 0.48s; }

@media (prefers-reduced-motion: reduce) {
  .ca-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* -------------------------------------------------------------------------
   2) CARD SYSTEM ENHANCEMENT (glassmorphism + glow + lift)
   Targets common Mobirise card containers; non-breaking.
   ------------------------------------------------------------------------- */
.features10 .card-box,
.features16 .card-wrapper,
.pricing1 .item-wrapper,
.features027 .item-wrapper,
.people05 .item-wrapper,
.features03 .item-wrapper,
.ca-card {
  position: relative;
  border-radius: 18px;
  background: var(--ca-glass-bg);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--ca-glass-border);
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    transform 0.45s var(--ca-ease),
    box-shadow 0.45s var(--ca-ease),
    border-color 0.45s var(--ca-ease);
  overflow: hidden;
}

.features10 .card-box::before,
.features16 .card-wrapper::before,
.pricing1 .item-wrapper::before,
.features027 .item-wrapper::before,
.people05 .item-wrapper::before,
.features03 .item-wrapper::before,
.ca-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.45), rgba(168, 85, 247, 0.45));
  -webkit-mask:
     linear-gradient(#000 0 0) content-box,
     linear-gradient(#000 0 0);
          mask:
     linear-gradient(#000 0 0) content-box,
     linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.45s var(--ca-ease);
  pointer-events: none;
}

.features10 .card-box:hover,
.features16 .card-wrapper:hover,
.pricing1 .item-wrapper:hover,
.features027 .item-wrapper:hover,
.people05 .item-wrapper:hover,
.features03 .item-wrapper:hover,
.ca-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.45),
    var(--ca-glow-cyan),
    0 0 36px rgba(168, 85, 247, 0.20);
  border-color: rgba(0, 229, 255, 0.35);
}

.features10 .card-box:hover::before,
.features16 .card-wrapper:hover::before,
.pricing1 .item-wrapper:hover::before,
.features027 .item-wrapper:hover::before,
.people05 .item-wrapper:hover::before,
.features03 .item-wrapper:hover::before,
.ca-card:hover::before {
  opacity: 1;
}

/* Icons inside cards: subtle gradient glow */
.iconfont-wrapper .mbr-iconfont {
  background: linear-gradient(135deg, var(--ca-cyan), var(--ca-purple));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.35));
  transition: transform 0.4s var(--ca-ease), filter 0.4s var(--ca-ease);
}
.features10 .card-box:hover .mbr-iconfont,
.features16 .card-wrapper:hover .mbr-iconfont,
.ca-card:hover .mbr-iconfont {
  transform: scale(1.08) rotate(-3deg);
  filter: drop-shadow(0 0 16px rgba(168, 85, 247, 0.55));
}

/* -------------------------------------------------------------------------
   3) IMAGE / MEDIA SYSTEM
   ------------------------------------------------------------------------- */
.ca-media {
  overflow: hidden;
  border-radius: 14px;
}
.ca-media img,
.ca-media video,
img.ca-media-img {
  transition: transform 0.7s var(--ca-ease), filter 0.7s var(--ca-ease);
  will-change: transform;
}
.ca-media:hover img,
.ca-media:hover video,
img.ca-media-img:hover {
  transform: scale(1.04);
  filter: saturate(1.1);
}

/* -------------------------------------------------------------------------
   4) HERO AUTO-LOOP SHOWCASE (Build • Learn • Augment)
   Injected by JS into the homepage hero (#hero-17-v7TEMMWHZC).
   ------------------------------------------------------------------------- */
.ca-hero-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.ca-hero-stage::after {
  /* radial brand glow */
  content: "";
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(40% 50% at 80% 20%, rgba(0, 229, 255, 0.18), transparent 60%),
    radial-gradient(45% 55% at 15% 85%, rgba(168, 85, 247, 0.18), transparent 60%);
  pointer-events: none;
}
.ca-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.9s var(--ca-ease), transform 4s linear;
  background-size: cover;
  background-position: center;
}
.ca-hero-slide.is-active {
  opacity: 0.55;
  transform: scale(1);
}
.ca-hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(10, 15, 28, 0.85) 0%, rgba(10, 15, 28, 0.55) 50%, rgba(10, 15, 28, 0.85) 100%);
}

#hero-17-v7TEMMWHZC { position: relative; overflow: hidden; }
#hero-17-v7TEMMWHZC .container-fluid { position: relative; z-index: 2; }

/* Hero rotating headline panel */
.ca-hero-panel {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: rgba(10, 15, 28, 0.55);
  border: 1px solid rgba(0, 229, 255, 0.35);
  backdrop-filter: blur(10px);
  box-shadow: var(--ca-glow-cyan);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #e6f7ff;
}
.ca-hero-panel .ca-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ca-cyan);
  box-shadow: 0 0 10px var(--ca-cyan);
  animation: caPulse 1.6s var(--ca-ease) infinite;
}
.ca-hero-panel .ca-word {
  position: relative;
  min-width: 88px;
  display: inline-block;
  font-weight: 700;
  background: linear-gradient(90deg, var(--ca-cyan), var(--ca-purple));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: opacity 0.5s var(--ca-ease), transform 0.5s var(--ca-ease);
}
.ca-hero-panel .ca-word.is-out {
  opacity: 0; transform: translateY(-8px);
}
.ca-hero-panel .ca-tagline {
  color: #cbd5e1;
  font-weight: 400;
  letter-spacing: 0.12em;
  transition: opacity 0.5s var(--ca-ease);
}
.ca-hero-panel .ca-tagline.is-out { opacity: 0; }

@keyframes caPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.6; }
}

/* -------------------------------------------------------------------------
   5) ABOUT PAGE CINEMATIC HERO ENHANCEMENT
   ------------------------------------------------------------------------- */
#header17-u { position: relative; overflow: hidden; }
#header17-u .mbr-parallax-background,
#header17-u { isolation: isolate; }
#header17-u::before {
  content: "";
  position: absolute;
  inset: -8%;
  background: inherit;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  animation: caHeroZoom 14s var(--ca-ease) forwards;
  z-index: 0;
  pointer-events: none;
}
#header17-u::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 60% at 75% 30%, rgba(0, 229, 255, 0.18), transparent 60%),
    radial-gradient(50% 70% at 20% 80%, rgba(168, 85, 247, 0.18), transparent 65%);
  z-index: 1;
  pointer-events: none;
}
#header17-u .container-fluid,
#header17-u .container { position: relative; z-index: 2; }

@keyframes caHeroZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.05); }
}

.ca-about-tagline {
  display: inline-block;
  margin-top: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #e6f7ff;
  background: rgba(10, 15, 28, 0.55);
  border: 1px solid rgba(168, 85, 247, 0.4);
  backdrop-filter: blur(8px);
  box-shadow: var(--ca-glow-purple);
}

/* -------------------------------------------------------------------------
   6) COUNT-UP STATISTICS
   ------------------------------------------------------------------------- */
.ca-count {
  background: linear-gradient(135deg, var(--ca-cyan), var(--ca-purple));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(0, 229, 255, 0.35));
}

/* -------------------------------------------------------------------------
   7) BUTTON ACCENTS — preserve Mobirise classes, add subtle glow
   ------------------------------------------------------------------------- */
.btn.btn-primary,
.btn.btn-warning-outline,
.btn.btn-info-outline {
  position: relative;
  transition: transform 0.3s var(--ca-ease), box-shadow 0.3s var(--ca-ease), filter 0.3s var(--ca-ease);
}
.btn.btn-primary:hover,
.btn.btn-warning-outline:hover,
.btn.btn-info-outline:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 229, 255, 0.25), 0 0 24px rgba(168, 85, 247, 0.25);
  filter: brightness(1.08);
}

/* -------------------------------------------------------------------------
   8) MOBILE TUNING
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .ca-reveal { transform: translateY(20px) scale(0.99); }
  .ca-hero-slide.is-active { opacity: 0.45; }
  .features10 .card-box:hover,
  .features16 .card-wrapper:hover,
  .pricing1 .item-wrapper:hover,
  .ca-card:hover {
    transform: translateY(-3px);
  }
  .ca-hero-panel { font-size: 0.72rem; padding: 8px 14px; }
}