:root {
  --color-red-50: #fff7fa;
  --color-red-100: #ffe8f0;
  --color-red-200: #ffd0df;
  --color-red-300: #f9abc3;
  --color-red-400: #f46f9a;
  --color-red-500: #e95382;
  --color-red-600: #cf376c;
  --color-red-700: #ad2858;
  --color-red-800: #842344;
  --color-orange-50: #faf7ff;
  --color-orange-100: #f2eaff;
  --color-orange-200: #e5d5ff;
  --color-orange-300: #cdb4ff;
  --color-orange-400: #ad87fa;
  --color-orange-500: #8b5cf6;
  --color-orange-600: #7548e8;
  --color-amber-50: #faf7ff;
  --color-amber-100: #f2eaff;
  --color-amber-200: #e5d5ff;
  --color-amber-500: #8b5cf6;
  --color-amber-600: #7548e8;
  --color-amber-700: #6137cf;
  --color-amber-800: #4f2ca9;
  --color-yellow-50: #f7fbff;
  --color-yellow-100: #eaf7ff;
  --color-yellow-400: #68d5ed;
  --color-yellow-500: #2ec8e8;
  --color-yellow-600: #24a9c7;
  --color-yellow-700: #1e819b;
  --color-green-50: #f2fffd;
  --color-green-100: #dcfaf4;
  --color-green-200: #b8f3e7;
  --color-green-300: #88e6d4;
  --color-green-400: #64dbc5;
  --color-green-500: #36cfb1;
  --color-green-600: #1fa990;
  --color-green-700: #17806e;
  --color-green-800: #155f54;
  --color-emerald-50: #f2fffd;
  --color-emerald-200: #b8f3e7;
  --color-emerald-500: #36cfb1;
  --color-emerald-700: #17806e;
  --color-teal-50: #f2fffd;
  --color-teal-100: #dcfaf4;
  --color-teal-500: #36cfb1;
  --color-teal-600: #1fa990;
  --color-teal-700: #17806e;
  --color-teal-800: #155f54;
  --color-cyan-400: #59d7f0;
  --color-cyan-500: #2ec8e8;
  --color-blue-50: #f5fbff;
  --color-blue-100: #e8f7ff;
  --color-blue-200: #d7efff;
  --color-blue-300: #b8e0ff;
  --color-blue-400: #74c0ff;
  --color-blue-500: #4b96f8;
  --color-blue-600: #367cf5;
  --color-blue-700: #2b66d7;
  --color-blue-800: #2453b5;
  --color-blue-900: #193b82;
  --color-indigo-50: #f6f5ff;
  --color-indigo-100: #eeeaff;
  --color-indigo-200: #ddd5ff;
  --color-indigo-300: #c6b8ff;
  --color-indigo-400: #a68af8;
  --color-indigo-500: #8b5cf6;
  --color-indigo-600: #7548e8;
  --color-indigo-700: #6137cf;
  --color-indigo-800: #4f2ca9;
  --color-violet-100: #eeeaff;
  --color-violet-700: #6137cf;
  --color-purple-50: #faf8ff;
  --color-purple-100: #f2edff;
  --color-purple-200: #e5dcff;
  --color-purple-300: #d0c0ff;
  --color-purple-400: #b499fa;
  --color-purple-500: #8b5cf6;
  --color-purple-600: #7548e8;
  --color-pink-100: #ffe8f0;
  --color-pink-400: #f46f9a;
  --color-pink-500: #e95382;
  --color-pink-600: #cf376c;
  --color-slate-50: #f8fbff;
  --color-slate-100: #f1f7fc;
  --color-slate-200: #dce7f1;
  --color-slate-300: #c2d2e2;
  --color-slate-400: #8293aa;
  --color-slate-500: #647890;
  --color-slate-600: #536782;
  --color-slate-700: #415571;
  --color-slate-800: #22324f;
  --color-slate-900: #101b35;
}

html,
body {
  color: #101b35;
}

body {
  background-color: #fff;
}

::selection {
  background: rgba(139, 92, 246, 0.2);
}

