/* Homepage Learning & Development — centered, image-free Lime hero. */
.learning.learning-home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(620px, calc(100vh - 86px), 920px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(84px, 9vw, 128px) 0;
  background:
    radial-gradient(circle at 10% 10%, rgba(160,236,0,.14), transparent 18%),
    radial-gradient(circle at 50% 50%, rgba(160,236,0,.05), transparent 28%),
    linear-gradient(112deg, #edf3f8 0%, #eaf1f7 52%, #e4edf5 100%);
  color: #002b66;
}

.learning.learning-home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 6% 14%, rgba(160,236,0,.13), transparent 17%),
    radial-gradient(circle at 94% 82%, rgba(0,43,102,.08), transparent 24%),
    linear-gradient(90deg, rgba(255,255,255,.14), transparent 58%);
}


/* Free-moving Lime light: a soft, continuous light sweep behind the centered copy. */
.learning-home-hero .learning-light-drift {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: clamp(220px, 28vw, 430px);
  height: clamp(220px, 28vw, 430px);
  border-radius: 50%;
  pointer-events: none;
  opacity: .72;
  filter: blur(28px);
  background: radial-gradient(circle, rgba(160,236,0,.25) 0%, rgba(160,236,0,.12) 28%, rgba(160,236,0,.035) 54%, transparent 72%);
  mix-blend-mode: screen;
  animation: learningFreeLight 18s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes learningFreeLight {
  0%   { transform: translate3d(-22%, 8%, 0) scale(.82); }
  22%  { transform: translate3d(38vw, 4vh, 0) scale(1.12); }
  48%  { transform: translate3d(68vw, 38vh, 0) scale(.9); }
  73%  { transform: translate3d(34vw, 62vh, 0) scale(1.18); }
  100% { transform: translate3d(-8vw, 42vh, 0) scale(.94); }
}

/* Decorative orbital ring kept fully inside the section so it does not crop awkwardly. */
.learning.learning-home-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: clamp(420px, 58vw, 920px);
  aspect-ratio: 1;
  border: 1px solid rgba(105,185,0,.26);
  border-left-color: rgba(105,185,0,.08);
  border-bottom-color: rgba(105,185,0,.12);
  border-radius: 50%;
  box-shadow:
    0 0 0 26px rgba(139,217,0,.05),
    0 0 0 62px rgba(139,217,0,.03),
    inset 0 0 80px rgba(139,217,0,.03);
  transform: translate(-50%, -50%);
  transform-origin: center;
  pointer-events: none;
  animation: learningHeroOrbit 34s linear infinite;
}

.learning-home-hero .container.learning-grid {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - clamp(40px, 6vw, 120px)));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.learning-home-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  max-width: 980px;
  margin-inline: auto;
  text-align: center;
  animation: learningCopyEnter .75s cubic-bezier(.2,.7,.2,1) both;
}

.learning-home-hero .section-kicker {
  display: inline-block;
  margin: 0 0 clamp(22px, 2vw, 30px);
  color: #69b900;
  letter-spacing: .14em;
}

.learning-home-hero h2 {
  display: block;
  width: min(100%, 840px);
  margin: 0 auto clamp(22px, 2.2vw, 34px);
  color: #002b66;
  font-size: clamp(56px, 6.2vw, 94px);
  line-height: 1.02;
  letter-spacing: -.065em;
  font-weight: 800;
  overflow-wrap: normal;
}

.learning-home-hero h2 span { color: #8bd900; }

.learning-home-hero p {
  display: block;
  width: min(100%, 760px);
  margin: 0 auto;
  color: #66788f;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.9;
}

.learning-home-hero .btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(30px, 3vw, 44px);
  min-width: 288px;
  min-height: 66px;
  padding: 20px 34px;
  border-radius: 6px;
  text-align: center;
  box-shadow:
    0 14px 34px rgba(160,236,0,.18),
    0 0 0 1px rgba(160,236,0,.28);
  animation: learningButtonFloat 4.2s ease-in-out infinite;
  overflow: visible;
}

.learning-home-hero .btn::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 14px;
  border: 1px solid rgba(160,236,0,.18);
  background: radial-gradient(circle at 50% 50%, rgba(160,236,0,.08), transparent 68%);
  z-index: -2;
  pointer-events: none;
}

