/* Presoft Marketing SOP — light mode only, Inter, SOP palette */
:root {
  --primary: #F2AA24;
  --primary-soft: #FBE3B5;
  --dark: #504538;
  --muted: #B7A99A;
  --green: #00D697;
  --red: #D90000;
  --bg: #F2F1EF;
  --card: #FFFFFF;
  --text: #2E2720;
  --sub: #6E6255;
  --line: rgba(80, 69, 56, .18);
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth }
body {
  font-family: 'Inter', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden
}
h1, h2, h3 { line-height: 1.15; color: var(--dark); letter-spacing: -.01em }
img { max-width: 100% }
.container { width: min(1120px, 92%); margin: 0 auto }
.narrow { max-width: 760px; text-align: center }
.center { text-align: center }
.ico { font-size: 1.05em; line-height: 1 }

/* ---------- Header ---------- */
.navbar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  transition: background .3s, box-shadow .3s
}
.navbar.scrolled { background: rgba(255, 255, 255, .95); box-shadow: 0 2px 16px rgba(80, 69, 56, .08); backdrop-filter: blur(12px) }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px }
.brand img { height: 36px; display: block }
.nav-links { display: flex; gap: 28px; font-weight: 600; font-size: .95rem }
.nav-links a { color: var(--dark); text-decoration: none }
.nav-links a:hover { color: var(--primary) }
.nav-tools { display: flex; align-items: center; gap: 10px }
.lang { display: flex; border: 1px solid var(--line); border-radius: 99px; overflow: hidden; background: #fff }
.lang-btn {
  background: none; border: 0; color: var(--dark); cursor: pointer;
  font: 600 .82rem 'Inter', sans-serif; min-width: 48px; min-height: 40px; padding: 0 10px
}
.lang-btn.active { background: var(--primary); color: #fff }
.burger {
  display: none; background: none; border: 0; min-width: 44px; min-height: 44px; cursor: pointer;
  flex-direction: column; justify-content: center; gap: 5px; align-items: center
}
.burger span { width: 22px; height: 2px; background: var(--dark) }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px; min-height: 52px; border-radius: 10px;
  font-weight: 700; font-size: 1.02rem; text-decoration: none;
  transition: transform .2s, box-shadow .2s
}
.btn:hover { transform: translateY(-3px) }
.btn-wa { background: var(--green); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .25); box-shadow: 0 8px 24px rgba(0, 214, 151, .35); animation: pulse 2.4s infinite }
.btn-big { font-size: 1.2rem; padding: 18px 40px; min-height: 60px }
.wa-ico { width: 22px; height: 22px }
@keyframes pulse { 50% { box-shadow: 0 8px 34px rgba(0, 214, 151, .6) } }

/* ---------- Hero ---------- */
.hero {
  position: relative; padding: 130px 0 90px;
  background-color: var(--bg);
  background-image:
    linear-gradient(to bottom, transparent 75%, var(--bg) 100%),
    linear-gradient(100deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .9) 50%, rgba(255, 255, 255, .86) 100%),
    url('./asset/AIOCR_background.jpg');
  background-size: cover; background-position: center
}
.hero-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center }
.kicker {
  display: inline-block; font-weight: 700; font-size: .78rem; letter-spacing: .12em;
  color: var(--dark); background: var(--primary-soft); border: 1px solid var(--primary);
  padding: 6px 14px; border-radius: 99px; margin-bottom: 18px
}
h1 { font-size: clamp(2.1rem, 5.4vw, 3.9rem); font-weight: 800 }
.hero-pills { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 30px }
.hero-pills li {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 99px;
  padding: 8px 16px; font-weight: 600; color: var(--dark); font-size: .92rem
}

