/* Final visual and motion layer for the six middle panels. */
#services-cases,
#contact-network,
#career-academy {
  width: 100%;
  max-width: 100%;
  margin: 18px 0 !important;
  padding: 0 18px;
  gap: 18px;
  background: transparent;
}

#services,
#cases,
#contact,
#network,
#career,
#academy {
  --panel-accent: #0071e3;
  --panel-accent-soft: rgba(0, 113, 227, 0.10);
  --panel-accent-warm: rgba(255, 190, 90, 0.12);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: clamp(360px, 42vw, 520px);
  padding: 44px 0 !important;
  border: 1px solid rgba(29, 29, 31, 0.08) !important;
  border-radius: 0 !important;
  background:
    radial-gradient(ellipse 90% 60% at 50% -18%, var(--panel-accent-soft) 0%, transparent 58%),
    radial-gradient(ellipse 60% 45% at 96% 90%, var(--panel-accent-warm) 0%, transparent 62%),
    radial-gradient(circle, rgba(255, 255, 255, 0.72) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(0, 113, 227, 0.16) 0 1px, transparent 1.8px),
    linear-gradient(180deg, #f7f8fb 0%, #fbfbfd 52%, #ffffff 100%) !important;
  background-size: auto, auto, 118px 118px, 210px 210px, auto !important;
  background-position: center, center, 18px 28px, 78px 96px, center !important;
  background-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat !important;
  background-blend-mode: screen, screen, normal, normal, normal !important;
  color: var(--text) !important;
  box-shadow: none !important;
  transform: none !important;
}

#services { --panel-accent: #0071e3; --panel-accent-soft: rgba(0, 113, 227, 0.12); --panel-accent-warm: rgba(52, 199, 89, 0.10); }
#cases { --panel-accent: #2f7cf6; --panel-accent-soft: rgba(47, 124, 246, 0.10); --panel-accent-warm: rgba(255, 190, 90, 0.14); }
#contact { --panel-accent: #00a3c7; --panel-accent-soft: rgba(0, 163, 199, 0.10); --panel-accent-warm: rgba(0, 113, 227, 0.08); }
#network { --panel-accent: #34a853; --panel-accent-soft: rgba(52, 168, 83, 0.10); --panel-accent-warm: rgba(0, 113, 227, 0.10); }
#career { --panel-accent: #bf4800; --panel-accent-soft: rgba(191, 72, 0, 0.10); --panel-accent-warm: rgba(0, 113, 227, 0.10); }
#academy { --panel-accent: #6b7cff; --panel-accent-soft: rgba(107, 124, 255, 0.10); --panel-accent-warm: rgba(255, 190, 90, 0.12); }

.two-col-sections .section::before {
  content: "";
  position: absolute;
  inset: 0;
  border-top: 3px solid var(--panel-accent);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, transparent 34%);
  pointer-events: none;
}

.two-col-sections .section:hover {
  transform: none !important;
  box-shadow: none !important;
}

#services .container,
#cases .container,
#contact .container,
#network .container,
#career .container,
#academy .container {
  width: 100%;
  max-width: 760px;
  height: auto;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#services .section-title,
#cases .section-title,
#contact .section-title,
#network .section-title,
#career .section-title,
#academy .section-title,
#network .section-title-brand {
  width: 100%;
  color: var(--text) !important;
  font-size: clamp(2rem, 3.6vw, 3.05rem);
  line-height: 1.08;
  letter-spacing: 0;
  text-align: center !important;
  margin: 0 0 12px !important;
}

#services .section-subtitle,
#cases .section-subtitle,
#contact .section-subtitle,
#network .section-subtitle,
#career .section-subtitle,
#academy .section-subtitle {
  width: 100%;
  max-width: 42em;
  color: var(--text-tertiary) !important;
  font-size: 1.06rem;
  line-height: 1.52;
  text-align: center !important;
  margin: 0 auto 32px !important;
}

#network .network-desc,
#contact .academy-desc,
#career .career-desc,
#academy .contact-block p[data-i18n="contact_lead"],
#academy .contact-note,
#contact .academy-coming {
  color: var(--text-muted) !important;
  max-width: 52ch;
  margin-left: auto !important;
  margin-right: auto !important;
  line-height: 1.72;
  text-align: center !important;
  text-align-last: center !important;
}

#academy .contact-block,
#contact .academy-btns,
#network .network-btns,
#career .career-cards,
#services .services-wordcloud,
#cases .cases-carousel-row {
  width: 100%;
  max-width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center !important;
  text-align: center !important;
}

#services .services-wordcloud {
  gap: 10px 12px;
  padding: 8px 0 0;
}

#services .service-keyword {
  color: var(--text) !important;
  padding: 0;
}

