:root {
  --bg: #f4f8fa;
  --surface: rgba(255,255,255,.82);
  --ink: #17282f;
  --muted: #65777e;
  --line: rgba(90,126,138,.2);
  --line-strong: rgba(65,111,126,.35);
  --red: #ff735c;
  --red-dark: #e45743;
  --blue: #13a9c7;
  --cyan: #63d8e7;
  --green: #37b589;
  --navy: #142a34;
  --soft-blue: #e2f7fa;
  --soft-red: #fff0ed;
  --radius: 24px;
  --shadow: 0 28px 80px rgba(50,103,120,.13);
}

html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(circle at 12% 18%, rgba(99,216,231,.15), transparent 24rem),
    linear-gradient(135deg, #f9fcfd, #edf5f7);
}
.site-header { top: 12px; width: min(1180px, calc(100% - 28px)); margin: auto; border: 1px solid rgba(80,126,140,.16); border-radius: 999px; background: rgba(255,255,255,.78); backdrop-filter: blur(24px); box-shadow: 0 12px 40px rgba(61,111,126,.1); }
.nav { min-height: 64px; }
.logo-mark { border-radius: 50%; background: var(--navy); box-shadow: 0 0 0 6px rgba(19,169,199,.1); }
.logo small { color: var(--blue); font-family: "Arial Narrow", sans-serif; letter-spacing: .16em; }
.nav-links { padding: 5px; border-radius: 999px; background: rgba(227,242,246,.72); }
.nav-links a { padding: 9px 13px; border-radius: 999px; font-size: 11px; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--navy); background: white; }
.nav-cta, .btn { border-radius: 999px; background: var(--navy); border-color: var(--navy); }
.btn:hover, .nav-cta:hover { background: var(--red); border-color: var(--red); transform: translateY(-2px); }
.btn-secondary { color: var(--navy); background: rgba(255,255,255,.75); border-color: rgba(64,105,118,.28); }