/* Screenshot windows */
.win {
  margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; box-shadow: 0 18px 40px rgba(80, 69, 56, .16)
}
.win-bar {
  display: flex; align-items: center; gap: 6px; padding: 8px 12px;
  background: var(--dark); color: #fff; font-size: .74rem; font-weight: 500
}
.win-bar i { width: 10px; height: 10px; border-radius: 50% }
.win-bar i:nth-child(1) { background: var(--red) }
.win-bar i:nth-child(2) { background: var(--primary) }
.win-bar i:nth-child(3) { background: var(--green) }
.win-bar span { margin-left: 8px; opacity: .9 }
.win img { display: block; width: 100%; height: auto; cursor: zoom-in; background: #fff }
.shot-stack { position: relative; padding-bottom: 70px }
.shot-stack .win-main { transform: rotate(1.2deg) }
.shot-stack .win-second { position: absolute; width: 50%; left: -6%; bottom: 0; transform: rotate(-3deg) }
.stamp {
  position: absolute; right: 4%; bottom: 12px;
  border: 3px solid var(--red); color: var(--red); padding: 4px 14px;
  font-weight: 800; font-size: 1.3rem; letter-spacing: .06em;
  transform: rotate(-14deg) scale(0); opacity: .9;
  animation: stamp .5s 1s forwards cubic-bezier(.3, 1.6, .5, 1); background: rgba(255, 255, 255, .8)
}
@keyframes stamp { to { transform: rotate(-14deg) scale(1) } }

/* ---------- Sections ---------- */
.section { padding: 90px 0 }
.section.alt { background: #fff }
h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 800; margin-bottom: 40px }
h3 { font-size: 1.2rem; font-weight: 700 }

.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px }
.pain-card {
  background: var(--bg); border: 1px solid var(--line); border-radius: 14px;
  padding: 30px 16px; text-align: center; transition: transform .25s, box-shadow .25s
}
.pain-card:hover { transform: translateY(-6px); box-shadow: 0 12px 28px rgba(80, 69, 56, .12) }
.pain-card svg { width: 64px; height: 64px; color: var(--red); margin-bottom: 14px }

/* Flow */
.flow { display: flex; align-items: stretch; justify-content: center; gap: 18px; margin-bottom: 48px }
.flow-node {
  position: relative; flex: 1; max-width: 240px; background: var(--card);
  border: 2px solid var(--primary); border-radius: 14px; padding: 28px 14px 22px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center
}
.flow-node .step {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: #fff;
  display: grid; place-items: center; font-weight: 800
}
.flow-node svg { width: 64px; height: 64px; color: var(--primary) }
.flow-node b { color: var(--dark) }
.flow-node small { font-size: .74rem; color: var(--sub) }
.flow-arrow { align-self: center; font-size: 2rem; color: var(--primary) }
.scan { animation: scan 2.4s ease-in-out infinite; color: var(--green) }
@keyframes scan { 0%, 100% { transform: translateY(-14px) } 50% { transform: translateY(14px) } }

/* Chart */
.chart-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 24px 24px 14px; max-width: 760px; margin: 0 auto; position: relative
}
.chart-card figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-bottom: 8px }
.chart-card figcaption b { color: var(--dark) }
.legend { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--sub) }
.legend i { width: 18px; height: 4px; border-radius: 2px; display: inline-block }
.legend .lg-ocr { margin-left: 10px }
.lg-manual { background: var(--red) }
.lg-ocr { background: var(--green) }
.chart { width: 100%; height: auto; display: block }
.chart .grid line { stroke: var(--line); stroke-dasharray: 4 6 }
.chart .axis { stroke: var(--muted); stroke-width: 2 }
.chart .area-manual { fill: rgba(217, 0, 0, .07) }
.chart .line-manual, .chart .line-ocr { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round }
.chart .line-manual { stroke: var(--red) }
.chart .line-ocr { stroke: var(--green) }
.chart .dot-manual { fill: var(--red) }
.chart .dot-ocr { fill: var(--green) }
.chart .ax-label { fill: var(--sub); font: 500 13px 'Inter', sans-serif }
.chart-card .note { position: absolute; right: 18px; bottom: 10px; font-size: .7rem; color: var(--muted) }
.chart-card.visible .line-manual, .chart-card.visible .line-ocr { stroke-dasharray: 700; stroke-dashoffset: 700; animation: draw 1.6s .2s forwards ease-out }
@keyframes draw { to { stroke-dashoffset: 0 } }

