/* Anime-tech refresh: bright pastel atmosphere, glass controls, structured commerce layout. */
:root {
  --anime-mint: #11b77b;
  --anime-mint-deep: #07885c;
  --anime-sky: #dff7ff;
  --anime-lilac: #eee8ff;
  --anime-pink: #ffe5ed;
  --anime-yellow: #fff4c8;
  --glass: rgba(255, 255, 255, .68);
  --glass-strong: rgba(255, 255, 255, .84);
  --glass-line: rgba(255, 255, 255, .88);
}

body {
  background:
    radial-gradient(circle at 10% 5%, rgba(223,247,255,.95), transparent 27rem),
    radial-gradient(circle at 92% 12%, rgba(255,229,237,.78), transparent 23rem),
    linear-gradient(135deg, #fbfcff 0%, #f6fbf8 45%, #f1f7ff 100%);
}

.utility-bar {
  background: linear-gradient(90deg, #d9f8e9, #e7f8ff 46%, #fff0f5);
  color: #174f3b;
  border-bottom: 1px solid rgba(255,255,255,.75);
}
.site-header {
  background: rgba(250,252,255,.7);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border-bottom-color: rgba(25,60,50,.08);
}

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(120deg, rgba(255,255,255,.34), rgba(223,247,255,.26));
}
.hero::before {
  position: absolute;
  z-index: -1;
  top: 35px;
  right: -110px;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(17,183,123,.15);
  border-radius: 50%;
  box-shadow: 0 0 0 24px rgba(17,183,123,.035), 0 0 0 52px rgba(116,95,220,.035);
  content: '';
  transform: rotate(-18deg);
}
.hero::after {
  position: absolute;
  z-index: -1;
  top: 90px;
  right: 31%;
  width: 145px;
  height: 85px;
  content: '';
  opacity: .55;
  background-image: radial-gradient(#78d8b5 1.5px, transparent 1.5px);
  background-size: 14px 14px;
  mask-image: linear-gradient(90deg, transparent, #000 38%, transparent);
}
.hero__copy { position: relative; }
.hero__copy::after {
  position: absolute;
  top: -30px;
  left: -20px;
  color: #f2c95a;
  content: '✦';
  font-size: 20px;
  filter: drop-shadow(0 4px 7px rgba(242,201,90,.3));
}

.button, .nav-cta, .round-arrow, .floating-tag, .copy-email {
  border: 1px solid rgba(255,255,255,.9);
  background: rgba(255,255,255,.48);
  box-shadow: 0 9px 22px rgba(69,110,100,.1), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
}
.button { border-radius: 15px; }
.button--primary {
  background: linear-gradient(135deg, rgba(17,183,123,.92), rgba(30,154,193,.83));
  border-color: rgba(255,255,255,.75);
  box-shadow: 0 12px 26px rgba(17,183,123,.23), inset 0 1px 0 rgba(255,255,255,.55);
}
.button--primary:hover { background: linear-gradient(135deg, #07885c, #157eaa); }
.button--outline { background: rgba(255,255,255,.36); border-color: rgba(17,183,123,.48); }
.nav-cta { border-color: rgba(17,183,123,.38); }
.nav-cta:hover { background: rgba(17,183,123,.86); }
.round-arrow { border-color: rgba(17,183,123,.26); }
.round-arrow:hover { background: var(--anime-mint); }
.floating-tag { border-radius: 14px; }

.route-card {
  border: 1px solid rgba(255,255,255,.94);
  border-radius: 28px;
  background: rgba(255,255,255,.58);
  box-shadow: 25px 28px 0 rgba(17,183,123,.08), 0 22px 48px rgba(79,109,139,.13), inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}
.route-card::after {
  position: absolute;
  right: 22px;
  bottom: 21px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f3c84b;
  box-shadow: -12px 0 #fb9cba, -24px 0 var(--anime-mint);
  content: '';
}
.route-card__map { background: linear-gradient(135deg, rgba(223,247,255,.9), rgba(230,250,239,.76)); }
.route-card__stamp { border-radius: 16px; box-shadow: 0 8px 20px rgba(27,85,80,.1); }

.trust-strip {
  background: rgba(227,249,240,.76);
  border-top: 1px solid rgba(255,255,255,.8);
  border-bottom: 1px solid rgba(255,255,255,.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.trust-strip__item { border-right-color: rgba(17,120,88,.1); }
.trust-strip__marquee { color: rgba(17,183,123,.17); }

.services { position: relative; }
.service-list { display: grid; gap: 14px; border-top: 0; }
.service-row {
  min-height: 136px;
  padding: 22px 20px;
  border: 1px solid rgba(255,255,255,.96);
  border-radius: 22px;
  background: rgba(255,255,255,.57);
  box-shadow: 0 8px 24px rgba(56,97,86,.06), inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.service-row:hover { padding-right: 25px; padding-left: 25px; background: rgba(255,255,255,.8); transform: translateY(-3px); }
.service-row--accent { border-color: rgba(17,183,123,.28); background: linear-gradient(110deg, rgba(231,252,241,.86), rgba(255,255,255,.56)); }

.platforms {
  background: linear-gradient(135deg, rgba(238,232,255,.78), rgba(223,247,255,.82));
}
.platform-card {
  border: 1px solid rgba(255,255,255,.96);
  border-radius: 24px;
  background: rgba(255,255,255,.7);
  box-shadow: 0 12px 28px rgba(96,95,143,.08), inset 0 1px 0 rgba(255,255,255,.98);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.platform-card:nth-child(2) { background: linear-gradient(160deg, rgba(255,255,255,.8), rgba(255,229,237,.65)); }
.platform-card:nth-child(3) { background: linear-gradient(160deg, rgba(255,255,255,.8), rgba(255,244,200,.66)); }
.platform-card:nth-child(4) { background: linear-gradient(160deg, rgba(255,255,255,.8), rgba(223,247,255,.7)); }
.platform-card:hover { background: linear-gradient(135deg, #11b77b, #299fc2); }

.process {
  background: linear-gradient(135deg, #d9f8e9, #dff7ff 58%, #eee8ff);
  border-top: 1px solid rgba(255,255,255,.86);
  border-bottom: 1px solid rgba(255,255,255,.86);
}
.process-step { padding: 16px 15px 30px; border-radius: 18px; transition: background .25s, transform .25s; }
.process-step:hover { background: rgba(255,255,255,.42); transform: translateX(5px); }
.process-step__num { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border-radius: 50%; background: rgba(255,255,255,.76); box-shadow: 0 5px 13px rgba(17,183,123,.1); }
.process-step__rule { left: 58px; width: calc(100% - 58px); background: rgba(20,90,70,.12); }

.clarity-band {
  background: linear-gradient(115deg, #bcebd6, #dff7ff 48%, #eee8ff);
  border-top: 1px solid rgba(255,255,255,.85);
  border-bottom: 1px solid rgba(255,255,255,.85);
}
.clarity-band__mark { color: var(--anime-mint); text-shadow: 7px 7px 0 rgba(251,156,186,.33); }
.clarity-band__list div { background: rgba(255,255,255,.26); border-radius: 14px; padding: 14px 16px; border-left: 0; }

.contact { background: linear-gradient(135deg, #edf5f1, #f2eeff); }
.contact__panel {
  border: 1px solid rgba(255,255,255,.95);
  border-radius: 30px;
  background: rgba(255,255,255,.68);
  box-shadow: 18px 20px 0 rgba(17,183,123,.08), 0 22px 42px rgba(78,104,129,.1), inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.wechat-card { background: rgba(231,252,241,.72); border-color: rgba(255,255,255,.9); box-shadow: 0 9px 21px rgba(17,100,80,.06), inset 0 1px 0 rgba(255,255,255,.9); }
.contact-channel { border-bottom-color: rgba(20,90,70,.1); }
.contact-channel:hover { border-radius: 14px; background: rgba(255,255,255,.62); }
.contact-channel__icon { background: rgba(255,255,255,.5); }

.site-footer { background: linear-gradient(135deg, #e6f6ee, #eaf4ff 60%, #f4ecff); }

@media (max-width: 680px) {
  .hero::before { top: 150px; right: -280px; width: 450px; height: 450px; }
  .hero::after { top: 145px; right: 10%; }
  .service-row { padding: 21px 14px; border-radius: 18px; }
  .service-row:hover { padding-right: 18px; padding-left: 18px; }
  .contact__panel { border-radius: 24px; }
}