#services .service-keyword-inner {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 7px 13px;
  border: 1px solid rgba(29, 29, 31, 0.10);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--text) !important;
  box-shadow: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.two-col-sections .btn,
.two-col-sections .contact-email,
.two-col-sections .network-btn,
.two-col-sections .academy-btn,
#academy .contact-email,
#contact .academy-btn {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 500;
  box-shadow: none !important;
}

.two-col-sections .btn-primary,
.two-col-sections .section-contact .btn-primary,
.two-col-sections .section-academy .btn-primary,
.two-col-sections .section-network .btn-primary,
.two-col-sections .section-career .btn-primary,
#academy .contact-email {
  background: var(--panel-accent) !important;
  color: #fff !important;
  border: 1px solid rgba(0, 113, 227, 0.20) !important;
}

.two-col-sections .btn-white {
  background: rgba(255, 255, 255, 0.76) !important;
  color: var(--text) !important;
  border: 1px solid rgba(29, 29, 31, 0.10) !important;
}

#cases .case-card,
#career .career-card {
  border-radius: 8px !important;
  border: 1px solid rgba(29, 29, 31, 0.09) !important;
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: none !important;
}

#services .section-title,
#services .section-subtitle,
#cases .section-title,
#cases .section-subtitle,
#contact .section-title,
#contact .section-subtitle,
#contact .academy-desc,
#contact .academy-btn,
#contact .academy-coming,
#network .section-title,
#network .section-title-brand,
#network .section-subtitle,
#network .network-desc,
#network .network-btn,
#career .section-title,
#career .section-subtitle,
#career .career-desc,
#career .career-card,
#academy .section-title,
#academy .section-subtitle,
#academy .contact-block p[data-i18n="contact_lead"],
#academy .contact-email,
#academy .contact-note {
  opacity: 0;
  will-change: opacity, transform, filter;
}

#services .section-title,
#services .section-subtitle {
  transform: translateY(22px);
}

#services.scroll-in .section-title { animation: middle-rise-soft 0.78s cubic-bezier(0.2, 0.78, 0.2, 1) 0.02s forwards; }
#services.scroll-in .section-subtitle { animation: middle-rise-soft 0.78s cubic-bezier(0.2, 0.78, 0.2, 1) 0.12s forwards; }

#services .service-keyword {
  transform: translateY(18px) scale(0.96);
  filter: blur(4px);
}

#services.scroll-in .service-keyword:nth-child(odd),
#services.scroll-in .service-keyword:nth-child(even) {
  animation-name: middle-keyword-pop;
  animation-duration: 0.62s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: forwards;
}

#cases .section-title,
#cases .section-subtitle {
  transform: translateX(-24px);
}

#cases.scroll-in .section-title { animation: middle-slide-left 0.82s cubic-bezier(0.2, 0.8, 0.2, 1) 0.02s forwards; }
#cases.scroll-in .section-subtitle { animation: middle-slide-left 0.82s cubic-bezier(0.2, 0.8, 0.2, 1) 0.12s forwards; }

#cases .case-card {
  transform: translateX(34px) rotate(0.6deg);
  filter: blur(3px);
}

#cases.scroll-in .case-card {
  animation: middle-card-glide 0.95s cubic-bezier(0.18, 0.9, 0.24, 1) 0.2s forwards;
}

#contact .section-title,
#contact .section-subtitle,
#contact .academy-desc,
#contact .academy-btn,
#contact .academy-coming {
  transform: translateY(24px);
}

#contact.scroll-in .section-title { animation: middle-rise-soft 0.72s ease-out 0.02s forwards; }
#contact.scroll-in .section-subtitle { animation: middle-rise-soft 0.72s ease-out 0.12s forwards; }
#contact.scroll-in .academy-desc { animation: middle-rise-soft 0.48s ease-out 0.14s forwards; }
#contact.scroll-in .academy-btn:nth-child(1) { animation: middle-button-lift 0.52s cubic-bezier(0.2, 0.8, 0.2, 1) 0.24s forwards; }
#contact.scroll-in .academy-btn:nth-child(2) { animation: middle-button-lift 0.52s cubic-bezier(0.2, 0.8, 0.2, 1) 0.32s forwards; }
#contact.scroll-in .academy-coming { animation: middle-fade-focus 0.5s ease-out 0.42s forwards; }

#network .section-title,
#network .section-title-brand,
#network .section-subtitle,
#network .network-desc {
  transform: translateY(18px) scale(0.98);
  filter: blur(3px);
}

#network .network-btn {
  opacity: 1;
  transform: translateY(0);
  filter: none;
}