/* Video */
.video-frame {
  position: relative; aspect-ratio: 16 / 9; max-width: 900px; margin: 0 auto;
  border-radius: 16px; overflow: hidden; background: var(--dark);
  box-shadow: 0 18px 40px rgba(80, 69, 56, .2)
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 }
.video-placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  color: #fff; text-align: center;
  background:
    linear-gradient(rgba(80, 69, 56, .82), rgba(80, 69, 56, .82)),
    url('./asset/AIOCR_background.jpg') center / cover
}
.video-placeholder .play {
  width: 84px; height: 84px; border-radius: 50%; background: var(--primary);
  display: grid; place-items: center; box-shadow: 0 0 0 12px rgba(242, 170, 36, .25)
}
.video-placeholder .play svg { width: 40px; height: 40px; color: #fff; margin-left: 4px }
.video-placeholder b { font-size: 1.15rem }

/* Feature rows */
.feat-row { display: grid; grid-template-columns: 1.35fr .65fr; gap: 56px; align-items: center; margin: 0 0 80px }
.feat-row:last-child { margin-bottom: 0 }
.feat-row.rev { grid-template-columns: .65fr 1.35fr }
.feat-row.rev .win { order: 2 }
.num { font-weight: 800; font-size: 2.2rem; color: var(--primary); line-height: 1 }
.feat-text h3 { font-size: clamp(1.35rem, 2.6vw, 1.9rem); font-weight: 800; margin: 10px 0 18px }
.chips { display: flex; flex-wrap: wrap; gap: 8px }
.chips span {
  font-size: .78rem; font-weight: 600; background: var(--primary-soft); color: var(--dark);
  padding: 6px 12px; border-radius: 99px
}

/* Marquee */
.marquee { overflow: hidden; padding: 18px 0; background: var(--primary) }
.marquee-track { display: flex; gap: 14px; width: max-content; animation: scroll 45s linear infinite }
.marquee:hover .marquee-track { animation-play-state: paused }
.marquee-track span {
  font-size: .85rem; font-weight: 600; white-space: nowrap;
  background: var(--dark); color: #fff; padding: 6px 14px; border-radius: 6px
}
@keyframes scroll { to { transform: translateX(-50%) } }

/* Mapping diagram */
.map { display: grid; gap: 18px; max-width: 980px; margin: 0 auto }
.map-row { display: grid; grid-template-columns: 1fr 50px 1.1fr 50px 1fr; align-items: center }
.map-box {
  border-radius: 12px; padding: 18px 14px; text-align: center; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 66px
}
.map-box.src { background: #fff; border: 1px solid var(--line); color: var(--dark) }
.map-box.tool { background: var(--dark); color: #fff }
.map-box.out { background: var(--green); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .2) }
.map-line { height: 3px; background: var(--primary); position: relative }
.map-line::after {
  content: ''; position: absolute; right: -2px; top: 50%; transform: translateY(-50%);
  border: 7px solid transparent; border-left: 10px solid var(--primary); border-right: 0
}

/* Contact */
.cta { background: linear-gradient(135deg, var(--primary-soft), #fff 70%) }
.contact-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 28px; margin-top: 28px }
.contact-list a {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--dark);
  text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 10px 18px
}
.contact-list a:hover { border-color: var(--primary) }

/* Footer */
.footer { text-align: center; padding: 40px 4%; border-top: 1px solid var(--line); color: var(--sub); font-size: .85rem; background: #fff }
.footer img { height: 40px; margin-bottom: 12px }

/* WhatsApp bubble */
.wa-bubble {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 60px; height: 60px; border-radius: 50%; background: var(--green); color: #fff;
  display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
  transition: transform .2s
}
.wa-bubble:hover { transform: scale(1.08) }
.wa-bubble svg { width: 32px; height: 32px }

/* Lightbox */
.lb { position: fixed; inset: 0; background: rgba(0, 0, 0, .85); display: none; align-items: center; justify-content: center; z-index: 100; cursor: zoom-out }
.lb.open { display: flex }
.lb img { max-width: 92vw; max-height: 88vh; border-radius: 8px; background: #fff }

/* Fade-in */
.fade-up { opacity: 0; transform: translateY(24px); transition: opacity .5s ease, transform .5s ease }
.fade-up.visible { opacity: 1; transform: none }

/* ---------- Responsive ---------- */
@media (max-width:1024px) { .grid4 { grid-template-columns: repeat(2, 1fr) } }

@media (max-width:768px) {
  .hero { padding: 108px 0 64px }
  .hero-grid, .feat-row, .feat-row.rev { grid-template-columns: 1fr; gap: 30px }
  .feat-row.rev .win { order: 0 }
  .feat-row { margin-bottom: 60px }
  .shot-stack .win-second { width: 56%; left: 0 }
  .burger { display: flex }
  .nav-links {
    position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line); display: none
  }
  .nav-links.open { display: flex }
  .nav-links a { padding: 14px 4%; min-height: 48px }
  .section { padding: 64px 0 }
  .flow { flex-direction: column; align-items: center; gap: 26px }
  .flow-node { max-width: none; width: 100% }
  .flow-arrow { transform: rotate(90deg) }
  .map-row { grid-template-columns: 1fr; gap: 0 }
  .map-line { width: 3px; height: 26px; justify-self: center }
  .map-line::after { right: auto; left: 50%; top: auto; bottom: -8px; transform: translateX(-50%); border: 7px solid transparent; border-top: 10px solid var(--primary); border-bottom: 0 }
}

@media (max-width:480px) {
  .grid4 { grid-template-columns: 1fr 1fr; gap: 12px }
  .pain-card { padding: 22px 10px }
  .pain-card svg { width: 48px; height: 48px }
  .btn { width: 100% }
  .wa-bubble { width: 54px; height: 54px; right: 16px; bottom: 16px }
}

@media (prefers-reduced-motion:reduce) {
  .marquee-track, .btn-wa, .scan, .stamp { animation: none }
  .stamp { transform: rotate(-14deg) }
}