:root {
  --alternatives-ink: #11183b;
  --alternatives-muted: #58627f;
  --alternatives-line: #e3e5ee;
  --alternatives-violet: #6b2fe4;
  --alternatives-violet-soft: #f0e8ff;
}

* { box-sizing: border-box; }
html { background: #fff; }
body.alternatives-body { min-width: 320px; margin: 0; background: #fdfbff; color: var(--alternatives-ink); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 15px; -webkit-font-smoothing: antialiased; }
.alternatives-body > main { position: relative; overflow: hidden; background-color: #fdfbff; background-image: radial-gradient(circle at -8% 11%, rgb(255 226 225 / 82%) 0 9%, transparent 25%), radial-gradient(circle at 106% 21%, rgb(235 214 255 / 74%) 0 10%, transparent 28%), radial-gradient(circle at 12% 48%, rgb(246 231 255 / 48%), transparent 28%), radial-gradient(circle at 92% 69%, rgb(255 231 241 / 46%), transparent 31%), linear-gradient(180deg, #fffdfd 0%, #fdfaff 38%, #fff 100%); background-repeat: no-repeat; }

.alternatives-hero { position: relative; z-index: 0; min-height: 440px; overflow: visible; background: transparent; }
.alternatives-hero::before, .alternatives-hero::after { position: absolute; content: ""; pointer-events: none; }
.alternatives-hero::before { width: 185px; height: 330px; right: -12px; top: 0; opacity: .32; background-image: radial-gradient(#edbfd9 1.5px, transparent 1.5px); background-size: 13px 13px; mask-image: linear-gradient(to left, #000, transparent); }
.alternatives-hero::after { width: 230px; height: 230px; left: -60px; bottom: -85px; border-radius: 50%; opacity: .4; background-image: radial-gradient(#b988ee 1.35px, transparent 1.35px); background-size: 11px 11px; mask-image: radial-gradient(circle, #000 10%, transparent 70%); }
.alternatives-hero__orb { position: absolute; border-radius: 50%; pointer-events: none; }
.alternatives-hero__orb--left { width: 245px; height: 245px; left: -127px; top: 91px; background: linear-gradient(145deg, #fff0f3, #f2e6ff); }
.alternatives-hero__orb--right { width: 250px; height: 250px; right: -122px; bottom: -71px; background: linear-gradient(145deg, #f7eaff, #f2e2ff); }
.alternatives-hero__inner { position: relative; z-index: 1; width: min(100% - 40px, 910px); margin: 0 auto; padding: 47px 0 44px; text-align: center; }
.alternatives-badge { display: inline-flex; min-height: 34px; align-items: center; gap: 8px; border-radius: 999px; padding: 6px 14px; background: linear-gradient(115deg, #f0e7ff, #f6edff); color: var(--alternatives-violet); font-size: 13px; font-weight: 700; }
.alternatives-badge svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.alternatives-hero h1 { max-width: 950px; margin: 18px auto 12px; color: #11183b; font-family: var(--font-display, Inter), sans-serif; font-size: clamp(34px, 4vw, 49px); font-weight: 800; line-height: 1.08; letter-spacing: -.045em; }
.alternatives-hero__inner > p { margin: 0 auto; color: var(--alternatives-muted); font-size: 16px; line-height: 1.6; }
.alternatives-search { display: grid; min-height: 64px; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 12px; max-width: 815px; margin: 24px auto 0; border: 1px solid #dbdce8; border-radius: 15px; padding: 7px 9px 7px 18px; background: #fff; box-shadow: 0 10px 27px rgb(48 31 93 / 12%); text-align: left; }
.alternatives-search > svg { width: 22px; height: 22px; fill: none; stroke: #65708c; stroke-width: 1.8; stroke-linecap: round; }
.alternatives-search input { min-width: 0; border: 0; outline: 0; padding: 0; background: transparent; color: #171e41; font: inherit; font-size: 15px; }
.alternatives-search input::placeholder { color: #7e859a; opacity: 1; }
.alternatives-search button { min-width: 119px; min-height: 48px; border: 0; border-radius: 10px; background: linear-gradient(115deg, #7232dc, #8a47e8); color: #fff; font: inherit; font-size: 14px; font-weight: 750; box-shadow: 0 7px 17px rgb(106 44 219 / 25%); cursor: pointer; }
.alternatives-search button:hover { background: linear-gradient(115deg, #6125d0, #7c3bdf); }
.alternatives-examples { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; color: #35405f; font-size: 13px; }
.alternatives-examples strong { margin-right: 3px; font-weight: 700; }
.alternatives-examples a { min-width: 70px; border: 1px solid #d8c8f8; border-radius: 999px; padding: 5px 14px; background: rgb(255 255 255 / 62%); color: #7034de; font-weight: 650; }
.alternatives-examples a:hover { border-color: #9c70ef; background: #fff; }

.alternatives-catalog { position: relative; z-index: 1; width: min(100% - 60px, 1170px); margin: -1px auto 0; padding: 0 0 23px; }
.alternatives-country { margin-top: 24px; border: 1px solid rgb(223 225 233 / 92%); border-radius: 18px; padding: 27px 31px 21px; background: rgb(255 255 255 / 86%); box-shadow: 0 10px 30px rgb(33 26 71 / 7%); backdrop-filter: blur(12px); }
.alternatives-country:first-of-type { margin-top: -1px; }
.alternatives-country__heading { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.alternatives-flag { position: relative; display: block; width: 46px; height: 46px; flex: 0 0 46px; overflow: hidden; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px rgb(20 25 58 / 6%); }
.alternatives-flag--usa { background: repeating-linear-gradient(to bottom, #db2947 0 3.55px, #fff 3.55px 7.1px); }
.alternatives-flag--usa::before { position: absolute; width: 23px; height: 24px; top: 0; left: 0; background: #243c82; content: ""; }
.alternatives-flag--usa::after { position: absolute; width: 18px; height: 18px; top: 3px; left: 2px; background-image: radial-gradient(#fff 1px, transparent 1.2px); background-size: 5px 5px; content: ""; }
.alternatives-flag--china { background: #ed253b; }
.alternatives-flag--china::before { position: absolute; top: 8px; left: 8px; color: #ffd73a; content: "★"; font-size: 16px; line-height: 1; }
.alternatives-flag--china::after { position: absolute; width: 13px; height: 12px; top: 6px; left: 23px; color: #ffd73a; content: "✦"; font-size: 9px; letter-spacing: 1px; text-shadow: 6px 7px #ffd73a, 1px 15px #ffd73a; }
.alternatives-country__heading h2 { margin: 0 0 3px; color: #151d42; font-family: var(--font-display, Inter), sans-serif; font-size: 28px; font-weight: 800; line-height: 1.05; letter-spacing: -.03em; }
.alternatives-country__heading p { margin: 0; color: #56617e; font-size: 14px; line-height: 1.5; }
.alternatives-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 29px; }
.alternative-card { position: relative; display: flex; min-height: 205px; flex-direction: column; border: 1px solid #dfe1e9; border-radius: 12px; padding: 44px 24px 17px; background: #fff; box-shadow: 0 7px 18px rgb(25 29 65 / 8%); }
.alternative-category { position: absolute; top: 11px; left: 24px; border-radius: 999px; padding: 4px 12px; background: #eee8fb; color: #50328d; font-size: 11px; font-weight: 750; line-height: 1.2; }
.alternative-product { display: grid; min-height: 72px; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 16px; }
.alternative-product h3 { margin: 0 0 5px; color: #151c3d; font: inherit; font-size: 16px; font-weight: 800; line-height: 1.2; }
.alternative-product p { margin: 0; color: #4f5974; font-size: 13px; line-height: 1.42; }
.alternative-product--source { border-radius: 9px; color: inherit; transition: background .16s ease, transform .16s ease; }
.alternative-product--source:hover { background: #faf8ff; transform: translateY(-1px); }
.alternative-product--source small { display: block; margin-top: 7px; color: #6b2ddb; font-size: 11px; font-weight: 700; }
.alternative-brand { display: grid; width: 54px; height: 54px; overflow: hidden; place-items: center; border-radius: 10px; background: linear-gradient(145deg, #25145c, #131934); color: #fff; font-size: 25px; font-weight: 850; box-shadow: 0 5px 12px rgb(23 27 65 / 12%); }
.alternative-brand img { display: block; width: 100%; height: 100%; object-fit: contain; }
.alternative-brand--notion { border: 1px solid #d8d8dc; background: #fff; color: #060606; font-family: Georgia, serif; }
.alternative-brand--slack { background: #fff; color: #28b67b; font-size: 33px; }
.alternative-brand--zoom { background: linear-gradient(145deg, #2c9bff, #1671ea); }
.alternative-brand--mailchimp { background: #ffe11a; color: #171717; }
.alternative-brand--hubspot { background: linear-gradient(145deg, #ff7046, #ff4e38); }
.alternative-brand--intercom { background: linear-gradient(145deg, #1377f2, #2467dd); }
.alternative-brand--lark { background: #fff; color: #1f8af4; }
.alternative-brand--dingtalk { background: #fff; color: #1d8ffa; }
.alternative-brand--tencent { background: #fff; color: #2776e9; }
.alternative-brand--alibaba { background: linear-gradient(145deg, #ffac12, #f77a00); }
.alternative-brand--wecom { background: #fff; color: #2f9ff4; }
.alternative-brand--kingdee { background: #fff; color: #1578e5; font-size: 16px; }
.alternative-brand--wimi { background: linear-gradient(145deg, #7e36dc, #5223b8); }
.alternative-brand--talkspirit { background: linear-gradient(145deg, #172152, #202b66); }
.alternative-brand--livestorm { background: linear-gradient(145deg, #123b58, #041b2e); }
.alternative-brand--jamespot { background: linear-gradient(145deg, #8537d8, #6c28ba); }
.alternative-brand--clever-cloud { background: linear-gradient(145deg, #f72f3f, #d41f3e); }
.alternative-brand--crisp { background: linear-gradient(145deg, #1486f4, #1a5bd5); }
.alternative-brand--axonaut { background: linear-gradient(145deg, #0c83db, #1853b9); }
.alternative-divider { position: relative; margin: 15px 0 10px; border-top: 1px solid #e4e5eb; padding-top: 10px; color: #59627b; font-size: 11px; font-weight: 650; }
.alternative-product--french { min-height: 73px; }
.alternative-product--french h3 { color: #722fdf; font-size: 18px; }
.alternative-card__link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; border-top: 1px solid #e5e6ec; padding-top: 13px; color: #6b2ddb; font-size: 13px; font-weight: 700; }
.alternative-card__link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .16s ease; }
.alternative-card__link:hover svg { transform: translateX(3px); }
.alternatives-show-all { display: grid; width: fit-content; min-width: 210px; min-height: 42px; place-items: center; margin: 24px auto 0; border: 1px solid #8b4ce8; border-radius: 7px; padding: 0 22px; color: #692bd8; font-size: 13px; font-weight: 750; }
.alternatives-show-all:hover { background: #f8f4ff; }
.alternatives-empty { margin: 24px 0; border: 1px solid #e0d9ef; border-radius: 16px; padding: 45px 25px; background: #fff; text-align: center; }
.alternatives-empty > span { color: #7237df; font-size: 38px; }
.alternatives-empty h2 { margin: 10px 0 5px; font-size: 22px; }
.alternatives-empty p { margin: 0 0 18px; color: var(--alternatives-muted); }
.alternatives-empty a { display: inline-flex; border-radius: 8px; padding: 10px 17px; background: #6d30df; color: #fff; font-size: 12px; font-weight: 700; }

.alternatives-benefits { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 17px; border: 1px solid #dfe1e9; border-radius: 16px; padding: 17px 29px; background: rgb(255 255 255 / 88%); box-shadow: 0 7px 21px rgb(28 26 66 / 6%); backdrop-filter: blur(12px); }
.alternatives-benefits article { display: grid; min-width: 0; grid-template-columns: 55px minmax(0, 1fr); align-items: center; gap: 16px; padding: 0 27px; }
.alternatives-benefits article + article { border-left: 1px solid #e3e4eb; }
.alternatives-benefits article > span { display: grid; width: 55px; height: 55px; place-items: center; border-radius: 50%; }
.alternatives-benefits .is-purple { background: #eee8ff; color: #7441de; }
.alternatives-benefits .is-pink { background: #ffe7ef; color: #f14178; }
.alternatives-benefits .is-violet { background: #f0e4ff; color: #6d2ed5; }
.alternatives-benefits svg { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.alternatives-benefits h2 { margin: 0 0 4px; color: #192143; font: inherit; font-size: 16px; font-weight: 800; }
.alternatives-benefits p { margin: 0; color: #515c78; font-size: 13px; line-height: 1.5; }

@media (max-width: 1000px) {
  .alternatives-hero { min-height: 430px; }
  .alternatives-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alternatives-benefits { padding-inline: 15px; }
  .alternatives-benefits article { padding-inline: 16px; }
}

@media (max-width: 720px) {
  .alternatives-hero { min-height: 0; }
  .alternatives-hero__inner { width: min(100% - 28px, 610px); padding: 34px 0 37px; }
  .alternatives-hero h1 { margin-top: 15px; font-size: clamp(31px, 9vw, 42px); }
  .alternatives-hero h1 br, .alternatives-hero__inner > p br { display: none; }
  .alternatives-search { grid-template-columns: 20px minmax(0, 1fr); padding: 10px 12px 10px 15px; }
  .alternatives-search button { min-height: 43px; grid-column: 1 / -1; }
  .alternatives-examples strong { width: 100%; }
  .alternatives-catalog { width: min(100% - 24px, 580px); }
  .alternatives-country { padding: 22px 16px 18px; }
  .alternatives-grid { grid-template-columns: 1fr; gap: 14px; }
  .alternative-card { min-height: 205px; }
  .alternatives-benefits { grid-template-columns: 1fr; padding: 4px 18px; }
  .alternatives-benefits article { padding: 14px 0; }
  .alternatives-benefits article + article { border-top: 1px solid #e3e4eb; border-left: 0; }
}

@media (max-width: 450px) {
  .alternatives-hero__orb--left { left: -180px; }
  .alternatives-hero__orb--right { right: -180px; }
  .alternatives-country__heading h2 { font-size: 25px; }
}