.hero { min-height: 900px; color: var(--ink); background: transparent; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 80px -12% auto 48%; width: 48vw; height: 48vw; border: 1px solid rgba(19,169,199,.14); border-radius: 50%; box-shadow: 0 0 0 70px rgba(19,169,199,.035), 0 0 0 140px rgba(19,169,199,.02); }
.hero::after { background: radial-gradient(circle at 74% 34%, rgba(99,216,231,.28), transparent 28rem); }
.hero-grid { padding-top: 150px; gap: 7%; }
.live-badge { color: var(--blue); border: 0; border-radius: 999px; background: rgba(255,255,255,.76); box-shadow: inset 0 0 0 1px var(--line); }
.live-dot { background: var(--red); box-shadow: 0 0 0 5px rgba(255,115,92,.12); }
h1 { font-family: "Arial Narrow", "Microsoft YaHei", sans-serif; font-weight: 700; letter-spacing: -.055em; }
h1 span { color: var(--blue); }
.hero-copy p { color: var(--muted); }
.trust-row { color: #789099; }
.app-window { overflow: visible; border-radius: 40px; border: 1px solid rgba(255,255,255,.8); background: rgba(255,255,255,.46); box-shadow: 0 50px 110px rgba(59,118,135,.22); backdrop-filter: blur(16px); transform: rotate(1.5deg); }
.app-window img { border-radius: 36px; }
.window-bar { display: none; }
.presence-card { border: 1px solid rgba(255,255,255,.75); border-radius: 20px; color: var(--ink); background: rgba(255,255,255,.8); box-shadow: var(--shadow); backdrop-filter: blur(20px); }
.presence-card small { color: var(--muted); }
.presence-avatars span { border-radius: 50%; background: var(--blue); border-color: white; }
.presence-avatars span:nth-child(2) { background: var(--red); }
.presence-avatars span:nth-child(3) { background: var(--green); }

.timezone-bar { position: relative; margin-top: -84px; border: 0; background: transparent; }
.procurement-flow { overflow: hidden; border: 1px solid rgba(255,255,255,.8); border-radius: 28px; background: rgba(255,255,255,.72); box-shadow: var(--shadow); backdrop-filter: blur(22px); }
.procurement-step { position: relative; border: 0; background: transparent; }
.procurement-step:not(:last-child)::after { content: "→"; position: absolute; right: -7px; top: 42px; color: var(--cyan); font-size: 20px; z-index: 2; }
.procurement-step small { color: var(--blue); }
.procurement-step span { color: var(--muted); }

.section { padding-block: 120px; }
.section-white { background: rgba(255,255,255,.72); }
.section-dark { color: white; background: var(--navy); border-radius: 56px; margin: 0 18px; overflow: hidden; }
.eyebrow { color: var(--blue); }
.eyebrow::before { background: var(--red); box-shadow: 0 0 0 7px rgba(255,115,92,.12); }
.title span { color: var(--blue); }
.section-dark .title span { color: var(--cyan); }

.feature-grid { gap: 16px; }
.feature-card { border-radius: 26px; border-color: rgba(72,126,141,.15); background: rgba(255,255,255,.7); backdrop-filter: blur(10px); }
.feature-card:hover { transform: translateY(-7px); border-color: rgba(19,169,199,.4); box-shadow: var(--shadow); }
.feature-icon { border-radius: 18px; color: var(--blue); background: var(--soft-blue); }
.feature-card:nth-child(2) .feature-icon, .feature-card:nth-child(5) .feature-icon { color: var(--red); background: var(--soft-red); }
.card-presence { color: var(--green); }

.collab-media img { border-radius: 38px; border: 8px solid white; box-shadow: var(--shadow); }
.floating-note { border: 0; border-radius: 20px; box-shadow: var(--shadow); }
.floating-note span { color: var(--blue); }
.check-list li::before { border-radius: 50%; color: white; background: var(--blue); }

.download-grid { gap: 12px; border: 0; background: transparent; }
.download-card { border-radius: 24px; border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.06); }
.platform { border-radius: 14px; color: var(--cyan); background: rgba(99,216,231,.11); }
.scene-grid, .quotes { gap: 16px; }
.scene-card, .quote, .price-card, .help-card, .help-nav, .search-box, .requirement, .download-row { border-radius: 26px; border-color: rgba(72,126,141,.15); background: rgba(255,255,255,.72); }
.scene-card:not(:first-child) { background: rgba(255,255,255,.72); }
.scene-graphic { border-radius: 22px; border: 1px solid var(--line); background: linear-gradient(135deg, #e7f8fa, #fff); }
.scene-graphic::before, .scene-graphic::after { border-radius: 50%; background: var(--blue); }
.avatar { border-radius: 50%; background: var(--blue); }
.quote:nth-child(2) .avatar { background: var(--red); }
.quote:nth-child(3) .avatar { background: var(--green); }

.price-card.featured { color: white; background: var(--navy); border-color: var(--navy); box-shadow: 0 30px 70px rgba(20,42,52,.25); }
.plan { border-radius: 999px; color: var(--blue); background: var(--soft-blue); }
.featured .plan { color: var(--cyan); background: rgba(99,216,231,.12); }
.faq-item { border-color: var(--line); }
.faq-question b { border-radius: 50%; color: white; background: var(--blue); }
.cta-panel { border-radius: 38px; background: linear-gradient(120deg, var(--navy), #1f5968); box-shadow: 0 35px 90px rgba(35,97,113,.2); }

.page-hero { min-height: 620px; color: var(--ink); background: radial-gradient(circle at 80% 30%, rgba(99,216,231,.25), transparent 25rem), transparent; border: 0; }
.page-hero p { color: var(--muted); }
.page-media { border-radius: 34px; border: 8px solid white; box-shadow: var(--shadow); }
.download-row .platform { color: white; background: var(--blue); }
.help-nav a { border-radius: 999px; }
.help-nav a:hover { color: white; background: var(--blue); }
.help-card:hover { border-color: rgba(19,169,199,.45); box-shadow: var(--shadow); }
.article-num, .article > span:last-child { color: var(--blue); }
.site-footer { background: #10232b; }

@media (max-width: 980px) {
  .site-header { border-radius: 24px; }
  .site-header .nav-links { top: 72px; border-radius: 24px; background: white; }
  .hero::before { width: 80vw; height: 80vw; left: 35%; }
}
@media (max-width: 680px) {
  .section-dark { margin-inline: 8px; border-radius: 32px; }
  .procurement-flow { grid-template-columns: 1fr 1fr; }
  .procurement-step:not(:last-child)::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}