.bg-\[\#0052D9\],
.bg-\[\#0070FF\] {
  background-color: #367cf5 !important;
}

.text-\[\#0052D9\],
.text-\[\#0070FF\] {
  color: #367cf5 !important;
}

.border-\[\#0052D9\],
.border-\[\#0070FF\] {
  border-color: #367cf5 !important;
}

.from-\[\#0052D9\] {
  --tw-gradient-from: #367cf5 !important;
}

.via-\[\#0070FF\] {
  --tw-gradient-via: #4b96f8 !important;
}

.to-\[\#0052D9\],
.to-\[\#0070FF\] {
  --tw-gradient-to: #8b5cf6 !important;
}

.bg-\[\#03DD6C\] {
  background-color: #36cfb1 !important;
}

.text-\[\#03DD6C\] {
  color: #36cfb1 !important;
}

/*
 * Visible palette-only refresh for the official-site pages.
 * These rules change color treatments only. Layout, spacing, type, imagery,
 * content, forms, navigation and module order remain the official originals.
 */
.header {
  background: rgba(248, 252, 255, 0.96) !important;
  border-bottom-color: #dfebf6 !important;
}

.bg-slate-50 {
  background-color: #f7fcff !important;
}

.bg-slate-100 {
  background-color: #edf7ff !important;
}

.bg-blue-50 {
  background-color: #eef9ff !important;
}

.bg-blue-100 {
  background-color: #dff3ff !important;
}

.bg-indigo-50 {
  background-color: #f6f3ff !important;
}

.bg-indigo-100,
.bg-violet-100 {
  background-color: #e9e4ff !important;
}

.bg-purple-50,
.bg-orange-50,
.bg-amber-50 {
  background-color: #faf7ff !important;
}

.bg-purple-100,
.bg-orange-100,
.bg-amber-100 {
  background-color: #f0e9ff !important;
}

.bg-green-50,
.bg-emerald-50,
.bg-teal-50 {
  background-color: #f2fffd !important;
}

.bg-green-100,
.bg-emerald-100,
.bg-teal-100 {
  background-color: #dcfaf4 !important;
}

.bg-blue-600,
.bg-blue-700 {
  background-color: #367cf5 !important;
  background-image: linear-gradient(112deg, #2877ef 0%, #4b7af2 54%, #8758f0 100%) !important;
}

.hover\:bg-blue-700:hover {
  background-color: #2b66d7 !important;
  background-image: linear-gradient(112deg, #246ae4 0%, #3e67dc 54%, #7548e8 100%) !important;
}

.gradient-blue {
  background: linear-gradient(118deg, #2877ef 0%, #4b7af2 52%, #8b5cf6 100%) !important;
}

.gradient-text {
  background: linear-gradient(90deg, #2877ef 0%, #3f7cf0 48%, #8b5cf6 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.hero-gradient {
  background: radial-gradient(circle at 70% 30%, #e8e3ff 0%, rgba(232, 227, 255, 0) 50%) !important;
}

.bg-slate-900 {
  background-color: #101b35 !important;
}

.text-blue-500,
.text-blue-600 {
  color: #367cf5 !important;
}

.text-indigo-500,
.text-indigo-600,
.text-violet-600,
.text-purple-600 {
  color: #7548e8 !important;
}

.border-blue-100 {
  border-color: #d7efff !important;
}

.border-blue-200 {
  border-color: #b8e0ff !important;
}

.border-indigo-100,
.border-purple-100 {
  border-color: #ddd5ff !important;
}

[style*="radial-gradient(circle at 50% 50%, #eff6ff 0%, #f8fafc 100%)"] {
  background: radial-gradient(circle at 18% 46%, #dff7ff 0%, #f7fcff 49%, #eee8ff 100%) !important;
}

/*
 * Exact Agent-page palette.
 * Primary #3478F6 · accent #8C55F6 · mint #39D2BD
 * ink #101B35 · glacier #EAF8FF · lavender #F1EDFF.
 */
:root {
  --color-blue-50: #eaf8ff;
  --color-blue-100: #e8f4ff;
  --color-blue-200: #dfeaff;
  --color-blue-300: #beadff;
  --color-blue-400: #4b96f8;
  --color-blue-500: #3478f6;
  --color-blue-600: #3478f6;
  --color-blue-700: #3974e8;
  --color-blue-800: #255bd6;
  --color-blue-900: #1d3d6f;
  --color-indigo-50: #f3efff;
  --color-indigo-100: #f1edff;
  --color-indigo-200: #ede7ff;
  --color-indigo-300: #beadff;
  --color-indigo-400: #9663f8;
  --color-indigo-500: #8c55f6;
  --color-indigo-600: #8c55f6;
  --color-indigo-700: #7b61ee;
  --color-indigo-800: #6a55e9;
  --color-violet-100: #f1edff;
  --color-violet-600: #8c55f6;
  --color-violet-700: #7b61ee;
  --color-purple-50: #f8f5ff;
  --color-purple-100: #f1edff;
  --color-purple-200: #ede7ff;
  --color-purple-300: #beadff;
  --color-purple-400: #9663f8;
  --color-purple-500: #8c55f6;
  --color-purple-600: #8c55f6;
  --color-cyan-400: #25b8dd;
  --color-cyan-500: #25b8dd;
  --color-teal-50: #f2fffd;
  --color-teal-100: #e2fbf8;
  --color-teal-400: #7ce9df;
  --color-teal-500: #39d2bd;
  --color-teal-600: #119e91;
  --color-green-50: #f2fffd;
  --color-green-100: #e2fbf8;
  --color-green-400: #7ce9df;
  --color-green-500: #39d2bd;
  --color-green-600: #119e91;
  --color-emerald-50: #f2fffd;
  --color-emerald-100: #e2fbf8;
  --color-emerald-500: #39d2bd;
  --color-orange-50: #f8f5ff;
  --color-orange-100: #f1edff;
  --color-orange-400: #9663f8;
  --color-orange-500: #8c55f6;
  --color-orange-600: #7b61ee;
  --color-amber-50: #f8f5ff;
  --color-amber-100: #f1edff;
  --color-amber-500: #8c55f6;
  --color-amber-600: #7b61ee;
  --color-yellow-50: #eaf8ff;
  --color-yellow-100: #e8f4ff;
  --color-yellow-400: #4b96f8;
  --color-yellow-500: #3478f6;
  --color-red-50: #fff0f5;
  --color-red-100: #fff0f5;
  --color-red-500: #d64a7c;
  --color-pink-50: #fff0f5;
  --color-pink-100: #fff0f5;
  --color-pink-500: #d64a7c;
  --color-slate-50: #f8fbff;
  --color-slate-100: #f1f6ff;
  --color-slate-200: #e7eef8;
  --color-slate-300: #dce5ee;
  --color-slate-400: #8996aa;
  --color-slate-500: #697a91;
  --color-slate-600: #566884;
  --color-slate-700: #43546f;
  --color-slate-800: #22324f;
  --color-slate-900: #101b35;
}

body {
  background-color: #fbfdff;
}

main > section:not(.gradient-blue):nth-of-type(odd) {
  background-color: #fbfdff;
}

main > section:not(.gradient-blue):nth-of-type(even) {
  background-color: #f1f6ff;
}

.hero-gradient {
  background:
    radial-gradient(circle at 12% 48%, rgba(234, 248, 255, 0.98) 0%, rgba(234, 248, 255, 0) 42%),
    radial-gradient(circle at 88% 34%, rgba(241, 237, 255, 0.98) 0%, rgba(241, 237, 255, 0) 44%),
    #fbfdff !important;
}

.gradient-text {
  background: linear-gradient(90deg, #3478f6 0%, #3974e8 48%, #8c55f6 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.gradient-blue,
.bg-blue-600,
.bg-blue-700 {
  background-color: #3478f6 !important;
  background-image: linear-gradient(112deg, #3478f6 0%, #3974e8 52%, #8c55f6 100%) !important;
}

[style*="radial-gradient(circle at 50% 50%, #eff6ff 0%, #f8fafc 100%)"] {
  background:
    radial-gradient(circle at 16% 48%, #eaf8ff 0%, rgba(234, 248, 255, 0) 46%),
    radial-gradient(circle at 86% 35%, #f1edff 0%, rgba(241, 237, 255, 0) 48%),
    #fbfdff !important;
}

/*
 * Fresh Agent-style hierarchy: large legacy dark fields become light,
 * airy glacier/lavender surfaces. Saturated color is reserved for CTAs,
 * small accents and gradients.
 */
[class~="bg-gradient-to-br"][class~="from-blue-600"][class~="via-blue-700"][class~="to-indigo-800"] {
  color: #101b35 !important;
  background-color: #fbfdff !important;
  background-image:
    radial-gradient(circle at 12% 38%, rgba(124, 233, 223, 0.22) 0%, rgba(124, 233, 223, 0) 34%),
    radial-gradient(circle at 86% 25%, rgba(190, 173, 255, 0.38) 0%, rgba(190, 173, 255, 0) 40%),
    linear-gradient(118deg, #eaf8ff 0%, #fbfdff 54%, #f1edff 100%) !important;
}

[class~="bg-gradient-to-br"][class~="from-blue-600"][class~="via-blue-700"][class~="to-indigo-800"] .text-white,
[class~="bg-gradient-to-br"][class~="from-blue-600"][class~="via-blue-700"][class~="to-indigo-800"] .text-blue-50,
[class~="bg-gradient-to-br"][class~="from-blue-600"][class~="via-blue-700"][class~="to-indigo-800"] .text-blue-100,
[class~="bg-gradient-to-br"][class~="from-blue-600"][class~="via-blue-700"][class~="to-indigo-800"] .text-blue-200 {
  color: #101b35 !important;
}

[class~="bg-gradient-to-br"][class~="from-blue-600"][class~="via-blue-700"][class~="to-indigo-800"] .text-white\/70,
[class~="bg-gradient-to-br"][class~="from-blue-600"][class~="via-blue-700"][class~="to-indigo-800"] .text-white\/80,
[class~="bg-gradient-to-br"][class~="from-blue-600"][class~="via-blue-700"][class~="to-indigo-800"] .text-blue-100\/80 {
  color: #566884 !important;
}

[class~="bg-gradient-to-br"][class~="from-blue-600"][class~="via-blue-700"][class~="to-indigo-800"] .bg-white\/10 {
  background-color: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(52, 120, 246, 0.16) !important;
}

[class~="bg-gradient-to-br"][class~="from-blue-600"][class~="via-blue-700"][class~="to-indigo-800"] a.bg-white {
  color: #fff !important;
  background-color: #3478f6 !important;
  background-image: linear-gradient(112deg, #3478f6 0%, #3974e8 52%, #8c55f6 100%) !important;
}

#data-driven {
  color: #101b35 !important;
}

#data-driven .text-white,
#data-driven .text-blue-100,
#data-driven .text-blue-200 {
  color: #101b35 !important;
}

#data-driven .text-white\/70,
#data-driven .text-white\/80 {
  color: #566884 !important;
}

footer.bg-slate-900 {
  color: #566884 !important;
  background-color: #f1f6ff !important;
  border-top: 1px solid #e7eef8;
}

footer.bg-slate-900 .text-white {
  color: #101b35 !important;
}

footer.bg-slate-900 .text-slate-400,
footer.bg-slate-900 .text-slate-500 {
  color: #697a91 !important;
}

footer.bg-slate-900 .bg-slate-800 {
  background-color: #fff !important;
  border: 1px solid #dce5ee;
}

footer.bg-slate-900 .border-slate-800 {
  border-color: #dce5ee !important;
}

[class~="bg-gradient-to-br"][class*="from-blue-900"][class*="via-slate-900"][class*="to-slate-900"] {
  background-image: linear-gradient(118deg, rgba(52, 120, 246, 0.8), rgba(140, 85, 246, 0.74)) !important;
}

/*
 * Final light-surface pass.
 * Keep the official copy, layout and modules unchanged. Only the palette and
 * decorative color treatments follow the approved Agent 外贸团队 page.
 */
.bg-blue-600,
.bg-blue-700 {
  background-color: #3478f6 !important;
  background-image: none !important;
}

.header .bg-blue-600 {
  color: #fff !important;
  background-color: #3478f6 !important;
  background-image: linear-gradient(112deg, #39d2bd 0%, #3478f6 54%, #8c55f6 100%) !important;
  box-shadow: 0 12px 28px -16px rgba(52, 120, 246, 0.72) !important;
}

.header .bg-blue-600:hover {
  background-image: linear-gradient(112deg, #2ec7b3 0%, #3974e8 54%, #7b61ee 100%) !important;
}

/* Saturated panels inside page content become airy glacier surfaces. */
main :is(section, article, div).bg-blue-600:not(a):not(button) {
  color: #101b35 !important;
  background-color: #eaf8ff !important;
  background-image: linear-gradient(128deg, #eaf8ff 0%, #f8fcff 62%, #f1edff 100%) !important;
  border-color: rgba(52, 120, 246, 0.14) !important;
}

main :is(section, article, div).bg-blue-600:not(a):not(button) .text-white {
  color: #101b35 !important;
}

main :is(section, article, div).bg-blue-600:not(a):not(button) .text-blue-100,
main :is(section, article, div).bg-blue-600:not(a):not(button) .text-blue-200 {
  color: #566884 !important;
}

/* The pricing masthead is content, not the final CTA, so it stays light. */
main .gradient-blue {
  color: #101b35 !important;
  background:
    radial-gradient(circle at 88% 22%, rgba(190, 173, 255, 0.22), transparent 30%),
    linear-gradient(118deg, #eaf8ff 0%, #fbfdff 60%, #f1edff 100%) !important;
}

main .gradient-blue .text-white,
main .gradient-blue .text-blue-50,
main .gradient-blue .text-blue-100,
main .gradient-blue .text-blue-200 {
  color: #101b35 !important;
}

main .gradient-blue .text-blue-100,
main .gradient-blue .text-blue-200 {
  color: #566884 !important;
}

/* Homepage data block: one clean glacier field, without dirty color clouds. */
#data-driven > .absolute.inset-0 {
  background-color: #f8fcff !important;
  background-image: linear-gradient(112deg, #eaf8ff 0%, #fbfdff 68%, #f1edff 100%) !important;
}

#data-driven > .absolute.inset-0 > * {
  opacity: 0.06 !important;
}

/* Homepage lead-center panel: remove the abrupt dark blue card. */
[class~="bg-gradient-to-br"][class~="from-blue-500"][class~="via-blue-600"][class~="to-indigo-600"] {
  color: #101b35 !important;
  background-color: #eef8ff !important;
  background-image: linear-gradient(138deg, #eaf8ff 0%, #eef5ff 55%, #f1edff 100%) !important;
  border: 1px solid rgba(52, 120, 246, 0.14);
  box-shadow: 0 28px 70px -52px rgba(52, 120, 246, 0.55) !important;
}

[class~="bg-gradient-to-br"][class~="from-blue-500"][class~="via-blue-600"][class~="to-indigo-600"] .text-white {
  color: #101b35 !important;
}

[class~="bg-gradient-to-br"][class~="from-blue-500"][class~="via-blue-600"][class~="to-indigo-600"] .text-blue-100 {
  color: #566884 !important;
}

[class~="bg-gradient-to-br"][class~="from-blue-500"][class~="via-blue-600"][class~="to-indigo-600"] .bg-white\/10 {
  background: rgba(255, 255, 255, 0.76) !important;
  border-color: rgba(52, 120, 246, 0.12) !important;
}

/* Pricing comparison header: preserve the table, replace only its color. */
table thead tr {
  color: #101b35 !important;
  background: linear-gradient(90deg, #eaf8ff 0%, #e8f4ff 42%, #f1edff 100%) !important;
}

table thead th {
  color: #101b35 !important;
  border-color: #dce5ee !important;
}

/*
 * Final CTA on official pages except the homepage.
 * Keep every page's original copy, controls and footprint; only share the
 * approved bright Agent/home CTA palette and decorative motion.
 */
body:not(.home-page) > section.gradient-blue,
body:not(.home-page) main + section.gradient-blue {
  color: #fff !important;
  background:
    linear-gradient(90deg, #25b8dd, #77f2dc, #b777ff, #25b8dd) 0 100% / 220% 5px no-repeat,
    #1477f7 !important;
  animation: official-cta-line 4s linear infinite;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

body:not(.home-page) > section.gradient-blue::before,
body:not(.home-page) main + section.gradient-blue::before {
  content: "";
  width: 420px;
  height: 420px;
  border: 44px solid #aaa4ff;
  border-top-color: #d4d0ff;
  border-radius: 50%;
  position: absolute;
  right: -120px;
  bottom: -230px;
  animation: official-cta-ring 12s linear infinite;
  pointer-events: none;
}

body:not(.home-page) > section.gradient-blue::after,
body:not(.home-page) main + section.gradient-blue::after {
  content: "";
  width: 170px;
  height: 76px;
  background: #39d2bd;
  border-radius: 28px;
  position: absolute;
  top: -28px;
  right: 250px;
  bottom: auto;
  left: auto;
  animation: official-cta-float 5s ease-in-out infinite;
  transform: rotate(-10deg);
  pointer-events: none;
}

body > section.gradient-blue > *,
main + section.gradient-blue > * {
  position: relative;
  z-index: 1;
}

body > section.gradient-blue .text-white,
body > section.gradient-blue .text-blue-50,
body > section.gradient-blue .text-blue-100,
body > section.gradient-blue .text-blue-200,
main + section.gradient-blue .text-white,
main + section.gradient-blue .text-blue-50,
main + section.gradient-blue .text-blue-100,
main + section.gradient-blue .text-blue-200 {
  color: #fff !important;
}

body > section.gradient-blue .bg-white,
main + section.gradient-blue .bg-white {
  color: #101b35 !important;
  background: linear-gradient(112deg, #fff 0%, #eef8ff 58%, #f1edff 100%) !important;
}

@keyframes official-cta-ring {
  to {
    transform: rotate(360deg);
  }
}

@keyframes official-cta-line {
  to {
    background-position: 220% 100%, 0 0;
  }
}

@keyframes official-cta-float {
  50% {
    transform: translateY(10px) rotate(-6deg);
  }
}

@media (max-width: 640px) {
  body:not(.home-page) > section.gradient-blue::before,
  body:not(.home-page) main + section.gradient-blue::before {
    width: 260px;
    height: 260px;
    border-width: 30px;
    right: -120px;
    bottom: -145px;
  }

  body:not(.home-page) > section.gradient-blue::after,
  body:not(.home-page) main + section.gradient-blue::after {
    width: 110px;
    height: 50px;
    top: -24px;
    right: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.home-page) > section.gradient-blue,
  body:not(.home-page) > section.gradient-blue::before,
  body:not(.home-page) > section.gradient-blue::after,
  body:not(.home-page) main + section.gradient-blue,
  body:not(.home-page) main + section.gradient-blue::before,
  body:not(.home-page) main + section.gradient-blue::after {
    animation: none;
  }
}

/*
 * Homepage-only hierarchy.
 * Preserve every original module and its footprint while giving adjacent
 * sections clearly different light surfaces from the Agent palette.
 */
body.home-page {
  --home-glacier: #eef8ff;
  --home-blue: #f3f8ff;
  --home-lavender: #f4f1ff;
  --home-white: #fbfdff;
}

body.home-page > main.min-h-screen > main {
  background:
    radial-gradient(circle at 13% 42%, rgba(75, 150, 248, 0.11), transparent 30%),
    radial-gradient(circle at 88% 28%, rgba(190, 173, 255, 0.26), transparent 34%),
    #fbfdff !important;
}

body.home-page > main.min-h-screen > section:nth-of-type(1) {
  background:
    radial-gradient(circle at 16% 42%, rgba(75, 150, 248, 0.1), transparent 33%),
    radial-gradient(circle at 84% 38%, rgba(190, 173, 255, 0.2), transparent 36%),
    linear-gradient(118deg, var(--home-glacier), var(--home-white) 58%, var(--home-lavender)) !important;
}

body.home-page #data-driven > .absolute.inset-0 {
  background: transparent !important;
}

body.home-page > main.min-h-screen > section:nth-of-type(2) {
  background:
    radial-gradient(circle at 82% 24%, rgba(140, 85, 246, 0.08), transparent 30%),
    linear-gradient(118deg, #fbfdff 0%, #f7faff 56%, #f3f0ff 100%) !important;
}

body.home-page > main.min-h-screen > section:nth-of-type(3) {
  background:
    radial-gradient(circle at 12% 54%, rgba(75, 150, 248, 0.08), transparent 33%),
    linear-gradient(118deg, #f0f8ff 0%, #fbfdff 55%, #f4f0ff 100%) !important;
}

body.home-page
  [class~="bg-gradient-to-br"][class~="from-blue-500"][class~="via-blue-600"][class~="to-indigo-600"] {
  background:
    radial-gradient(circle at 12% 18%, rgba(75, 150, 248, 0.13), transparent 30%),
    linear-gradient(138deg, #e7f5ff 0%, #edf3ff 54%, #eee9ff 100%) !important;
  border-color: rgba(52, 120, 246, 0.18) !important;
  box-shadow: 0 30px 74px -56px rgba(52, 120, 246, 0.58) !important;
}

body.home-page > main.min-h-screen > section:nth-of-type(4) {
  background:
    radial-gradient(circle at 88% 30%, rgba(190, 173, 255, 0.14), transparent 34%),
    linear-gradient(118deg, #fbfdff 0%, #f7faff 58%, #eef7ff 100%) !important;
}

body.home-page > main.min-h-screen > section:nth-of-type(5) {
  background:
    radial-gradient(circle at 12% 70%, rgba(75, 150, 248, 0.08), transparent 30%),
    linear-gradient(118deg, var(--home-blue) 0%, #fbfdff 55%, var(--home-lavender) 100%) !important;
}

body.home-page > main.min-h-screen > section:nth-of-type(6) {
  background:
    radial-gradient(circle at 84% 24%, rgba(190, 173, 255, 0.13), transparent 30%),
    linear-gradient(118deg, #fbfdff 0%, #f7faff 55%, #f4f1ff 100%) !important;
}

body.home-page > main.min-h-screen > section:nth-of-type(6) .grid > div:nth-child(1) {
  background: linear-gradient(145deg, #eaf8ff, #f8fcff) !important;
  border-color: #cdeaff !important;
}

body.home-page > main.min-h-screen > section:nth-of-type(6) .grid > div:nth-child(2) {
  background: linear-gradient(145deg, #f3efff, #fcfaff) !important;
  border-color: #ddd2ff !important;
}

body.home-page > main.min-h-screen > section:nth-of-type(6) .grid > div:nth-child(3) {
  background: linear-gradient(145deg, #f1fbf9, #fbfffe) !important;
  border-color: #d1f0e9 !important;
}

body.home-page > main.min-h-screen > section:nth-of-type(7) {
  background:
    radial-gradient(circle at 16% 22%, rgba(190, 173, 255, 0.15), transparent 32%),
    linear-gradient(118deg, #f4f1ff 0%, #fbfdff 56%, #eef8ff 100%) !important;
}

body.home-page > main.min-h-screen > section:nth-of-type(7) .grid > div:nth-child(1) {
  background: linear-gradient(145deg, #eaf8ff, #fff) !important;
  border-color: #cdeaff !important;
}

body.home-page > main.min-h-screen > section:nth-of-type(7) .grid > div:nth-child(2) {
  background: linear-gradient(145deg, #f3efff, #fff) !important;
  border-color: #ddd2ff !important;
}

body.home-page > main.min-h-screen > section:nth-of-type(7) .grid > div:nth-child(3) {
  background: linear-gradient(145deg, #effcf8, #fff) !important;
  border-color: #c7f1e8 !important;
}

/* Homepage final CTA: same bright Agent CTA palette, original size intact. */
body.home-page > section.gradient-blue {
  color: #fff !important;
  background:
    linear-gradient(90deg, #25b8dd, #77f2dc, #b777ff, #25b8dd) 0 100% / 220% 5px no-repeat,
    #1477f7 !important;
  animation: home-cta-line 4s linear infinite;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

body.home-page > section.gradient-blue::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 420px;
  height: 420px;
  border: 44px solid #aaa4ff;
  border-top-color: #d4d0ff;
  border-radius: 50%;
  right: -120px;
  bottom: -230px;
  pointer-events: none;
  animation: official-cta-ring 12s linear infinite;
}

body.home-page > section.gradient-blue::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 170px;
  height: 76px;
  background: #39d2bd;
  border-radius: 28px;
  top: -28px;
  right: 250px;
  bottom: auto;
  left: auto;
  animation: home-cta-float 5s ease-in-out infinite;
  transform: rotate(-10deg);
  pointer-events: none;
}

@keyframes home-cta-line {
  to {
    background-position: 220% 100%, 0 0;
  }
}

@keyframes home-cta-float {
  50% {
    transform: translateY(10px) rotate(-6deg);
  }
}

@media (max-width: 640px) {
  body.home-page > section.gradient-blue::before {
    width: 260px;
    height: 260px;
    border-width: 30px;
    right: -120px;
    bottom: -145px;
  }

  body.home-page > section.gradient-blue::after {
    width: 110px;
    height: 50px;
    top: -24px;
    right: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-page > section.gradient-blue {
    animation: none;
  }

  body.home-page > section.gradient-blue::after {
    animation: none;
  }
}

/*
 * Screenshot-detail pass.
 * Keep the approved content and footprints, remove only the marked decorative
 * icons, and let the typography become the visual anchor.
 */
body.home-page
  [class~="bg-gradient-to-br"][class~="from-blue-500"][class~="via-blue-600"][class~="to-indigo-600"]
  > .relative.z-10
  > .flex.items-center.mb-2
  > div:first-child,
body.home-page
  [class~="bg-gradient-to-br"][class~="from-blue-500"][class~="via-blue-600"][class~="to-indigo-600"]
  .space-y-3
  > a.group
  > [class~="w-10"][class~="h-10"]:first-child,
body.home-page
  .relative.z-10
  > .flex.items-center.mb-2
  > div:has(> i.fa-bullhorn),
body.home-page .tab-btn > div:first-child,
body.home-page main [class~="w-14"][class~="h-14"][class~="bg-gradient-to-br"],
body.home-page main [class~="w-16"][class~="h-16"][class~="bg-gradient-to-br"] {
  display: none !important;
}

body.home-page .tab-btn {
  justify-content: center;
}

/* Match the homepage primary action to the approved form-submit gradient. */
body.home-page
  a[href="https://app.digitleadai.com/"][class~="bg-blue-600"] {
  background-color: #3478f6 !important;
  background-image: linear-gradient(90deg, #3478f6 0%, #8c55f6 100%) !important;
  box-shadow: 0 18px 36px -22px rgba(94, 79, 232, 0.65) !important;
}

body.home-page
  a[href="https://app.digitleadai.com/"][class~="bg-blue-600"]:hover {
  background-color: #3974e8 !important;
  background-image: linear-gradient(90deg, #3974e8 0%, #7b61ee 100%) !important;
}

/* Distinguish the pricing tiers while keeping the Agent palette dominant. */
[class~="bg-gradient-to-r"][class~="from-amber-500"][class~="to-orange-500"] {
  background-color: #39d2bd !important;
  background-image: linear-gradient(112deg, #39d2bd 0%, #3478f6 100%) !important;
  filter: drop-shadow(0 5px 8px rgba(52, 120, 246, 0.32)) !important;
}

[class~="bg-gradient-to-r"][class~="from-indigo-600"][class~="to-purple-600"] {
  background-color: #8c55f6 !important;
  background-image: linear-gradient(112deg, #8c55f6 0%, #6758e8 100%) !important;
}