/* ==========================================================================
   Theme A — Aurora 晨光
   Light, friendly SaaS tech: soft aurora gradients, glass header pill,
   generous radii, real product screenshots in glass frames. Blue → cyan with a warm accent
   taken from the logo's sphere.
   ========================================================================== */
:root {
  --bg: #f7f9fc;
  --bg-2: #eef3f9;
  --surface: #ffffff;
  --surface-2: #f1f5fa;
  --fg: #0b1526;
  --fg-2: #33425a;
  --muted: #5b6b80;
  --line: #e2e8f0;
  --accent: #1a8fe3;
  --accent-2: #22c3e6;
  --accent-ink: #0b6fc4;
  --accent-fg: #fff;
  --warm: #ff8a3d;
  --grad: linear-gradient(120deg, #1a8fe3 0%, #22c3e6 55%, #7c6cff 100%);
  /* deeper twin of --grad for fills that carry white text (every stop ≥ 4.5:1 against #fff) */
  --grad-ink: linear-gradient(120deg, #0b6fc4 0%, #0a7fa8 55%, #5b4fd6 100%);
  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 30px rgba(30, 64, 120, .07);
  --shadow-lg: 0 24px 60px rgba(30, 64, 120, .14);
  --hdr-h: 76px;
}
body { background: var(--bg); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: 720px; z-index: -1; pointer-events: none; background: radial-gradient(60% 60% at 15% 0%, rgba(34, 195, 230, .16), transparent 70%), radial-gradient(50% 55% at 90% 5%, rgba(124, 108, 255, .12), transparent 70%); }

/* ---------- header: floating glass pill ---------- */
.hdr { padding: 12px var(--gutter) 0; }
.hdr__bar { max-width: var(--maxw); margin-inline: auto; padding: 0 10px 0 22px; min-height: 64px; border-radius: 999px; background: rgba(255, 255, 255, .72); border: 1px solid rgba(226, 232, 240, .9); box-shadow: 0 6px 24px rgba(30, 64, 120, .06); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); transition: box-shadow .25s, background .25s; }
.hdr.is-scrolled .hdr__bar { background: rgba(255, 255, 255, .9); box-shadow: 0 10px 30px rgba(30, 64, 120, .12); }
.brand img { height: 36px; }
.nav__link { border-radius: 999px; }
.nav__link:hover { background: var(--surface-2); color: var(--fg); }
.nav__item.is-active > .nav__link { color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.hdr__cta { background: var(--grad-ink); }
@media (max-width: 1023px) {
  .hdr__bar { padding: 0 6px 0 18px; }
  .nav { inset: 88px 12px auto 12px; max-height: calc(100vh - 110px); border-radius: 24px; border: 1px solid var(--line); box-shadow: var(--shadow-lg); padding-bottom: 24px; }
}

/* ---------- buttons ---------- */
.btn--primary { background: var(--grad-ink); background-size: 140% 100%; background-position: 0 0; transition: background-position .4s, transform .2s, box-shadow .2s; }
.btn--primary:hover { background-position: 100% 0; box-shadow: 0 10px 28px rgba(26, 143, 227, .35); }
.btn--ghost { background: rgba(255, 255, 255, .7); }

/* ---------- home hero ---------- */
.ahero { position: relative; padding-block: clamp(48px, 8vw, 104px) clamp(40px, 6vw, 72px); overflow: hidden; }
.ahero__bg { position: absolute; inset: -10% -10% auto; height: 760px; z-index: -1; pointer-events: none; }
.ahero__bg span { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: drift 18s ease-in-out infinite alternate; }
.ahero__bg span:nth-child(1) { width: 520px; height: 520px; left: 8%; top: 0; background: #8fe3f5; }
.ahero__bg span:nth-child(2) { width: 460px; height: 460px; right: 6%; top: 40px; background: #b9b2ff; animation-delay: -6s; }
.ahero__bg span:nth-child(3) { width: 380px; height: 380px; left: 40%; top: 240px; background: #ffd2b0; animation-delay: -12s; opacity: .45; }
@keyframes drift { to { transform: translate3d(40px, 30px, 0) scale(1.08); } }
.ahero__inner { display: grid; justify-items: center; text-align: center; gap: 22px; }
.ahero .pill { background: rgba(255, 255, 255, .8); border: 1px solid var(--line); color: var(--fg-2); }
.ahero__title { font-size: clamp(32px, 4.8vw, 58px); line-height: 1.12; letter-spacing: -.025em; font-weight: 900; }
.ahero__title em { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ahero__lead { max-width: 40em; font-size: clamp(16px, 1.7vw, 19px); color: var(--fg-2); }
.ahero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.stats--hero { width: 100%; max-width: 820px; margin-top: 18px; padding: 22px 26px; border-radius: var(--radius); background: rgba(255, 255, 255, .7); border: 1px solid var(--line); backdrop-filter: blur(10px); text-align: left; }
.stats--hero .stats__item + .stats__item { border-left: 1px solid var(--line); padding-left: 18px; }
@media (max-width: 639px) { .stats--hero .stats__item:nth-child(3) { border-left: 0; padding-left: 0; } }


/* ---------- home sections ---------- */
.pain-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pain { position: relative; display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 3vw, 36px); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s; }
.pain::after { content: ""; position: absolute; inset: auto -40% -60% auto; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(34, 195, 230, .18), transparent 70%); transition: transform .5s var(--ease); }
.pain:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.pain:hover::after { transform: scale(1.3); }
.pain__icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: linear-gradient(135deg, rgba(26, 143, 227, .10), rgba(124, 108, 255, .10)); color: var(--accent-ink); border: 1px solid rgba(26, 143, 227, .18); }
.pain__icon .ic { width: 26px; height: 26px; }
.pain__no { position: absolute; top: 24px; right: 28px; font-size: 56px; font-weight: 900; line-height: 1; color: var(--surface-2); }
.pain__title { font-size: clamp(20px, 2.2vw, 26px); }
.pain__body { color: var(--fg-2); }
.pain .link-arrow { margin-top: auto; }
@media (max-width: 767px) { .pain-grid { grid-template-columns: 1fr; } }

.quote-card { position: relative; display: grid; grid-template-columns: 160px 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(28px, 4vw, 52px); border-radius: 28px; background: linear-gradient(rgba(255, 255, 255, .86), rgba(255, 255, 255, .86)) padding-box, var(--grad) border-box; border: 1.5px solid transparent; box-shadow: var(--shadow); }
.quote-card__avatar { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: var(--shadow); }
.quote-card__kicker { font-size: 13px; font-weight: 800; letter-spacing: .08em; color: var(--accent-ink); }
.quote-card__quote { margin: 10px 0 16px; font-size: clamp(20px, 2.2vw, 28px); font-weight: 800; line-height: 1.45; color: var(--fg); }
.quote-card__body { color: var(--fg-2); }
.quote-card__body + .quote-card__body { margin-top: 10px; }
.quote-card .link-arrow { margin-top: 18px; }
@media (max-width: 719px) { .quote-card { grid-template-columns: 1fr; } .quote-card__avatar { width: 96px; height: 96px; } }

.flow { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.flow::before { content: ""; position: absolute; left: 10%; right: 10%; top: 28px; height: 3px; border-radius: 3px; background: var(--grad); opacity: .35; }
.flow__step { position: relative; display: grid; justify-items: center; text-align: center; gap: 6px; }
.flow__dot { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #fff; border: 2px solid transparent; background-image: linear-gradient(#fff, #fff), var(--grad); background-origin: border-box; background-clip: padding-box, border-box; font-weight: 900; font-size: 20px; color: var(--accent-ink); box-shadow: var(--shadow); }
.flow__step strong { font-size: 17px; margin-top: 6px; }
.flow__step small { font-size: 13px; color: var(--muted); }
@media (max-width: 767px) { .flow { grid-template-columns: 1fr; gap: 16px; } .flow::before { left: 28px; right: auto; top: 20px; bottom: 20px; width: 3px; height: auto; } .flow__step { grid-template-columns: 58px 1fr; justify-items: start; text-align: left; column-gap: 16px; } .flow__dot { grid-row: span 2; } .flow__step strong { margin: 6px 0 0; } }

.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.bento .ccard--hero { grid-column: span 2; flex-direction: row; }
.bento .ccard--hero .ccard__media { flex: 0 0 52%; aspect-ratio: auto; min-height: 100%; }
.bento .ccard--hero .ccard__body { padding: 28px; justify-content: center; }
.bento .ccard--hero .ccard__title { font-size: 24px; }
.bento .ccard--hero .ccard__metrics strong { font-size: 30px; }
@media (max-width: 899px) { .bento { grid-template-columns: 1fr 1fr; } .bento .ccard--hero { grid-column: 1 / -1; } }
@media (max-width: 639px) { .bento .ccard--hero { flex-direction: column; } .bento .ccard--hero .ccard__media { aspect-ratio: 16 / 10; } }
@media (max-width: 559px) { .bento { grid-template-columns: 1fr; } }

.tabs__panel { padding: clamp(18px, 3vw, 28px); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }

/* ---------- components ---------- */
.ccard, .pcard, .feature, .offer, .result, .engage-card, .mod, .svc-card, .sol-card, .plan, .steps__item, .faq__item, .symptoms__item, .problems__item, .roles__col, .side-card, .metric, .principle, .sol-panel, .advisor, .author-box, .contact__form, .scenarios li { box-shadow: var(--shadow); border-color: rgba(226, 232, 240, .8); }
.ccard__meta { color: var(--accent-ink); }
.feature__no, .steps__no { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 10%, #fff); }
.steps__item::after { content: ""; position: absolute; top: 44px; right: -14px; width: 10px; height: 10px; border-top: 2px solid var(--line); border-right: 2px solid var(--line); transform: rotate(45deg); }
.steps__item:last-child::after { display: none; }
@media (max-width: 899px) { .steps__item::after { display: none; } }
.quick-answer { background: linear-gradient(135deg, rgba(26, 143, 227, .07), rgba(34, 195, 230, .07)); border-color: rgba(26, 143, 227, .2); }
.sol-card::before { height: 6px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 40%, #fff)); }
.page-solution .btn--primary, .page-solution .plan__badge { background: var(--accent-ink); }
.page-solution .btn--primary:hover { box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 35%, transparent); }
.page-solution .quick-answer { background: color-mix(in srgb, var(--accent) 7%, #fff); border-color: color-mix(in srgb, var(--accent) 25%, #fff); }
.chip.is-active { background: var(--grad-ink); border-color: transparent; color: #fff; }

/* page hero */
.phero { text-align: center; }
.phero::before { content: ""; position: absolute; inset: -30% 10% auto; height: 520px; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(34, 195, 230, .18), transparent), radial-gradient(closest-side at 70% 40%, rgba(124, 108, 255, .14), transparent); filter: blur(20px); }
.phero .crumbs ol { justify-content: center; }
.phero__title, .phero__lead { margin-inline: auto; }
.phero__actions, .badges, .tags--lg, .toc-inline { justify-content: center; }
.phero .stats--inline { margin-inline: auto; padding: 20px 24px; border-radius: var(--radius); background: rgba(255, 255, 255, .75); border: 1px solid var(--line); text-align: left; }
.phero .search { margin-inline: auto; }
.phero .author-hero { justify-content: center; }
.symptoms__item { text-align: left; }
.phero--solution .phero__title em { color: var(--accent-ink); }

/* CTA band */
.cta-band__inner { position: relative; overflow: hidden; padding: clamp(32px, 4.5vw, 56px); border-radius: 28px; background: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .9)) padding-box, var(--grad) border-box; border: 1.5px solid transparent; box-shadow: var(--shadow-lg); }
.cta-band__inner::after { content: ""; position: absolute; width: 380px; height: 380px; right: -140px; top: -180px; border-radius: 50%; background: radial-gradient(circle, rgba(34, 195, 230, .16), transparent 70%); pointer-events: none; }
.cta-band__kicker { color: var(--accent-ink); }
.cta-band .wrap.cta-band__inner { max-width: calc(var(--maxw)); }

/* footer */
.ftr { margin-top: 24px; padding: clamp(48px, 6vw, 80px) 0 28px; background: #fff; border-top: 1px solid var(--line); }
.ftr__grid { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 32px; }
.ftr__slogan { margin: 16px 0 20px; color: var(--fg-2); font-size: 15px; }
.ftr__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.ftr__bottom a:hover { color: var(--accent-ink); }
@media (max-width: 1023px) { .ftr__grid { grid-template-columns: 1fr 1fr; } .ftr__brand { grid-column: 1 / -1; } }
@media (max-width: 559px) { .ftr__grid { grid-template-columns: 1fr; } }

/* ---------- guide & new blocks ---------- */
.guide { position: relative; }
.guide::before { content: ""; position: absolute; inset: 10% 0 auto; height: 70%; z-index: -1; background: radial-gradient(50% 60% at 80% 40%, rgba(124, 108, 255, .10), transparent 70%), radial-gradient(40% 50% at 10% 60%, rgba(34, 195, 230, .10), transparent 70%); pointer-events: none; }
.guide__num { background: var(--grad-ink); }
.guide__opt { background: rgba(255, 255, 255, .8); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.guide__opt:has(input:checked) { background: var(--grad-ink); border-color: transparent; color: #fff; }
.guide__result { border: 0; box-shadow: var(--shadow-lg); background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box; border: 2px solid transparent; }
.tool, .callout, .get-panel, .scenario-card { box-shadow: var(--shadow); }
.scenario-card::after { content: ""; position: absolute; inset: 0 0 auto; height: 5px; border-radius: var(--radius) var(--radius) 0 0; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 35%, #fff)); }

/* ==========================================================================
   Interaction layer — Aurora: floating glass, light that follows the pointer
   ========================================================================== */
:root { --spot: rgba(34, 195, 230, .11); }

/* industries panel (home) */
.ind-panel { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 32px; align-items: start; padding: clamp(22px, 3vw, 32px); border-radius: var(--radius); background: rgba(255, 255, 255, .72); border: 1px solid var(--line); box-shadow: var(--shadow); }
.ind-panel__label { display: flex; align-items: center; gap: 10px; padding-top: 7px; font-size: 15px; font-weight: 800; white-space: nowrap; }
.ind-panel__label .ic { width: 22px; height: 22px; color: var(--accent-ink); }
.ind-cloud li { transition: border-color .2s, color .2s, transform .2s var(--ease); }
.ind-cloud li:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); color: var(--accent-ink); transform: translateY(-2px); }
.ind-cloud li.ind-cloud__more { padding: 0; border: 0; background: none; }
.ind-cloud__more a { display: block; padding: 8px 4px; font-size: 14px; font-weight: 700; color: var(--accent-ink); }
@media (max-width: 719px) { .ind-panel { grid-template-columns: 1fr; } }

/* inner-page hero: left-aligned beside a glass "stack" that tilts toward the pointer */
@media (min-width: 1024px) {
  .phero--has-visual { text-align: left; }
  .phero--has-visual :is(.crumbs ol, .phero__actions, .badges, .tags--lg, .toc-inline, .author-hero) { justify-content: flex-start; }
  .phero--has-visual :is(.phero__title, .phero__lead, .stats--inline, .search) { margin-inline: 0; }
}
.phero__visual { position: relative; isolation: isolate; }
.phero__visual::before { content: ""; position: absolute; inset: -12% -8%; z-index: -1; border-radius: 50%; background: radial-gradient(45% 45% at 30% 30%, rgba(34, 195, 230, .32), transparent 70%), radial-gradient(42% 42% at 75% 72%, rgba(124, 108, 255, .26), transparent 70%); filter: blur(28px); animation: drift 16s ease-in-out infinite alternate; }
.pv { padding: 26px; border-radius: 26px; background: linear-gradient(rgba(255, 255, 255, .8), rgba(255, 255, 255, .8)) padding-box, var(--grad) border-box; border: 1.5px solid transparent; box-shadow: var(--shadow-lg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transform: perspective(1100px) rotateY(calc(var(--mx, 0) * 5deg)) rotateX(calc(var(--my, 0) * -5deg)); transition: transform .5s var(--ease); }
.pv__glow { overflow: hidden; }
.pv__glow::before { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .7) 50%, transparent 62%) 0 0 / 260% 100% no-repeat; animation: pv-sheen 7s ease-in-out infinite; }
@keyframes pv-sheen { 0%, 55% { background-position: 120% 0; } 100% { background-position: -40% 0; } }
.pv__icon { background: var(--grad); color: #fff; box-shadow: 0 10px 24px rgba(26, 143, 227, .3); }
.pv__chips li { margin-left: calc(var(--i, 0) * 12px); background: #fff; border: 1px solid var(--line); box-shadow: 0 4px 14px rgba(30, 64, 120, .06); }

/* sticky section nav: a second glass pill under the header */
html.js:has(.subnav:not([hidden])) { --subnav-h: 58px; }
.subnav { padding: 8px var(--gutter) 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.subnav > .wrap { max-width: var(--maxw); padding: 0 8px; border-radius: 999px; background: rgba(255, 255, 255, .8); border: 1px solid rgba(226, 232, 240, .9); box-shadow: 0 6px 22px rgba(30, 64, 120, .07); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); overflow: hidden; }
.subnav__inner { min-height: 48px; }
.subnav__list a.is-current { background: color-mix(in srgb, var(--accent) 10%, #fff); }
.subnav__bar span { background: var(--grad); }

/* steps: gradient track; numbers light up as the reader passes them */
html.js .steps::after { background: var(--grad); }
.steps__item.is-done .steps__no { background: var(--grad-ink); color: #fff; box-shadow: 0 6px 16px rgba(26, 143, 227, .28); }

/* back to top */
.totop { background: rgba(255, 255, 255, .86); border-color: rgba(226, 232, 240, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* own platforms: glass browser frames */
.shots__frame { border: 1.5px solid transparent; border-radius: 20px; background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box; }
.shots__bar { background: rgba(241, 245, 250, .9); }
.shots__bar i:nth-child(1) { background: #ff6b6b; } .shots__bar i:nth-child(2) { background: #ffc94d; } .shots__bar i:nth-child(3) { background: #4cd964; }
.shots__thumb img { border-radius: 10px; }
.plat__text { padding: 4px; }