:root { --cream:#f4efe5; --ink:#171713; --orange:#ef6a24; --red:#b33422; --line:rgba(23,23,19,.16); --pad:clamp(1.25rem,4vw,4.5rem); --sans:"Avenir Next",Avenir,"Helvetica Neue",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:var(--sans); overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.site-header { height:80px; padding:0 var(--pad); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); position:absolute; z-index:20; width:100%; }
.brand { display:flex; align-items:center; gap:.7rem; font:700 1.05rem var(--sans); letter-spacing:-.04em; }
.brand-logo { width:2.5rem; height:2.5rem; object-fit:contain; flex:0 0 auto; }
.footer-brand .brand-logo { width:2.8rem; height:2.8rem; }
nav { display:flex; align-items:center; gap:1.8rem; margin-left:auto; margin-right:1.5rem; font-size:.8rem; font-weight:500; }
nav a:not(.nav-cta) { position:relative; }
nav a:not(.nav-cta)::after { content:""; position:absolute; left:0; bottom:-6px; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:.3s; }
nav a:hover::after { transform:scaleX(1); transform-origin:left; }
.nav-cta { padding:.7rem 1rem; border:1px solid var(--ink); border-radius:100px; transition:.25s; }
.nav-cta:hover { background:var(--ink); color:var(--cream); }
.header-actions { display:flex; align-items:center; gap:.65rem; }
.language-switcher { height:34px; display:flex; align-items:center; gap:.15rem; padding:.2rem; border:1px solid var(--line); border-radius:100px; background:rgba(255,255,255,.28); }
.language-switcher>span { width:1px; height:12px; background:var(--line); }
.language-option { min-width:32px; height:26px; padding:0 .45rem; border:0; border-radius:100px; background:transparent; color:#777269; font:600 .65rem var(--sans); letter-spacing:.04em; cursor:pointer; transition:background .2s,color .2s; }
.language-option:hover { color:var(--ink); }
.language-option.active { background:var(--ink); color:#fff; }
.language-option:focus-visible,.menu-button:focus-visible { outline:2px solid var(--orange); outline-offset:2px; }
.menu-button { display:none; border:0; background:none; padding:.5rem; }
.menu-button span { display:block; width:24px; height:1px; margin:6px; background:var(--ink); }
.hero { min-height:860px; display:grid; grid-template-columns:1.05fr .95fr; padding:clamp(7rem,11vh,8.5rem) var(--pad) clamp(3rem,6vh,4.5rem); position:relative; }
.hero-copy { align-self:center; z-index:2; max-width:700px; }
.eyebrow,.section-label { font-size:.7rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; display:flex; align-items:center; gap:.7rem; }
.eyebrow>span:first-child { width:28px; height:1px; background:var(--orange); flex:0 0 auto; }
h1,h2,h3 { font-family:var(--sans); margin:0; }
h1 { font-size:clamp(3.6rem,7vw,7.7rem); line-height:.89; letter-spacing:-.07em; font-weight:600; margin:1.8rem 0; }
h1 em,.contact h2 em { color:var(--orange); font-family:Georgia,serif; font-weight:400; }
.hero-intro { max-width:490px; font-size:clamp(1rem,1.2vw,1.15rem); line-height:1.6; color:#55534d; }
.hero-actions { display:flex; align-items:center; gap:1.6rem; margin-top:2rem; }
.button { display:inline-flex; align-items:center; gap:1.5rem; border-radius:100px; padding:1rem 1.35rem; font-size:.83rem; font-weight:600; transition:transform .25s,background .25s; }
.button:hover { transform:translateY(-3px); }
.button-primary { background:var(--ink); color:#fff; }
.button-primary span,.button-light span { font-size:1.15rem; }
.text-link { font-size:.82rem; font-weight:600; display:inline-flex; gap:.7rem; padding:.5rem 0; border-bottom:1px solid var(--line); }
.hero-visual { position:relative; display:grid; place-items:center; min-height:590px; isolation:isolate; }
.sun-disc { position:absolute; z-index:-1; width:min(36vw,500px); aspect-ratio:1; border:1px solid rgba(239,106,36,.65); border-radius:50%; right:0; top:4%; background:transparent; }
.sun-disc::before { content:""; position:absolute; width:18%; aspect-ratio:1; right:4%; top:9%; border-radius:50%; background:var(--orange); }
.image-frame { z-index:1; width:min(67%,430px); aspect-ratio:1; overflow:hidden; border:8px solid var(--cream); border-radius:50%; background:#111; box-shadow:0 28px 70px rgba(38,26,15,.18),0 0 0 1px rgba(23,23,19,.08); }
.image-frame img { width:100%; height:100%; object-fit:cover; object-position:center top; }
.image-note { position:absolute; z-index:2; left:7%; bottom:10%; padding-left:1rem; border-left:2px solid var(--orange); font-size:.66rem; line-height:1.55; text-transform:uppercase; letter-spacing:.11em; }
.image-note>span:first-child { color:var(--orange); display:block; margin-bottom:.35rem; }
.image-note>span:last-child { display:block; }
.fresh-badge { position:absolute; z-index:3; right:4%; bottom:12%; width:96px; height:96px; border-radius:50%; background:var(--red); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; transform:rotate(7deg); text-transform:uppercase; font-size:.48rem; letter-spacing:.14em; box-shadow:0 12px 30px rgba(83,27,18,.2); }
.fresh-badge strong { font:400 1.35rem Georgia,serif; text-transform:none; letter-spacing:-.04em; margin:.1rem 0; }
.statement { padding:clamp(5rem,8vw,8rem) var(--pad); text-align:center; border-top:1px solid var(--line); }
.statement .section-label,.contact .section-label { justify-content:center; color:var(--orange); }
.statement h2 { font-size:clamp(2.5rem,4.8vw,5.4rem); letter-spacing:-.055em; line-height:1; margin:1.6rem 0; }
.statement h2 span { font-family:Georgia,serif; font-weight:400; font-style:italic; color:var(--orange); }
.statement-copy { max-width:610px; margin:auto; line-height:1.65; color:#68645c; }
.pillars { display:grid; grid-template-columns:repeat(3,1fr); margin:0 var(--pad) clamp(4.5rem,8vw,7rem); border-top:1px solid var(--line); }
.pillar { padding:1.6rem clamp(1rem,3vw,3rem) 2.4rem; border-right:1px solid var(--line); }
.pillar:last-child { border-right:0; }
.pillar-number { display:block; font-size:.64rem; color:var(--orange); }
.pillar-icon { font-size:2.15rem; margin:2.8rem 0 1.35rem; color:var(--orange); }
.pillar h3 { font-size:1.2rem; margin-bottom:.8rem; letter-spacing:-.03em; }
.pillar p { color:#6c685f; line-height:1.6; font-size:.88rem; max-width:300px; }
.feature { background:var(--orange); color:#171713; display:grid; grid-template-columns:1fr 1fr; min-height:650px; overflow:hidden; }
.feature-photo { position:relative; min-height:570px; overflow:hidden; background:#0f0f0c; }
.feature-photo img { width:100%; height:100%; object-fit:cover; object-position:center 42%; filter:saturate(.8) contrast(1.04); }
.feature-copy { align-self:center; padding:var(--pad); max-width:680px; }
.feature-copy .section-label { margin-bottom:2.2rem; }
.feature h2 { font-size:clamp(3rem,5.5vw,6.2rem); line-height:.89; letter-spacing:-.07em; }
.feature-copy>p:not(.section-label) { max-width:440px; line-height:1.65; margin:2rem 0; }
.text-link.dark { border-color:rgba(23,23,19,.35); }
.contact { background:var(--ink); color:#fff; text-align:center; padding:clamp(5rem,8vw,8rem) var(--pad); }
.contact h2 { font-size:clamp(3rem,6vw,6.8rem); line-height:.93; letter-spacing:-.065em; margin:1.6rem 0; }
.contact>p:not(.section-label) { color:#aaa79f; }
.button-light { background:#fff; color:var(--ink); margin-top:2rem; }
footer { padding:2rem var(--pad); display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; font-size:.72rem; border-top:1px solid var(--line); }
footer p:nth-child(2) { text-align:center; color:#777269; } footer p:last-child { text-align:right; }
.reveal { opacity:0; transform:translateY(24px); transition:opacity .8s ease,transform .8s ease; }
.reveal.visible { opacity:1; transform:none; }
html[lang="zh-CN"] body { font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",var(--sans); }
html[lang="zh-CN"] h1 { line-height:.98; letter-spacing:-.045em; }
html[lang="zh-CN"] .statement h2,html[lang="zh-CN"] .feature h2,html[lang="zh-CN"] .contact h2 { line-height:1.06; letter-spacing:-.04em; }
html[lang="zh-CN"] .eyebrow,html[lang="zh-CN"] .section-label,html[lang="zh-CN"] .image-note { text-transform:none; letter-spacing:.08em; }
html[lang="zh-CN"] .fresh-badge { letter-spacing:.08em; }
html[lang="zh-CN"] .fresh-badge strong { font-family:"STKaiti","KaiTi",serif; font-weight:600; }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none} }
@media (max-width:800px) { .site-header{height:68px}.brand{font-size:.92rem;gap:.45rem}.brand-logo{width:2.25rem;height:2.25rem}nav{display:none;position:absolute;top:68px;left:0;width:100%;margin:0;padding:1.5rem;background:var(--cream);flex-direction:column;border-bottom:1px solid var(--line);box-shadow:0 14px 30px rgba(23,23,19,.08)}nav.open{display:flex}.menu-button{display:block}.header-actions{gap:.25rem}.language-switcher{height:32px}.language-option{height:24px;min-width:30px}.hero{min-height:auto;grid-template-columns:1fr;padding-top:7rem;padding-bottom:2.5rem}.hero-copy{align-self:start}.hero-visual{min-height:520px;margin-top:1.5rem}.sun-disc{width:76vw;right:0}.image-frame{width:min(70%,340px)}.image-note{left:0}.fresh-badge{right:0}.statement{padding-top:4.5rem;padding-bottom:4.5rem}.pillars{grid-template-columns:1fr;margin-bottom:4rem}.pillar{border-right:0;border-bottom:1px solid var(--line);padding-left:0}.pillar-icon{margin-top:1.8rem}.feature{grid-template-columns:1fr;min-height:0}.feature-photo{min-height:540px}.feature-copy{padding-top:4rem;padding-bottom:4rem}.contact{padding-top:4.5rem;padding-bottom:4.5rem}footer{grid-template-columns:1fr;gap:.8rem;text-align:center;padding-top:1.5rem;padding-bottom:1.5rem}footer p:nth-child(2),footer p:last-child{text-align:center}.hero-actions{align-items:flex-start;flex-direction:column;gap:.8rem} }
@media (max-width:430px) { h1{font-size:3.25rem}.hero-visual{min-height:460px}.fresh-badge{width:86px;height:86px}.image-note{bottom:5%;font-size:.6rem}.feature-photo{min-height:500px}.statement br{display:none}.button{padding:.9rem 1.2rem}.brand-logo{width:2.1rem;height:2.1rem} }
@media (max-width:350px) { .brand>span{display:none} }