.learning-home-hero .btn::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 8px;
  box-shadow: 0 0 22px rgba(160,236,0,.26), 0 0 42px rgba(160,236,0,.12);
  opacity: .95;
  z-index: -1;
  pointer-events: none;
  animation: learningButtonGlow 2.6s ease-in-out infinite;
}

.learning-home-hero .btn span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: transform .25s ease;
}

.learning-home-hero .btn:hover,
.learning-home-hero .btn:focus-visible {
  transform: translateY(-3px) scale(1.01);
}

.learning-home-hero .btn:hover span,
.learning-home-hero .btn:focus-visible span {
  transform: translate(3px, -2px);
}

html[data-theme="dark"] .learning.learning-home-hero {
  background:
    radial-gradient(circle at 10% 10%, rgba(160,236,0,.14), transparent 18%),
    radial-gradient(circle at 52% 48%, rgba(160,236,0,.05), transparent 30%),
    linear-gradient(112deg, #041a3b 0%, #06234e 54%, #082b59 100%) !important;
  color: #f7fbff;
}

html[data-theme="dark"] .learning.learning-home-hero::before {
  background:
    radial-gradient(circle at 6% 14%, rgba(160,236,0,.13), transparent 17%),
    radial-gradient(circle at 94% 82%, rgba(43,116,190,.12), transparent 24%),
    linear-gradient(90deg, rgba(0,12,32,.12), transparent 60%);
}

html[data-theme="dark"] .learning.learning-home-hero::after {
  border-color: rgba(160,236,0,.34);
  border-left-color: rgba(160,236,0,.08);
  border-bottom-color: rgba(160,236,0,.14);
  box-shadow:
    0 0 0 26px rgba(160,236,0,.055),
    0 0 0 62px rgba(160,236,0,.032),
    0 0 56px rgba(160,236,0,.10);
}

html[data-theme="dark"] .learning-home-hero h2 { color: #f8fbff !important; }
html[data-theme="dark"] .learning-home-hero h2 span { color: #a0ec00 !important; }
html[data-theme="dark"] .learning-home-hero p { color: #c8d4e7 !important; }
html[data-theme="dark"] .learning-home-hero .section-kicker { color: #a0ec00 !important; }

@keyframes learningCopyEnter {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes learningHeroOrbit {
  from { transform: translate(-50%, -50%) rotate(-20deg); }
  to { transform: translate(-50%, -50%) rotate(340deg); }
}

@keyframes learningButtonGlow {
  0%, 100% { opacity: .82; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.015); }
}

@keyframes learningButtonFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@media (max-width: 900px) {
  .learning.learning-home-hero {
    min-height: 620px;
    padding: 88px 0 84px;
  }
  .learning-home-hero .container.learning-grid { width: calc(100% - 44px); }
  .learning-home-copy { max-width: 760px; }
  .learning-home-hero h2 { font-size: clamp(48px, 8vw, 72px); }
  .learning-home-hero p { max-width: 680px; }
  .learning.learning-home-hero::after { width: clamp(360px, 74vw, 620px); }
}

@media (max-width: 550px) {
  .learning.learning-home-hero {
    min-height: 560px;
    padding: 76px 0 72px;
  }
  .learning-home-hero .container.learning-grid { width: calc(100% - 36px); }
  .learning-home-hero .section-kicker { font-size: 11px; margin-bottom: 20px; }
  .learning-home-hero h2 { font-size: clamp(42px, 10.5vw, 58px); line-height: 1.04; }
  .learning-home-hero p { font-size: 14px; line-height: 1.85; }
  .learning-home-hero .btn {
    min-width: 232px;
    min-height: 60px;
    padding: 18px 24px;
    margin-top: 28px;
  }
  .learning.learning-home-hero::after { width: 330px; }
  .learning-home-hero .learning-light-drift { width: 230px; height: 230px; filter: blur(22px); }
}

@media (prefers-reduced-motion: reduce) {
  .learning-home-copy,
  .learning-home-hero .btn,
  .learning.learning-home-hero::after,
  .learning-home-hero .learning-light-drift,
  .learning-home-hero .btn::after {
    animation: none;
  }
  .learning-home-hero .btn span { transition: none; }
}


/* Final refinement: keep the complete orbital circle inside the hero viewport. */
.learning.learning-home-hero::after {
  width: clamp(400px, min(52vw, calc(100vh - 250px)), 680px);
  max-width: calc(100% - 150px);
}

/* Soft Lime light starts in the upper-right and drifts around the hero smoothly. */
.learning-home-hero .learning-light-drift {
  top: 3%;
  right: 2.5%;
  left: auto;
  width: clamp(240px, 25vw, 420px);
  height: clamp(240px, 25vw, 420px);
  animation: learningFreeLight 24s cubic-bezier(.45, 0, .55, 1) infinite;
}

@keyframes learningFreeLight {
  0%, 100% { transform: translate3d(0, 0, 0) scale(.88); }
  24%      { transform: translate3d(-82%, 9vh, 0) scale(1.08); }
  50%      { transform: translate3d(-185%, 29vh, 0) scale(.94); }
  76%      { transform: translate3d(-72%, 38vh, 0) scale(1.13); }
}

@media (max-width: 900px) {
  .learning.learning-home-hero::after {
    width: clamp(400px, min(68vw, calc(100vh - 210px)), 620px);
    max-width: calc(100% - 110px);
  }
}

@media (max-width: 550px) {
  .learning.learning-home-hero::after {
    width: 330px;
    max-width: calc(100% - 110px);
  }
  .learning-home-hero .learning-light-drift {
    top: 2%;
    right: 0;
    left: auto;
    width: 220px;
    height: 220px;
    animation: learningFreeLightMobile 20s ease-in-out infinite;
  }
  @keyframes learningFreeLightMobile {
    0%, 100% { transform: translate3d(0, 0, 0) scale(.9); }
    35%      { transform: translate3d(-34%, 7vh, 0) scale(1.08); }
    70%      { transform: translate3d(-60%, 27vh, 0) scale(.96); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .learning-home-hero .learning-light-drift {
    animation: none !important;
  }
}

/* 3D headline finish: a restrained, soft shadow beneath the main learning headline. */
.learning-home-hero h2 {
  text-shadow:
    0 2px 0 rgba(0, 8, 28, .18),
    0 5px 12px rgba(0, 8, 28, .22),
    0 14px 28px rgba(0, 8, 28, .14);
}

.learning-home-hero h2 span {
  text-shadow:
    0 2px 0 rgba(48, 92, 0, .22),
    0 6px 16px rgba(160, 236, 0, .18),
    0 13px 26px rgba(0, 8, 28, .16);
}

@media (prefers-reduced-motion: reduce) {
  .learning-home-hero h2,
  .learning-home-hero h2 span {
    text-shadow:
      0 2px 0 rgba(0, 8, 28, .16),
      0 5px 12px rgba(0, 8, 28, .18);
  }
}


/* Explicit dark-mode 3D headline treatment: soft navy depth + subtle Lime bounce light. */
html[data-theme="dark"] .learning-home-hero h2 {
  color: #f8fbff !important;
  text-shadow:
    0 2px 0 rgba(0, 5, 20, .30),
    0 6px 14px rgba(0, 5, 20, .34),
    0 16px 32px rgba(0, 5, 20, .24) !important;
}

html[data-theme="dark"] .learning-home-hero h2 span {
  color: #a0ec00 !important;
  text-shadow:
    0 2px 0 rgba(25, 55, 0, .32),
    0 6px 16px rgba(160, 236, 0, .20),
    0 15px 30px rgba(0, 5, 20, .28) !important;
}

/* Keep the same polished depth in light mode without changing the brand palette. */
html:not([data-theme="dark"]) .learning-home-hero h2 {
  text-shadow:
    0 2px 0 rgba(0, 8, 28, .18),
    0 5px 12px rgba(0, 8, 28, .22),
    0 14px 28px rgba(0, 8, 28, .14);
}

html:not([data-theme="dark"]) .learning-home-hero h2 span {
  text-shadow:
    0 2px 0 rgba(48, 92, 0, .22),
    0 6px 16px rgba(160, 236, 0, .18),
    0 13px 26px rgba(0, 8, 28, .16);
}