#network.scroll-in .section-title,
#network.scroll-in .section-title-brand { animation: middle-focus-in 0.78s cubic-bezier(0.2, 0.8, 0.2, 1) 0.02s forwards; }
#network.scroll-in .section-subtitle { animation: middle-focus-in 0.78s cubic-bezier(0.2, 0.8, 0.2, 1) 0.12s forwards; }
#network.scroll-in .network-desc { animation: middle-focus-in 0.48s cubic-bezier(0.2, 0.8, 0.2, 1) 0.14s forwards; }
#network.scroll-in .network-btn:nth-child(1) { animation: middle-visible-button-lift 0.42s ease-out 0.12s forwards; }
#network.scroll-in .network-btn:nth-child(2) { animation: middle-visible-button-lift 0.42s ease-out 0.18s forwards; }
#network.scroll-in .network-btn:nth-child(3) { animation: middle-visible-button-lift 0.42s ease-out 0.24s forwards; }

#career .section-title,
#career .section-subtitle,
#career .career-desc {
  transform: translateY(-18px);
}

#career .career-card {
  transform: translateY(28px) scale(0.97);
}

#career.scroll-in .section-title { animation: middle-drop-in 0.74s cubic-bezier(0.2, 0.8, 0.2, 1) 0.02s forwards; }
#career.scroll-in .section-subtitle { animation: middle-drop-in 0.74s cubic-bezier(0.2, 0.8, 0.2, 1) 0.12s forwards; }
#career.scroll-in .career-desc { animation: middle-drop-in 0.48s cubic-bezier(0.2, 0.8, 0.2, 1) 0.14s forwards; }
#career.scroll-in .career-card { animation: middle-card-pop 0.56s cubic-bezier(0.16, 1, 0.3, 1) 0.24s forwards; }

#academy .section-title,
#academy .section-subtitle,
#academy .contact-block p[data-i18n="contact_lead"],
#academy .contact-email,
#academy .contact-note {
  transform: translateX(24px);
}

#academy.scroll-in .section-title { animation: middle-slide-right 0.78s cubic-bezier(0.2, 0.8, 0.2, 1) 0.02s forwards; }
#academy.scroll-in .section-subtitle { animation: middle-slide-right 0.78s cubic-bezier(0.2, 0.8, 0.2, 1) 0.12s forwards; }
#academy.scroll-in .contact-block p[data-i18n="contact_lead"] { animation: middle-slide-right 0.48s cubic-bezier(0.2, 0.8, 0.2, 1) 0.14s forwards; }
#academy.scroll-in .contact-email { animation: middle-button-lift 0.52s cubic-bezier(0.2, 0.8, 0.2, 1) 0.24s forwards; }
#academy.scroll-in .contact-note { animation: middle-fade-focus 0.48s ease-out 0.34s forwards; }

@keyframes middle-rise-soft {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes middle-keyword-pop {
  from { opacity: 0; transform: translateY(18px) scale(0.96); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes middle-slide-left {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes middle-slide-right {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes middle-card-glide {
  from { opacity: 0; transform: translateX(34px) rotate(0.6deg); filter: blur(3px); }
  to { opacity: 1; transform: translateX(0) rotate(0); filter: blur(0); }
}

@keyframes middle-button-lift {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes middle-visible-button-lift {
  from { opacity: 1; transform: translateY(6px); filter: none; }
  to { opacity: 1; transform: translateY(0); filter: none; }
}

@keyframes middle-fade-focus {
  from { opacity: 0; filter: blur(4px); transform: translateY(10px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@keyframes middle-focus-in {
  from { opacity: 0; transform: translateY(18px) scale(0.98); filter: blur(3px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes middle-drop-in {
  from { opacity: 0; transform: translateY(-18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes middle-card-pop {
  from { opacity: 0; transform: translateY(28px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 900px) {
  #services-cases,
  #contact-network,
  #career-academy {
    grid-template-columns: 1fr;
    padding: 0 12px;
    gap: 14px;
  }

  #services,
  #cases,
  #contact,
  #network,
  #career,
  #academy {
    min-height: auto;
    padding: 38px 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #services .section-title,
  #services .section-subtitle,
  #services .service-keyword,
  #cases .section-title,
  #cases .section-subtitle,
  #cases .case-card,
  #contact .section-title,
  #contact .section-subtitle,
  #contact .academy-desc,
  #contact .academy-btn,
  #contact .academy-coming,
  #network .section-title,
  #network .section-title-brand,
  #network .section-subtitle,
  #network .network-desc,
  #network .network-btn,
  #career .section-title,
  #career .section-subtitle,
  #career .career-desc,
  #career .career-card,
  #academy .section-title,
  #academy .section-subtitle,
  #academy .contact-block p[data-i18n="contact_lead"],
  #academy .contact-email,
  #academy .contact-note {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none !important;
  }
}