@font-face {
  font-family: "Remix Icon";
  src: url("assets/remixicon.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
  font-display: block;
}

:root {
  --navy: #0b2545;
  --blue: #2563eb;
  --muted: #64748b;
  --tint: #f8faff;
  --pale: #eaf2ff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--navy); background: #fff; font-family: "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
section, article, li { scroll-margin-top: 24px; }
a:focus-visible { outline: 3px solid #38bdf8; outline-offset: 5px; border-radius: 4px; }
.container { width: min(1200px, calc(100% - 48px)); margin-inline: auto; }
.icon { font-family: "Remix Icon", sans-serif; font-style: normal; font-weight: normal; line-height: 1; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 10; padding: 12px 20px; background: var(--blue); color: #fff; }
.skip-link:focus { top: 12px; }
.site-header { background: #fff; }
.navigation { min-height: 82px; display: grid; grid-template-columns: 155px 1fr auto; align-items: center; gap: 74px; }
.brand { display: inline-flex; align-items: center; gap: 12px; width: max-content; }
.brand-icon { width: 44px; height: 44px; border-radius: 13px; background: var(--blue); color: #fff; font-size: 24px; }
.brand-name { display: flex; flex-direction: column; }
.brand-name strong { font-size: 20px; line-height: 25px; font-weight: 700; }
.brand-name small { font-size: 10px; line-height: 15px; color: #94a3b8; font-weight: 500; }
.nav-home { position: relative; display: inline-block; padding: 7px 0; color: var(--blue); font-size: 15px; font-weight: 600; }
.nav-home::after { position: absolute; content: ""; width: 25px; height: 3px; bottom: 0; left: 50%; transform: translateX(-50%); border-radius: 2px; background: var(--blue); }
.header-phone { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #334155; font-weight: 500; white-space: nowrap; }
.header-phone .icon { color: var(--blue); font-size: 17px; }
.hero { height: 660px; background: #b1d9ef url("assets/hero.jpg") center / cover no-repeat; }
.hero-inner { height: 100%; display: flex; align-items: center; }
.hero-content { width: 720px; padding-bottom: 34px; }
.hero-label { min-height: 36px; display: flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid #dbeafe; border-radius: 18px; background: #fff; color: var(--blue); font-size: 13px; font-weight: 500; }
.hero-label .icon { font-size: 16px; }
h1 { margin-top: 26px; font-size: 54px; line-height: 72px; font-weight: 700; }
h1 span { color: var(--blue); }
.hero-description { max-width: 640px; margin-top: 22px; min-height: 58px; font-size: 16px; line-height: 29px; color: #475569; }
.section { padding-block: 84px; }
.section-tint { background: var(--tint); }
.eyebrow { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 17px; font-weight: 600; color: var(--blue); }
.eyebrow::before { content: ""; width: 29px; height: 3px; border-radius: 2px; background: currentColor; flex-shrink: 0; }
h2 { margin-top: 20px; font-size: 40px; line-height: 54px; font-weight: 700; }
.section-description { margin-top: 14px; color: #475569; font-size: 15px; line-height: 29px; }
.centered { text-align: center; }
.centered .eyebrow { justify-content: center; }
.centered .eyebrow::after { content: ""; width: 29px; height: 3px; margin-left: 16px; border-radius: 2px; background: currentColor; }
.grid-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grid-four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.icon-box { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; background: var(--blue); color: #fff; font-size: 28px; flex-shrink: 0; }
.icon-box-pale { background: var(--pale); color: var(--blue); }
.tone-sky { background: #0ea5e9; }
.tone-violet { background: #6366f1; }
.tone-cyan { background: #06b6d4; }
.about-layout { display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 56px; align-items: start; }
.about-intro .section-description { margin-top: 22px; min-height: 58px; }
.about-image { width: 441px; height: 220px; object-fit: cover; border-radius: 18px; margin-top: 32px; }
.about-cards { display: grid; gap: 20px; }
.about-card { display: flex; align-items: flex-start; gap: 20px; padding: 30px 34px; background: #fff; border: 1px solid #f1f5f9; border-radius: 18px; }
.about-card .icon-box { width: 46px; height: 46px; border-radius: 13px; font-size: 24px; }
.about-card h3 { font-size: 17px; line-height: 24px; font-weight: 600; }
.about-card p { margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 25px; }
.beliefs-grid, .product-grid, .business-grid, .customer-grid { margin-top: 52px; }
.belief-card { min-height: 337px; padding: 38px 32px; border: 1px solid #dbeafe; border-radius: 20px; background: #f4f8ff; }
.belief-card h3 { margin-top: 26px; font-size: 20px; line-height: 28px; }
.belief-statement { margin-top: 12px; color: var(--blue); font-size: 16px; line-height: 26px; font-weight: 600; }
.belief-description { margin-top: 18px; padding-top: 18px; border-top: 1px solid #dbeafe; color: var(--muted); font-size: 14px; line-height: 24px; }
.products { background: var(--navy); color: #fff; padding-block: 88px; }
.products .eyebrow { color: #38bdf8; }
.products h2 { margin-top: 18px; }
.products .section-description { color: #9fb3d1; }
.product-card { min-height: 420px; padding: 34px 30px; border: 1px solid #22456f; border-radius: 20px; background: #123157; }
.product-top { display: flex; align-items: center; justify-content: space-between; }
.product-top .icon-box { width: 54px; height: 54px; border-radius: 15px; font-size: 27px; }
.product-number { font-size: 32px; line-height: 1.2; font-weight: 800; color: #1e4a80; }
.product-card h3 { margin-top: 24px; font-size: 20px; line-height: 28px; }
.product-description { margin-top: 12px; min-height: 50px; font-size: 14px; line-height: 25px; color: #9fb3d1; }
.feature-list { margin-top: 20px; padding-top: 20px; border-top: 1px solid #22456f; display: grid; gap: 13px; font-size: 13px; line-height: 20px; color: #d6e4f7; }
.feature-list li { display: flex; align-items: center; gap: 10px; }
.feature-list li::before { content: "\eb80"; font-family: "Remix Icon"; font-size: 17px; line-height: 20px; color: #38bdf8; }
.business-card { min-height: 257px; padding: 30px 26px; border: 1px solid #f1f5f9; border-radius: 18px; background: var(--tint); }
.business-card .icon-box { width: 50px; height: 50px; border-radius: 14px; font-size: 25px; }
.business-card h3 { margin-top: 20px; font-size: 18px; line-height: 25px; }
.business-card p { min-height: 46px; margin-top: 10px; color: var(--muted); font-size: 13px; line-height: 23px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.tags span { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 12px; border-radius: 13px; background: var(--pale); color: var(--blue); font-size: 12px; line-height: 20px; }
.lifecycle-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px; margin-top: 56px; }
.lifecycle-steps > li { position: relative; padding: 28px 26px; border: 1px solid #f1f5f9; border-radius: 18px; background: #fff; }
.lifecycle-steps > li:not(:last-child)::after { content: "\ea6c"; font-family: "Remix Icon"; position: absolute; top: 50%; right: -43px; transform: translateY(-50%); color: #93c5fd; font-size: 26px; }
.step-heading { display: flex; align-items: center; gap: 12px; }
.step-number { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--blue); color: #fff; font-size: 16px; font-weight: 700; flex-shrink: 0; }
.step-number.tone-sky { background: #0ea5e9; }
.step-number.tone-violet { background: #6366f1; }
.step-number.tone-cyan { background: #06b6d4; }
.step-heading h3 { font-size: 17px; line-height: 24px; }
.lifecycle-steps p { min-height: 44px; margin-top: 14px; color: var(--muted); font-size: 13px; line-height: 22px; }
.industry-layout { display: grid; grid-template-columns: 520px minmax(0, 1fr); align-items: start; gap: 56px; }
.industry-intro h2 { margin-top: 18px; }
.industry-intro .section-description { margin-top: 18px; }
.pain-points { display: grid; gap: 14px; margin-top: 30px; }
.pain-points li { display: flex; align-items: center; gap: 14px; min-height: 74px; padding: 20px 24px; border-radius: 14px; background: var(--tint); color: #475569; font-size: 14px; line-height: 24px; }
.pain-points .icon { width: 34px; height: 34px; background: #fff1f2; border-radius: 10px; color: #f87171; font-size: 20px; }
.industry-upgrade { padding: 42px 40px; background: var(--navy); border-radius: 22px; color: #fff; }
.industry-upgrade > h3 { display: flex; align-items: center; gap: 12px; font-size: 22px; line-height: 31px; }
.industry-upgrade > h3 .icon { font-size: 26px; color: #38bdf8; }
.industry-upgrade > p { margin-top: 14px; color: #9fb3d1; font-size: 14px; line-height: 24px; }
.upgrade-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.upgrade-grid article { min-height: 192px; padding: 26px 22px; background: #123157; border: 1px solid #22456f; border-radius: 16px; }
.upgrade-grid .icon-box { width: 46px; height: 46px; border-radius: 13px; font-size: 23px; }
.upgrade-grid h4 { margin-top: 20px; font-size: 16px; line-height: 22px; }
.upgrade-grid p { margin-top: 8px; font-size: 12px; line-height: 21px; color: #9fb3d1; }
.customer-card { min-height: 224px; padding: 32px 24px; text-align: center; border: 1px solid #f1f5f9; border-radius: 18px; background: #fff; }
.customer-card .icon-box { width: 60px; height: 60px; border-radius: 18px; font-size: 30px; }
.customer-card h3 { margin-top: 20px; font-size: 17px; line-height: 24px; }
.customer-card p { margin-top: 10px; color: var(--muted); font-size: 13px; line-height: 22px; }
.contact { padding-block: 72px; }
.contact-card { min-height: 220px; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 36px 56px; border-radius: 24px; background: #7eb4ba url("assets/contact.jpg") center / cover no-repeat; }
.contact-copy { max-width: 560px; }
.contact-copy h2 { margin: 0; font-size: 32px; line-height: 44px; }
.contact-copy p { margin-top: 12px; color: #475569; font-size: 15px; line-height: 24px; }
.contact-actions { display: flex; gap: 16px; flex-shrink: 0; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; border-radius: 13px; padding: 12px 30px; font-size: 16px; line-height: 24px; font-weight: 600; white-space: nowrap; transition: background-color .15s ease; }
.button-primary { padding-inline: 34px; color: #fff; background: var(--blue); }
.button-primary:hover { background: #1d4ed8; }
.button-phone { color: var(--blue); background: #fff; }
.button-phone:hover { background: #eff6ff; }
.button .icon { font-size: 19px; }
.site-footer { padding: 64px 0 36px; background: var(--navy); color: #9fb3d1; }
.footer-main { display: flex; align-items: start; justify-content: space-between; gap: 56px; }
.footer-brand { max-width: 380px; }
.footer-brand .brand-name strong { color: #fff; font-size: 19px; line-height: 24px; }
.footer-brand .brand-name small { color: #6e8bb5; }
.footer-brand > p { margin-top: 20px; font-size: 14px; line-height: 24px; }
.footer-brand address { display: grid; gap: 12px; margin-top: 24px; color: #d6e4f7; font-size: 14px; line-height: 22px; font-style: normal; }
.footer-brand address > a, .footer-brand address > span { display: flex; gap: 10px; align-items: start; }
.footer-brand address .icon { color: #38bdf8; font-size: 17px; line-height: 22px; }
.footer-links { display: flex; gap: 64px; padding-right: 124px; }
.footer-links nav { display: flex; flex-direction: column; gap: 14px; min-width: 98px; }
.footer-links h3 { color: #fff; font-size: 15px; line-height: 21px; font-weight: 600; }
.footer-links a { font-size: 14px; line-height: 20px; }
.footer-links a:hover, .footer-bottom a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 34px; padding-top: 34px; border-top: 1px solid #1c3a61; color: #6e8bb5; font-size: 13px; line-height: 20px; }

@media (max-width: 1199px) {
  .about-layout { grid-template-columns: 36% minmax(0, 1fr); gap: 32px; }
  .industry-layout { grid-template-columns: 43% minmax(0, 1fr); gap: 32px; }
  .about-card { padding: 26px; gap: 16px; }
  .industry-upgrade { padding: 32px 24px; }
  .upgrade-grid { gap: 10px; }
  .upgrade-grid article { padding: 24px 14px; }
  .business-card { padding: 26px 20px; }
  .lifecycle-steps { gap: 36px; }
  .lifecycle-steps > li { padding: 24px 18px; }
  .lifecycle-steps > li:not(:last-child)::after { right: -32px; }
  .contact-card { padding-inline: 36px; }
  .contact-copy h2 { font-size: 28px; }
  .contact-actions { flex-direction: column; }
}

@media (max-width: 900px) {
  .section { padding-block: 64px; }
  .navigation { gap: 40px; }
  .hero { height: 580px; }
  .hero-content { width: min(720px, 100%); }
  h1 { font-size: 46px; line-height: 1.4; }
  h2 { font-size: 34px; line-height: 1.4; }
  .about-layout, .industry-layout { grid-template-columns: 1fr; gap: 32px; }
  .about-intro .section-description { min-height: 0; }
  .about-image { width: 100%; height: 260px; }
  .grid-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .belief-card, .product-card { padding: 28px 22px; }
  .belief-card h3, .product-card h3 { font-size: 18px; }
  .belief-statement { font-size: 15px; }
  .lifecycle-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 36px; }
  .lifecycle-steps > li:nth-child(2)::after { display: none; }
  .contact-card { flex-direction: column; align-items: start; padding-block: 40px; }
  .contact-copy { max-width: none; }
  .contact-actions { flex-direction: row; }
  .footer-links { padding-right: 0; gap: 32px; }
}

@media (max-width: 600px) {
  .container { width: calc(100% - 40px); }
  .navigation { min-height: 76px; grid-template-columns: 1fr auto; gap: 14px; }
  .navigation nav { display: none; }
  .brand { gap: 8px; }
  .brand-icon { width: 38px; height: 38px; border-radius: 11px; font-size: 22px; }
  .brand-name strong { font-size: 18px; line-height: 24px; }
  .brand-name small { font-size: 8px; line-height: 12px; }
  .header-phone { font-size: 12px; gap: 5px; }
  .hero { height: 500px; background-position: 60% center; }
  .hero-content { padding-bottom: 30px; }
  .hero-label { font-size: 11px; padding-inline: 12px; gap: 6px; }
  h1 { font-size: clamp(26px, 7vw, 40px); line-height: 1.5; margin-top: 24px; }
  .hero-description { margin-top: 20px; font-size: 14px; line-height: 26px; }
  .section { padding-block: 48px; }
  .eyebrow { font-size: 11px; gap: 7px; }
  .eyebrow::before, .centered .eyebrow::after { width: 22px; }
  .centered .eyebrow::after { margin-left: 0; }
  h2 { margin-top: 16px; font-size: 28px; line-height: 40px; }
  .section-description { font-size: 14px; line-height: 26px; }
  .about-image { height: 200px; margin-top: 24px; }
  .about-card { padding: 24px 20px; gap: 14px; }
  .about-card .icon-box { width: 40px; height: 40px; font-size: 22px; }
  .about-card p { font-size: 13px; line-height: 24px; }
  .grid-three { grid-template-columns: 1fr; gap: 20px; }
  .beliefs-grid, .product-grid, .business-grid, .customer-grid { margin-top: 32px; }
  .belief-card { min-height: 0; padding: 28px; }
  .belief-card h3 { margin-top: 20px; }
  .product-card { min-height: 0; padding: 28px; }
  .grid-four { gap: 14px; }
  .business-card { padding: 22px 16px; }
  .business-card h3 { font-size: 16px; }
  .business-card p { font-size: 12px; }
  .tags { gap: 6px; }
  .tags span { padding-inline: 8px; font-size: 11px; }
  .lifecycle-steps { grid-template-columns: 1fr; gap: 36px; margin-top: 32px; }
  .lifecycle-steps > li { padding: 24px; }
  .lifecycle-steps > li:not(:last-child)::after { display: block; top: auto; bottom: -30px; right: calc(50% - 13px); transform: rotate(90deg); }
  .lifecycle-steps p { min-height: 0; }
  .pain-points li { padding: 16px; gap: 10px; font-size: 12px; min-height: 66px; }
  .industry-upgrade { padding: 28px 20px; }
  .industry-upgrade > h3 { font-size: 20px; }
  .industry-upgrade > p { font-size: 13px; }
  .upgrade-grid { gap: 8px; margin-top: 24px; }
  .upgrade-grid article { padding: 20px 10px; min-height: 190px; }
  .upgrade-grid h4 { font-size: 15px; }
  .upgrade-grid p { font-size: 11px; }
  .customer-card { padding: 24px 14px; min-height: 225px; }
  .customer-card h3 { font-size: 15px; }
  .customer-card p { font-size: 12px; }
  .contact { padding-block: 48px; }
  .contact-card { padding: 32px 24px; gap: 24px; }
  .contact-copy h2 { font-size: 25px; line-height: 38px; }
  .contact-copy p { font-size: 13px; }
  .contact-actions { flex-direction: column; width: 100%; }
  .button { width: 100%; }
  .site-footer { padding-top: 40px; }
  .footer-main { flex-direction: column; gap: 32px; }
  .footer-brand { max-width: none; }
  .footer-links { gap: 56px; }
  .footer-bottom { flex-direction: column; align-items: start; gap: 12px; margin-top: 28px; padding-top: 24px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
}