@layer reset, base, layout, components, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, ul, ol, dl, dd { margin: 0; }
  button, input { font: inherit; }
  button, a, summary { -webkit-tap-highlight-color: transparent; }
  img, svg { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
  button { color: inherit; }
  ul, ol { padding: 0; list-style: none; }
  [hidden] { display: none !important; }
}

@layer base {
  :root { --paper: #f8f7f1; --ink: #193d34; --muted: #69766b; --line: #dce1d5; --green: #153e35; --lime: #d7ee9e; --sans: 'Inter', 'Noto Sans CJK TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif; }
  html { scroll-behavior: smooth; scroll-padding-top: 100px; }
  body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.85; -webkit-font-smoothing: antialiased; }
  ::selection { background: var(--lime); color: var(--green); }
  :focus-visible { outline: 3px solid #588b2b; outline-offset: 5px; border-radius: 3px; }
  h1, h2, h3, h4 { font-weight: 650; }
  h2 { font-size: clamp(32px, calc(3.4vw + 2px), 45px); line-height: 1.45; letter-spacing: -.035em; }
  .icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
  .svg-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
  .eyebrow { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 550; letter-spacing: .085em; }
  .status-dot, .live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #62854d; flex-shrink: 0; }
  .small-caps { font-size: 13px; letter-spacing: .1em; }
  .skip-link { position: fixed; top: -90px; left: 16px; z-index: 100; background: var(--green); color: white; padding: 10px 20px; }
  .skip-link:focus { top: 12px; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
}

@layer layout {
  .container { width: calc(100% - 40px); max-width: 1200px; margin-inline: auto; }
  .section { padding-block: 76px; }
  .section-topline { display: flex; justify-content: space-between; gap: 24px; padding-bottom: 21px; border-bottom: 1px solid var(--line); }
  .section-aside { font-size: 15px; color: var(--muted); }
  .section-heading { display: flex; flex-direction: column; gap: 24px; padding-block: 35px 42px; }
  .section-heading > p { color: var(--muted); font-size: 16px; line-height: 1.9; }
}

@layer components {
  .site-header { position: sticky; top: 0; z-index: 30; background: #f8f7f1f5; border-bottom: 1px solid #193d3410; backdrop-filter: blur(16px); }
  .header-inner { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
  .brand { display: inline-flex; align-items: center; gap: 10px; font-size: 26px; font-weight: 650; letter-spacing: -.065em; line-height: 1; min-height: 44px; }
  .brand-one { font-weight: 400; }
  .desktop-nav { display: none; gap: 35px; font-size: 15px; }
  .desktop-nav a { min-height: 44px; display: flex; align-items: center; transition: color .2s; }
  .desktop-nav a:hover { color: #65833a; }
  .header-contact { margin-left: auto; display: none; align-items: center; gap: 18px; font-size: 15px; border-bottom: 1px solid var(--green); min-height: 44px; }
  .header-contact .icon { width: 17px; height: 17px; }
  .mobile-nav { position: relative; }
  .mobile-nav summary { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; cursor: pointer; list-style: none; }
  .mobile-nav summary::-webkit-details-marker { display: none; }
  .mobile-nav summary span { height: 1.5px; width: 23px; margin-left: auto; background: var(--green); transition: transform .2s; }
  .mobile-nav[open] summary span:first-child { transform: translateY(3px) rotate(45deg); }
  .mobile-nav[open] summary span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .mobile-nav nav { position: absolute; right: 0; top: 54px; width: min(280px, calc(100vw - 40px)); padding: 15px 22px; background: var(--paper); box-shadow: 0 15px 30px #193d3415; border: 1px solid var(--line); border-radius: 10px; }
  .mobile-nav nav a { display: block; padding-block: 12px; font-size: 16px; }
  .mobile-nav nav a + a { border-top: 1px solid var(--line); }
  .hero { padding-block: 45px 38px; display: grid; gap: 38px; }
  .hero-copy { padding-block: 10px; }
  .hero-copy > .eyebrow { font-size: 13px; letter-spacing: .08em; }
  h1 { margin-top: 26px; font-size: clamp(32px, 4.2vw, 56px); line-height: 1.46; letter-spacing: -.055em; font-weight: 650; }
  .ai-word { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; font-size: 1.12em; line-height: .8; padding-right: .04em; }
  .hero-highlight { position: relative; display: inline-block; }
  .hero-highlight > svg { position: absolute; width: 104%; height: 20px; bottom: -8px; left: -2px; stroke: #aac78b; fill: none; stroke-width: 5; }
  .hero-description { color: #5d6d61; line-height: 2; margin-top: 30px; font-size: 14px; }
  .hero-actions { display: flex; align-items: center; gap: 23px; flex-wrap: wrap; margin-top: 30px; }
  .button { display: inline-flex; align-items: center; justify-content: space-between; gap: 33px; border-radius: 5px; padding: 15px 22px; min-height: 54px; font-size: 15px; font-weight: 500; transition: background .2s, transform .2s; }
  .button:hover { transform: translateY(-2px); }
  .button-dark { color: #fffef8; background: var(--green); }
  .button-dark:hover { background: #2a5948; }
  .button .icon { width: 18px; height: 18px; }
  .text-link { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; min-height: 44px; }
  .hero .button, .hero .text-link { font-size: 13px; }
  .text-link:hover .icon, .case-link:hover .icon { transform: translateX(3px); }
  .text-link .icon, .case-link .icon { transition: transform .2s; }
  .hero-footnote { display: flex; flex-direction: column; gap: 4px; margin-top: 34px; color: #5e6e54; font-size: 13px; }
  .hero-footnote > span:first-child { font-size: 13px; }
  .hero-art { height: 420px; overflow: hidden; position: relative; border-radius: 160px 160px 12px 12px; background: #e9ede1; isolation: isolate; }
  .art-grid { position: absolute; inset: 0; z-index: -1; opacity: .3; background-image: linear-gradient(#9eaf8c55 1px, transparent 1px), linear-gradient(90deg, #9eaf8c55 1px, transparent 1px); background-size: 36px 36px; mask-image: linear-gradient(0deg, transparent, black 20%, black 85%, transparent); }
  .art-coordinate { position: absolute; top: 29px; left: 0; right: 0; text-align: center; font-size: 13px; letter-spacing: .15em; color: #5e6e54; }
  .orbit { position: absolute; border: 1px solid #b7c7a5; border-radius: 50%; top: 48%; left: 50%; transform: translate(-50%, -50%); z-index: -1; }
  .orbit-one { width: 210px; height: 210px; }
  .orbit-two { width: 355px; height: 355px; border-style: dashed; opacity: .6; }
  .art-core { position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%); width: 138px; height: 138px; border-radius: 50%; background: var(--green); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--paper); box-shadow: 0 0 0 9px #e9ede1, 0 0 0 10px #c3cdb5, 0 15px 45px #153e351a; }
  .core-star { width: 24px; height: 24px; fill: var(--lime); margin-bottom: 5px; }
  .art-core strong { font-size: 25px; font-weight: 500; letter-spacing: -.05em; }
  .art-core > span { font-size: 13px; letter-spacing: .08em; opacity: .7; }
  .art-input { position: absolute; display: flex; align-items: center; gap: 9px; background: #fffef8; border: 1px solid #d5ddcd; box-shadow: 0 6px 18px #193d3409; border-radius: 6px; padding: 10px 12px; font-size: 13px; z-index: 1; }
  .art-input small { display: block; font-size: 13px; color: var(--muted); line-height: 1.6; }
  .input-photo { left: 5%; top: 95px; transform: rotate(-7deg); }
  .input-voice { right: 4%; top: 115px; transform: rotate(6deg); }
  .input-chat { left: 23%; top: 280px; transform: rotate(-3deg); }
  .input-glyph { color: #80985a; font-size: 27px; line-height: 1; }
  .input-plus { font-size: 15px; color: #95a787; padding-left: 5px; }
  .art-input > .icon { color: #738e52; width: 19px; }
  .wave-mini { font-size: 13px; letter-spacing: -2px; color: #87a356; }
  .chat-glyph { font-family: Georgia, serif; border: 1px solid #819d62; color: #819d62; font-size: 20px; padding: 0 4px; line-height: .9; border-radius: 4px; }
  .art-industries { position: absolute; left: 0; right: 0; bottom: 47px; display: flex; justify-content: center; gap: 8px; font-size: 13px; }
  .art-industries span { display: flex; align-items: center; gap: 5px; }
  .art-industries i { width: 4px; height: 4px; background: #70844b; border-radius: 50%; }
  .art-caption { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; color: #65725c; font-size: 13px; letter-spacing: .1em; }
  .art-cross { position: absolute; bottom: 13px; right: 15px; color: #7f9666; font-size: 23px; font-weight: 300; }
  .brand-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .brand-strip-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-block: 21px; }
  .brand-strip-inner > p { font-size: 15px; color: var(--muted); }
  .brand-strip-inner > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; width: 100%; max-width: 650px; }
  .brand-strip-inner > div > span { font-size: clamp(17px, calc(2vw + 2px), 23px); letter-spacing: -.03em; font-weight: 550; white-space: nowrap; }
  .brand-strip small { display: block; white-space: normal; font-size: 15px; font-weight: 400; letter-spacing: .02em; color: var(--muted); }
  .flow-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
  .flow-steps li { padding: 25px 12px 25px 0; position: relative; border-bottom: 1px solid var(--line); }
  .flow-steps li:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--line); }
  .step-index { position: absolute; top: 28px; right: 15px; font-size: 15px; color: #65725c; }
  .step-symbol { display: block; font-family: Georgia, serif; font-size: 32px; height: 42px; line-height: 1; position: relative; margin-bottom: 18px; }
  .step-symbol.icon { width: 31px; height: 42px; stroke-width: 1.1; }
  .symbol-dot { width: 6px; height: 6px; position: absolute; left: 35px; top: 0; border-radius: 50%; background: #9bba62; }
  .flow-steps h3 { font-size: 18px; margin-bottom: 8px; }
  .flow-steps p { font-size: 15px; line-height: 1.9; color: var(--muted); }
  .step-tag { display: block; font-size: 15px; color: #65725c; margin-top: 23px; }
  .cases-section { background: #efF0e8; }
  .cases-section .section-topline { border-color: #d5ddce; }
  .case { display: grid; gap: 30px; padding-block: 37px 45px; border-bottom: 1px solid #d5ddce; }
  .case + .case { padding-top: 50px; }
  .case-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
  .case-number { font-family: Georgia, serif; font-style: italic; font-size: 19px; color: #5e6e54; }
  .pill { display: inline-block; font-size: 15px; padding: 3px 10px; border: 1px solid #cbd6be; border-radius: 30px; color: #607450; }
  .case-brand { display: inline-flex; gap: 14px; align-items: center; font-size: 21px; font-weight: 600; letter-spacing: -.035em; }
  .case-brand > span { font-size: 16px; color: #87a16c; }
  .case-story h3 { font-size: clamp(28px, calc(2.8vw + 2px), 37px); line-height: 1.5; letter-spacing: -.035em; margin-top: 11px; }
  .case-description { font-size: 15px; line-height: 2; color: #65735f; margin-top: 19px; max-width: 370px; }
  .case-benefits { display: grid; gap: 7px; margin-top: 23px; font-size: 15px; color: #53624d; }
  .case-benefits li { padding-left: 17px; position: relative; }
  .case-benefits li::before { content: '↳'; position: absolute; left: 0; color: #829c63; }
  .case-link { display: inline-flex; align-items: center; gap: 19px; font-size: 15px; min-height: 44px; margin-top: 24px; border-bottom: 1px solid #9baa8c; }
  .case-link .icon { width: 16px; height: 16px; }
  .demo { min-width: 0; border: 1px solid #d2dbc9; background: #fafbf6; border-radius: 10px; overflow: hidden; align-self: center; box-shadow: 0 12px 30px #233f2d05; }
  .demo-top { padding: 16px 17px; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid #e2e6da; }
  .demo-top > span:first-child { font-size: 15px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
  .demo-label { font-size: 15px; color: #5e6e54; letter-spacing: .02em; }
  .demo-footer { border-top: 1px solid #e2e6da; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 7px; padding: 14px 10px; font-size: 15px; color: #5e6e54; background: #f7f9f1; }
  .demo-footer .icon { width: 13px; height: 13px; color: #a2b18f; }
  .wine-workspace { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 13px; padding: 18px 14px; }
  .wine-photo { background: #e9e9de; position: relative; min-height: 246px; border-radius: 5px; display: flex; justify-content: center; align-items: center; }
  .scan-corner { position: absolute; width: 17px; height: 17px; border: solid #8ba277; }
  .corner-tl { top: 12px; left: 12px; border-width: 1px 0 0 1px; }
  .corner-tr { top: 12px; right: 12px; border-width: 1px 1px 0 0; }
  .corner-bl { bottom: 29px; left: 12px; border-width: 0 0 1px 1px; }
  .corner-br { bottom: 29px; right: 12px; border-width: 0 1px 1px 0; }
  .photo-caption { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font-size: 15px; color: #5e6e54; letter-spacing: .12em; }
  .wine-bottle { width: 63px; height: 205px; position: relative; transform: rotate(-7deg); filter: drop-shadow(6px 6px 4px #25322020); }
  .bottle-neck { position: absolute; width: 24px; height: 65px; top: 0; left: 20px; border-radius: 4px 4px 0 0; background: linear-gradient(90deg,#1b3025,#3d4c37 50%,#172a20); }
  .bottle-neck::before { content: ''; position: absolute; left: -1px; top: 0; width: 26px; height: 36px; background: repeating-linear-gradient(0deg, #3c332e 0 1px, #453c35 1px 5px); border-radius: 3px; }
  .bottle-body { position: absolute; width: 63px; height: 159px; bottom: 0; border-radius: 28px 28px 7px 7px; background: linear-gradient(90deg,#1a2e21,#344932 30%,#3d5037 42%,#17291c 80%); border-bottom: 4px solid #1b2a1e; }
  .bottle-label { position: absolute; top: 50px; left: 3px; width: 57px; height: 79px; background: #f0ead8; color: #393a2c; text-align: center; padding: 7px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: Georgia, serif; }
  .bottle-label > span { font-size: 4px; letter-spacing: 1px; }
  .bottle-label > strong { font-size: 5px; letter-spacing: .3px; }
  .bottle-label > b { font-size: 13px; font-weight: 400; margin-top: 4px; }
  .bottle-label > svg { width: 37px; height: 24px; fill: none; stroke: #8e8973; stroke-width: .7; }
  .wine-result { padding: 6px 0; }
  .wine-price-workspace { padding: 22px 16px; }
  .price-query { margin-bottom: 18px; }
  .price-query > p { font-size: 15px; color: var(--muted); margin-top: 8px; }
  .price-card { background: #edf2e5; border: 1px solid #d5dfc9; border-radius: 6px; padding: 20px 18px; }
  .price-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
  .price-chip { font-size: 15px; color: #5e6e54; }
  .price-card h4 { font-size: 19px; margin-top: 17px; line-height: 1.5; }
  .price-vintage { font-size: 15px; color: var(--muted); margin-top: 3px; }
  .price-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
  .price-value > span { font-size: 17px; }
  .price-value strong { font-size: 36px; font-weight: 500; line-height: 1.3; font-variant-numeric: tabular-nums; }
  .price-value small { font-size: 15px; color: var(--muted); }
  .price-meta { margin-top: 19px; }
  .price-meta > div { display: grid; grid-template-columns: 5em minmax(0, 1fr); gap: 10px; padding-block: 9px; border-top: 1px solid #d5dfc9; font-size: 15px; }
  .price-meta dt { color: var(--muted); }
  .price-note { font-size: 15px; color: #5e6e54; margin-top: 14px; }
  .ai-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 500; color: #526b35; }
  .ai-badge .icon { width: 13px; height: 13px; }
  .wine-result dl { margin-top: 12px; }
  .wine-result dl > div { padding-block: 8px; border-bottom: 1px solid #e6e9df; }
  .wine-result dt { font-size: 15px; color: #65725c; }
  .wine-result dd { font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
  .review-status { display: flex; align-items: flex-start; gap: 4px; font-size: 15px; color: #5e6e54; margin-top: 14px; }
  .review-status .icon { width: 12px; height: 12px; margin-top: 2px; }
  .scenario-tabs { display: none; padding: 12px 14px 0; gap: 5px; flex-wrap: wrap; }
  .js .scenario-tabs { display: flex; }
  .js .hep-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scenario-tabs button { min-height: 44px; background: transparent; border: 1px solid transparent; padding: 7px 8px; border-radius: 5px; font-size: 15px; color: #5e6e54; cursor: pointer; transition: background .2s, color .2s; }
  .scenario-tabs button[aria-selected="true"] { background: #e4ecd8; color: #34582f; border-color: #d5dfc9; }
  .scenario-tabs button:hover { background: #edf1e5; }
  .line-chat { padding: 17px 16px 21px; min-height: 338px; }
  .chat-header { display: flex; align-items: center; gap: 9px; padding-bottom: 15px; }
  .agent-avatar { width: 32px; height: 32px; background: var(--green); color: #daeeaf; display: grid; place-items: center; border-radius: 9px; flex-shrink: 0; }
  .agent-avatar > .icon { width: 18px; height: 18px; stroke-width: 1.1; }
  .chat-header strong { font-size: 15px; font-weight: 550; }
  .chat-header > div > span { display: block; font-size: 15px; color: #65725c; }
  .line-word { margin-left: auto; font-size: 15px; font-weight: 700; color: #46803c; }
  .chat-conversation { padding: 14px; background: #eaf0e1; border-radius: 5px; display: flex; flex-direction: column; gap: 14px; }
  .user-message { padding: 10px 13px; align-self: flex-end; background: #d2e4b8; color: #365131; border-radius: 9px 2px 9px 9px; font-size: 15px; max-width: 90%; }
  .agent-message { width: 94%; background: #fffffa; border-radius: 2px 9px 9px 9px; padding: 13px; font-size: 15px; }
  .agent-message-label { display: flex; align-items: center; gap: 5px; font-size: 15px; color: #65725c; margin-bottom: 8px; }
  .agent-message-label > .icon { width: 12px; height: 12px; }
  .agent-message strong { font-size: 15px; font-weight: 550; }
  .chat-fields { margin-top: 8px; }
  .chat-fields > div { display: flex; justify-content: space-between; gap: 10px; padding-block: 4px; border-bottom: 1px solid #ebeee4; }
  .chat-fields dt { color: #65725c; }
  .chat-fields dd { text-align: right; }
  .chat-note { font-size: 15px; color: #65725c; margin-top: 9px; }
  .history-list { margin-top: 8px; }
  .history-list li { display: flex; justify-content: space-between; gap: 9px; padding-block: 6px; border-bottom: 1px solid #ebeee4; }
  .history-list span { color: #65725c; font-size: 15px; }
  .chat-stats { display: grid; grid-template-columns: 1fr 1fr; margin-top: 10px; gap: 8px; }
  .chat-stats > div { background: #f0f4e8; padding: 8px 10px; border-radius: 4px; }
  .chat-stats b { font-size: 22px; font-weight: 500; display: block; }
  .chat-stats span { font-size: 15px; color: #65725c; }
  .hep-workspace { min-height: 351px; padding: 16px; }
  .hep-input { border: 1px solid #e0e4d8; border-radius: 6px; padding: 15px; background: #f2f4eb; }
  .input-topline { display: flex; align-items: center; justify-content: space-between; color: #65725c; font-size: 15px; letter-spacing: .1em; }
  .input-topline .icon { width: 15px; height: 15px; }
  .hep-input > p { font-size: 15px; margin-top: 10px; line-height: 1.9; }
  .waveform { height: 31px; display: flex; align-items: center; gap: 3px; justify-content: center; margin-top: 9px; }
  .waveform > i { display: block; width: 3px; height: 9px; background: #a5ba81; border-radius: 2px; }
  .waveform > i:nth-child(3n) { height: 22px; background: #78995b; }
  .waveform > i:nth-child(4n) { height: 14px; }
  .waveform > i:nth-child(5n) { height: 29px; }
  .waveform > i:nth-child(7n) { height: 18px; }
  .input-note { display: block; font-size: 15px; color: #65725c; margin-top: 7px; }
  .hep-result { padding: 15px 15px 0; }
  .hep-result h4 { font-size: 17px; margin-top: 7px; }
  .exercise-metrics { display: flex; gap: 0; margin-top: 10px; }
  .exercise-metrics > div { display: flex; flex-direction: column; flex: 1; padding-left: 13px; border-left: 1px solid var(--line); }
  .exercise-metrics > div:first-child { padding-left: 0; border-left: 0; }
  .exercise-metrics strong { font-size: 26px; line-height: 1.2; font-weight: 450; font-variant-numeric: tabular-nums; }
  .exercise-metrics small { font-size: 15px; font-weight: 400; margin-left: 4px; color: #5e6e54; }
  .exercise-metrics span { font-size: 15px; color: #65725c; margin-top: 5px; }
  .result-note { font-size: 15px; color: #65725c; margin-top: 12px; }
  .hep-confirm { display: flex; align-items: flex-start; gap: 6px; margin-top: 14px; padding-top: 10px; border-top: 1px solid #e3e8d9; font-size: 15px; color: #5e6e54; }
  .hep-confirm .icon { width: 13px; height: 13px; margin-top: 2px; }
  .plan-preview { margin-top: 10px; border: 1px solid #dce4ce; border-radius: 4px; padding: 12px; background: #f4f7ee; }
  .plan-preview strong { font-size: 15px; }
  .plan-values { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
  .plan-values span { font-size: 15px; background: #e3ebd7; padding: 3px 8px; border-radius: 3px; }
  .reminder-transcript { font-size: 15px; line-height: 1.9; padding: 10px 0; }
  .reminder-original { display: flex; align-items: center; gap: 7px; color: #65725c; font-size: 15px; }
  .reminder-original::before { content: '♫'; font-size: 16px; color: #839f5e; }
  .goal-question { font-size: 15px; padding: 11px 0 5px; }
  .goal-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
  .goal-chips span { font-size: 15px; color: #5e6e54; border: 1px solid #d8e1ca; border-radius: 20px; padding: 3px 10px; }
  .demo-updated { animation: update-in .25s ease-out; }
  .cases-note { display: flex; align-items: flex-start; gap: 8px; color: #65725c; font-size: 15px; margin-top: 27px; }
  .cases-note .status-dot { width: 4px; height: 4px; margin-top: 8px; }
  .service-grid { display: grid; gap: 14px; }
  .service-card { border: 1px solid var(--line); border-radius: 7px; padding: 28px 24px; position: relative; }
  .service-featured { background: #edf1e4; border-color: #d1ddbe; }
  .service-icon { width: 33px; height: 33px; stroke-width: 1.1; margin-bottom: 29px; }
  .service-index { display: block; font-size: 15px; letter-spacing: .08em; color: #65725c; margin-bottom: 11px; }
  .service-card h3 { font-size: 21px; font-weight: 550; letter-spacing: -.03em; }
  .service-card > p { font-size: 15px; margin-top: 10px; }
  .service-detail { margin-top: 15px; font-size: 15px; line-height: 1.9; color: var(--muted); }
  .service-tags { display: block; margin-top: 26px; padding-top: 15px; border-top: 1px solid #dce2d0; font-size: 15px; color: #65725c; }
  .collaboration { background: var(--green); color: var(--paper); padding-block: 60px; }
  .collaboration-inner { display: grid; gap: 40px; }
  .collaboration .eyebrow { color: #b0c49d; font-size: 15px; }
  .collaboration h2 { font-size: clamp(30px, calc(2.6vw + 2px), 37px); margin-top: 24px; line-height: 1.6; }
  .collaboration-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
  .collaboration-steps li { display: flex; align-items: flex-start; gap: 12px; border-top: 1px solid #ffffff25; padding-top: 17px; }
  .collaboration-steps li > span { color: #b2c78d; font-family: Georgia, serif; font-size: 17px; font-style: italic; }
  .collaboration-steps h3 { font-size: 16px; font-weight: 500; }
  .collaboration-steps p { font-size: 15px; color: #adbdac; margin-top: 5px; line-height: 1.85; }
  .contact { position: relative; padding-block: 80px; text-align: center; }
  .contact .eyebrow { justify-content: center; font-size: 15px; color: #65725c; letter-spacing: .11em; }
  .contact h2 { margin-top: 22px; font-size: clamp(36px, calc(4vw + 2px), 51px); }
  .contact-description { font-size: 15px; color: var(--muted); line-height: 2; margin-top: 20px; }
  .contact-button { margin-top: 28px; min-width: 185px; }
  .contact-status { color: #65725c; font-size: 15px; margin-top: 16px; }
  .contact-decoration { display: none; position: absolute; top: 120px; left: 10%; width: 65px; transform: rotate(15deg); }
  .contact-decoration svg { fill: none; stroke: #b1c68c; stroke-width: 1; }
  .site-footer { border-top: 1px solid var(--line); }
  .footer-inner { padding-block: 25px; display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
  .footer-inner .brand { font-size: 22px; }
  .footer-tagline { font-size: 15px; color: #65725c; margin-left: 4px; }
  .back-to-top { font-size: 15px; margin-left: auto; min-height: 44px; display: flex; align-items: center; }
  .copyright { width: 100%; font-size: 15px; color: #65725c; }
  @keyframes update-in { from { opacity: .35; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
}

@layer responsive {
  @media (max-width: 479px) {
    .input-photo, .input-voice { top: 82px; width: 42%; padding: 9px 8px; gap: 7px; }
    .input-photo { left: 5%; }
    .input-voice { right: 5%; }
    .input-photo .input-plus, .input-voice .wave-mini { display: none; }
  }
  @media (min-width: 480px) {
    .js .hep-tabs { display: flex; }
    .container { width: calc(100% - 64px); }
    .header-contact { display: flex; }
    .hero-art { height: 470px; }
    .input-photo { top: 115px; left: 10%; }
    .input-voice { top: 130px; right: 7%; }
    .input-chat { top: 318px; left: 30%; }
    .art-input { padding: 12px 16px; font-size: 13px; }
    .art-input small { font-size: 13px; }
    .art-core { width: 156px; height: 156px; }
    .demo-top { flex-direction: row; align-items: center; justify-content: space-between; padding: 17px 22px; }
    .demo-top > span:first-child { font-size: 15px; }
    .demo-label { font-size: 15px; }
    .wine-workspace { padding: 24px; gap: 26px; }
    .wine-photo { min-height: 281px; }
    .wine-bottle { transform: rotate(-7deg) scale(1.1); }
    .wine-result { padding-block: 14px; }
    .wine-result dl > div { padding-block: 10px; }
    .wine-result dd { font-size: 15px; }
    .wine-result dt { font-size: 15px; }
    .review-status { font-size: 15px; }
    .line-chat { padding: 22px 24px 25px; }
    .scenario-tabs { padding: 15px 22px 0; }
    .scenario-tabs button { font-size: 15px; padding-inline: 14px; }
    .chat-header strong { font-size: 15px; }
    .chat-header > div > span { font-size: 15px; }
    .chat-conversation { padding: 20px; }
    .user-message { font-size: 15px; }
    .agent-message { font-size: 15px; padding: 16px; }
    .agent-message strong { font-size: 15px; }
    .hep-workspace { padding: 20px 24px; }
    .hep-input { padding: 17px 20px; }
    .hep-input > p { font-size: 15px; }
    .hep-result { padding: 17px 20px 0; }
    .demo-footer { font-size: 15px; gap: 11px; }
  }
  @media (min-width: 768px) {
    .section { padding-block: 95px; }
    .header-inner { height: 84px; }
    .hero { padding-top: 55px; }
    .hero-art { height: 490px; max-width: 600px; width: 100%; justify-self: center; }
    .hero-description { font-size: 15px; }
    .hero-footnote { flex-direction: row; gap: 18px; align-items: center; }
    .brand-strip-inner { flex-direction: row; justify-content: space-between; padding-block: 26px; gap: 30px; }
    .brand-strip-inner > p { max-width: 120px; flex-shrink: 0; }
    .brand-strip-inner > div { max-width: 660px; gap: 20px; }
    .brand-strip small { display: block; margin-left: 0; }
    .section-heading { flex-direction: row; align-items: flex-end; justify-content: space-between; padding-block: 39px 48px; gap: 40px; }
    .section-heading > p { font-size: 15px; }
    .flow-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .flow-steps li { border: none; padding: 30px 20px 0; }
    .flow-steps li:first-child { padding-left: 0; }
    .flow-steps li:nth-child(even) { padding: 30px 20px 0; }
    .flow-steps li + li { border-left: 1px solid var(--line); }
    .step-index { top: 30px; right: 17px; }
    .flow-steps h3 { font-size: 19px; }
    .flow-steps p { font-size: 15px; }
    .step-tag { font-size: 15px; }
    .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .service-card { padding: 29px 22px; display: flex; flex-direction: column; }
    .service-card h3 { font-size: 20px; }
    .service-card > p { min-height: 48px; font-size: 15px; }
    .service-tags { margin-top: auto; padding-top: 22px; font-size: 15px; }
    .service-detail { margin-bottom: 23px; font-size: 15px; }
    .collaboration { padding-block: 70px; }
    .collaboration-inner { grid-template-columns: 1fr 1.1fr; gap: 50px; align-items: center; }
    .collaboration-steps { gap: 25px; }
    .contact { padding-block: 100px; }
    .contact-decoration { display: block; }
    .copyright { width: auto; margin-left: 28px; }
  }
  @media (min-width: 1024px) {
    .container { width: calc(100% - 112px); }
    .desktop-nav { display: flex; margin-left: auto; }
    .header-contact { margin-left: 46px; }
    .mobile-nav { display: none; }
    .hero { grid-template-columns: 1.13fr 1fr; gap: 28px; padding-block: 64px 58px; align-items: center; }
    .hero-art { height: 488px; border-radius: 200px 200px 12px 12px; }
    .hero-copy { padding-block: 3px; }
    .hero-copy > .eyebrow { font-size: 13px; }
    h1 { margin-top: 28px; }
    .hero-description { font-size: 14px; margin-top: 30px; }
    .hero-actions { margin-top: 32px; }
    .hero-footnote { margin-top: 44px; flex-direction: column; align-items: flex-start; gap: 3px; }
    .input-photo { left: 4%; top: 124px; }
    .input-voice { right: 3%; top: 143px; }
    .input-chat { left: 32%; top: 325px; }
    .art-industries { bottom: 48px; gap: 22px; }
    .brand-strip-inner > p { max-width: none; }
    .brand-strip-inner > div { max-width: 720px; }
    .section-heading > p { font-size: 16px; }
    .case { grid-template-columns: .88fr 1.12fr; gap: 64px; padding-block: 38px 62px; }
    .case + .case { padding-top: 62px; }
    .case-meta { margin-bottom: 25px; }
    .case-description { font-size: 15px; }
    .case-benefits { font-size: 15px; }
    .case-story { align-self: center; padding-block: 12px; }
    .case-link { margin-top: 26px; }
    .wine-workspace { gap: 22px; padding: 24px; }
    .wine-photo { min-height: 290px; }
    .service-card { padding: 34px 29px; }
    .service-card h3 { font-size: 22px; }
    .service-card > p { font-size: 15px; }
    .service-tags { font-size: 15px; }
    .collaboration-inner { grid-template-columns: 1fr 1fr; gap: 100px; }
    .collaboration-steps { gap: 30px 35px; }
    .collaboration-steps h3 { font-size: 17px; }
    .collaboration-steps p { font-size: 15px; }
  }
  @media (min-width: 1280px) {
    .hero { gap: 47px; }
    .hero-art { height: 516px; }
    .hero-copy > .eyebrow { font-size: 13px; }
    .hero-description { font-size: 15px; }
    .hero-footnote { flex-direction: row; gap: 16px; align-items: center; }
    .input-photo { left: 7%; top: 132px; }
    .input-voice { right: 4%; top: 153px; }
    .input-chat { top: 345px; }
    .art-core { width: 168px; height: 168px; }
    .art-core strong { font-size: 29px; }
    .orbit-one { width: 255px; height: 255px; }
    .orbit-two { width: 415px; height: 415px; }
    .art-industries { bottom: 53px; font-size: 13px; gap: 30px; }
    .art-coordinate { top: 34px; }
    .flow-steps li { padding-inline: 30px; }
    .flow-steps li:nth-child(even) { padding-inline: 30px; }
    .flow-steps li:first-child { padding-left: 0; }
    .flow-steps h3 { font-size: 20px; }
    .flow-steps p { font-size: 15px; }
    .case { gap: 95px; }
    .case-benefits { font-size: 15px; }
    .wine-workspace { padding: 26px 30px; gap: 28px; }
    .demo-top { padding-inline: 26px; }
    .line-chat { padding-inline: 28px; }
    .case-description { max-width: 365px; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }
}