:root {
  --ink: #172b3d;
  --muted: #6c8190;
  --line: #dce9f1;
  --shell: 1160px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
.home-body { margin: 0; padding-top: 0; color: var(--ink); background: #fff; font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif; }
.shell { width: min(var(--shell), calc(100% - 40px)); margin-inline: auto; }
.screen { width: 100%; }
.hero { position: relative; overflow: hidden; padding: 92px 0 108px; background: radial-gradient(circle at 9% 26%,rgba(243,196,97,.12) 0 26px,transparent 27px),radial-gradient(circle at 90% 76%,rgba(222,128,109,.07) 0 52px,transparent 53px),linear-gradient(138deg,#fff9f1 0%,#f4fafd 55%,#eaf8f6 100%); }
.hero:before { position: absolute; top: -360px; right: -145px; width: 680px; height: 680px; border: 1px solid rgba(81,164,197,.14); border-radius: 50%; box-shadow: 0 0 0 58px rgba(105,186,215,.05),0 0 0 116px rgba(242,188,101,.055); content: ""; pointer-events: none; }
.hero:after { position: absolute; right: 0; bottom: 0; left: 0; height: 95px; background: url("../../img/home/home-section-curve.svg") center bottom/100% 100% no-repeat; content: ""; pointer-events: none; }
.hero>.shell { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 390px minmax(0, 1fr); align-items: center; gap: 38px; }
.brand-line { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; row-gap: 3px; margin-bottom: 48px; }
.brand { display: flex; align-items: center; gap: 12px; color: #111827; text-decoration: none; }
.brand:hover,.brand:focus { color: #111827; text-decoration: none; }
.brand img { width: 54px; height: 54px; object-fit: contain; }
.brand span { font-size: 25px; font-weight: 800; letter-spacing: .04em; }
.brand-slogan { color: #64798b; font-size: 15px; line-height: 1.5; }
.hero h1 { margin: 0; color: #111827; font-size: 43px; line-height: 1.24; letter-spacing: -.03em; }
.hero h1:after { display: block; width: 65px; height: 4px; margin-top: 19px; border-radius: 3px; background: #ff8b38; content: ""; }
.lead { max-width: 390px; margin: 20px 0 0; color: #637b8b; font-size: 16px; line-height: 1.85; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 27px; }
.hero-benefits { display: flex; gap: 38px; width: 390px; margin-top: 38px; }
.hero-benefits>div { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; color: #587286; font-size: 12px; line-height: 1.55; white-space: nowrap; }
.hero-benefits .fa { color: #168ee0; font-size: 26px; }

/* The browser stays a PNG; the result is a pixel-accurate crop revealed after recognition. */
.recognition-demo { position: relative; isolation: isolate; width: 100%; margin: 30px 0 0; aspect-ratio: 1762 / 892; }
.browser-base { display: block; width: 100%; height: auto; border-radius: 15px; box-shadow: 0 18px 38px rgba(0,0,0,.09), 0 3px 10px rgba(0,0,0,.04); }
.animated-crop { position: absolute; z-index: 2; top: 33.5%; left: 17%; width: 0; height: 0; border: 2px dashed #1397e4; border-radius: 3px; opacity: 0; pointer-events: none; animation: cropDraw 7.2s linear infinite; }
.crop-cursor { position: absolute; z-index: 4; top: 33.5%; left: 17%; color: #273b50; font-size: 12px; filter: drop-shadow(1px 2px 1px #fff); opacity: 0; pointer-events: none; animation: cropCursorTrack 7.2s linear infinite; }
.recognizing-prompt,.recognizing-dots { position: absolute; z-index: 3; top: calc(54% + 10px); left: 75.5%; display: flex; align-items: center; justify-content: center; transform: translate(-50%,-50%); pointer-events: none; }
.recognizing-prompt { gap: 1px; color: #718296; font-size: clamp(10px,1.1vw,14px); font-weight: 600; white-space: nowrap; opacity: 0; animation: promptVisible 7.2s linear infinite; }
.recognizing-prompt i { display: inline-block; font-style: normal; animation: promptWave .8s ease-in-out infinite; }
.recognizing-prompt i:nth-child(2) { animation-delay: .1s; }
.recognizing-prompt i:nth-child(3) { animation-delay: .2s; }
.recognizing-prompt i:nth-child(4) { animation-delay: .3s; }
.recognizing-prompt i:nth-child(5) { animation-delay: .4s; }
.recognizing-dots { gap: 5px; opacity: 0; animation: dotsVisible 7.2s linear infinite; }
.recognizing-dots i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #9aa5af; animation: dotBounce .7s ease-in-out infinite alternate; }
.recognizing-dots i:nth-child(2) { animation-delay: .14s; }
.recognizing-dots i:nth-child(3) { animation-delay: .28s; }
.result-panel-image { position: absolute; z-index: 2; top: 27.58%; left: 53.52%; width: 44.27%; height: 69.39%; object-fit: fill; opacity: 0; pointer-events: none; animation: resultReveal 7.2s linear infinite; }
.recognition-bubble,.added-bubble { position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 5px; padding: 7px 9px; border-radius: 7px; color: #247d4d; background: #e7f9e9; box-shadow: 0 8px 15px rgba(66,126,77,.1); font-size: 12px; font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; }
.recognition-bubble { top: 20%; right: -1%; animation: recognitionBubbleRise 7.2s linear infinite; }
.added-bubble { right: -1%; bottom: 19%; animation: addedRise 7.2s linear infinite; }
.demo-button-press { position: absolute; z-index: 4; right: 3.3%; bottom: 6.1%; width: 9.9%; height: 7.6%; border-radius: 5px; background: rgba(9,43,107,.2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); opacity: 0; pointer-events: none; animation: buttonPress 7.2s linear infinite; }
.demo-cursor { position: absolute; z-index: 6; right: 8%; bottom: 9%; color: #273b50; font-size: 12px; filter: drop-shadow(1px 2px 1px #fff); opacity: 0; pointer-events: none; animation: cursorClick 7.2s linear infinite; }
@keyframes cropDraw { 0%,10% { width: 0; height: 0; opacity: 0; } 13% { opacity: 1; } 26%,88% { width: 35%; height: 44%; opacity: 1; } 96%,100% { width: 35%; height: 44%; opacity: 0; } }
@keyframes cropCursorTrack { 0%,10% { left: 17%; top: 33.5%; opacity: 0; } 13% { opacity: 1; } 26%,46% { left: 52%; top: 77.5%; opacity: 1; } 50%,100% { left: 52%; top: 77.5%; opacity: 0; } }
@keyframes promptVisible { 0%,9.9%,26.1%,100% { opacity: 0; } 10%,26% { opacity: 1; } }
@keyframes promptWave { 0%,70%,100% { transform: translateY(0); } 35% { transform: translateY(-5px); } }
@keyframes dotsVisible { 0%,25.9%,33.04%,100% { opacity: 0; } 26%,32.94% { opacity: 1; } }
@keyframes dotBounce { from { transform: translateY(0); } to { transform: translateY(-4px); } }
@keyframes resultReveal { 0%,32.94% { opacity: 0; transform: translateY(6px); } 40%,90% { opacity: 1; transform: translateY(0); } 97%,100% { opacity: 0; } }
@keyframes recognitionBubbleRise { 0%,40% { opacity: 0; transform: translateY(10px); } 47%,82% { opacity: 1; transform: translateY(0); } 95%,100% { opacity: 0; } }
@keyframes buttonPress { 0%,64%,72%,100% { opacity: 0; } 66%,69% { opacity: 1; } }
@keyframes cursorClick { 0%,53% { opacity: 0; transform: translate(-40px,-28px); } 58% { opacity: 1; } 64% { opacity: 1; transform: translate(0,0); } 67% { opacity: 1; transform: scale(.8); } 71%,100% { opacity: 0; transform: scale(1); } }
@keyframes addedRise { 0%,69% { opacity: 0; transform: translateY(10px); } 75%,90% { opacity: 1; transform: translateY(0); } 97%,100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .animated-crop,.result-panel-image,.added-bubble { animation: none; opacity: 1; } .animated-crop { width: 35%; height: 44%; } .crop-cursor,.recognizing-prompt,.recognizing-dots,.recognition-bubble,.demo-button-press,.demo-cursor { display: none; } }

.workflow { padding: 86px 0 96px; background: #fffdf9; }
.section-heading { text-align: center; }
.section-heading h2 { margin: 0; color: #111; font-size: 31px; line-height: 1.35; }
.section-heading p { margin: 13px 0 0; color: #728699; font-size: 15px; }
.steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 15px; margin-top: 39px; }
.step { min-height: 290px; padding: 18px 16px 16px; border: 1px solid #d9e8f2; border-radius: 11px; background: #fff; box-shadow: 0 7px 20px rgba(41,101,145,.035); }
.step-head { display: flex; align-items: center; gap: 9px; }
.step-head h3 { margin: 0; font-size: 17px; }
.step-no { display: grid; flex: 0 0 35px; width: 35px; height: 35px; place-items: center; border-radius: 50%; color: #fff; font-size: 15px; }
.step-no.blue { background: #3294df; } .step-no.orange { background: #ec9a64; } .step-no.green { background: #78b99a; } .step-no.slate { background: #7589a8; }
.step>p { min-height: 60px; margin: 11px 0 13px; color: #657c8e; font-size: 12px; line-height: 1.65; }
.step-preview { display: block; width: 100%; height: 130px; border: 1px solid #e3eef4; border-radius: 8px; background: #fff; object-fit: contain; }
.library { padding: 86px 0 96px; background: #f7fafc; }
.feature-grid { display: grid; grid-template-columns: minmax(0,1.58fr) minmax(0,1fr); gap: 22px; align-items: stretch; height: 540px; margin-top: 39px; }
.question-panel { display: block; width: 100%; height: 100%; min-width: 0; border: 1px solid #dae8f0; border-radius: 11px; background: #fff; box-shadow: 0 9px 22px rgba(47,102,151,.06); object-fit: contain; }
.feature-side { display: grid; grid-template-rows: 1fr 1fr; gap: 18px; }
.feature-card { min-height: 0; padding: 17px; border-radius: 10px; }
.knowledge { background: #f1f9f2; } .compose { background: #fff5ee; }
.feature-intro { display: flex; gap: 12px; align-items: flex-start; }
.feature-intro>.fa { font-size: 25px; }
.knowledge .feature-intro>.fa { color: #52a877; } .compose .feature-intro>.fa { color: #ec884a; }
.feature-intro h3 { margin: 0; color: #18332b; font-size: 15px; }
.feature-intro p { margin: 7px 0 0; color: #708277; font-size: 12px; line-height: 1.6; }
.feature-card>img { display: block; width: 100%; max-height: 150px; margin-top: 14px; border-radius: 5px; background: #fff; object-fit: contain; }
.pillars { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; max-width: 1050px; margin: 0 auto 55px; text-align: left; }
.pillars>div { display: flex; align-items: center; gap: 13px; }
.pillars .fa { display: grid; flex: 0 0 55px; width: 55px; height: 55px; place-items: center; border-radius: 50%; background: #edf8ff; color: #278dd0; font-size: 24px; }
.pillars>div:nth-child(2) .fa { background: #eef9f1; color: #63b686; }
.pillars>div:nth-child(3) .fa { background: #fff3ea; color: #e8843a; }
.pillars>div:nth-child(4) .fa { background: #eef9f1; color: #5cab83; }
.pillars h3 { margin: 0 0 4px; font-size: 15px; }
.pillars p { margin: 0; color: #72889b; font-size: 12px; line-height: 1.55; }
.closing { padding: 105px 0 105px; background: #fff; }
.closing .shell { position: relative; }
.closing-content { position: relative; z-index: 1; width: min(920px,calc(100% - 210px)); margin-inline: auto; }
.closing-cta { text-align: center; }
.closing h2 { margin: 0; color: #111; font-size: 30px; }
.closing-cta p { margin: 13px 0 23px; color: #74899c; font-size: 15px; }
.closing-corner { position: absolute; width: 60px; height: 64px; object-fit: contain; pointer-events: none; }
.left-corner { left: -45px; top: -34px; transform: rotate(90deg); }
.right-corner { right: -45px; bottom: -24px; transform: rotate(-90deg); }
.home-footer { border-top: 1px solid #e6e8ea; background: #f4f5f6; }
.home-footer-main { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 86px; }
.home-footer-brand { display: flex; align-items: center; gap: 9px; }
.home-footer-brand img { width: 37px; height: 37px; }
.home-footer-brand strong { font-size: 17px; }
.home-footer-brand span { margin-left: 14px; color: #8394a1; font-size: 12px; }
.home-footer nav { display: flex; gap: 24px; }
.home-footer a { color: #708498; font-size: 12px; text-decoration: none; }
.home-footer a:hover { color: #168ee0; }
.home-footer-meta { padding: 0 0 18px; color: #8394a1; font-size: 12px; text-align: center; }
@media (max-width: 850px) {
  .hero-grid { grid-template-columns: 1fr; }
  .recognition-demo { max-width: 650px; }
  .hero-benefits { width: min(100%,480px); }
  .steps { grid-template-columns: repeat(2,1fr); }
  .feature-grid { grid-template-columns: 1fr; height: auto; }
  .feature-side { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .pillars { grid-template-columns: repeat(2,minmax(0,1fr)); max-width: 620px; }
  .closing-content { width: calc(100% - 180px); }
  .left-corner { left: -30px; }
  .right-corner { right: -30px; }
}
@media (max-width: 580px) {
  .shell { width: calc(100% - 30px); }
  .hero { padding: 52px 0 65px; } .brand-line { flex-wrap: nowrap; column-gap: 8px; margin-bottom: 30px; } .hero h1 { font-size: 34px; }
  .brand { min-width: 0; gap: 8px; }
  .brand img { flex: 0 0 40px; width: 40px; height: 40px; }
  .brand span { min-width: 0; overflow: hidden; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
  .brand-slogan { flex: 0 1 auto; min-width: 0; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
  .hero-benefits { gap: 13px; flex-wrap: wrap; } .hero-benefits>div { flex: 1 1 42%; }
  .workflow,.library { padding: 66px 0; } .section-heading h2 { font-size: 25px; }
  .steps { grid-template-columns: 1fr 1fr; gap: 10px; }
  .step { padding: 14px 10px; min-height: 276px; } .step-head { gap: 5px; } .step-head h3 { font-size: 14px; } .step>p { font-size: 12px; }
  .feature-side { grid-template-columns: 1fr; }
  .question-panel { height: auto; }
  .pillars { grid-template-columns: 1fr; }
  .closing-content { width: calc(100% - 120px); }
  .left-corner { left: -16px; }
  .right-corner { right: -16px; }
  .home-footer-main { flex-direction: column; gap: 14px; padding: 20px 0; } .home-footer-brand span { display: none; }
}