@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { --paper:#f8f8f4; --ink:#191818; --muted:#656761; --line:#d9dcd2; --accent:#c4f46d; --mono:"Space Grotesk",monospace; --sans:"DM Sans","Microsoft YaHei","PingFang SC",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:105px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; -webkit-font-smoothing:antialiased; }
::selection { background:var(--accent); color:var(--ink); }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; cursor:pointer; }
button,a,summary { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid #5b850f; outline-offset:5px; }
.container { max-width:1304px; padding-inline:48px; margin-inline:auto; }
.mono { font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:.05em; }
.skip-link { position:fixed; top:10px; left:10px; padding:12px 20px; background:var(--ink); color:white; z-index:100; transform:translateY(-160%); }
.skip-link:focus { transform:none; }
.header { background:var(--paper); border-bottom:1px solid var(--line); }
.header-inner { height:96px; display:flex; align-items:center; justify-content:space-between; gap:32px; }
.brand { display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:21px; font-weight:600; letter-spacing:-.7px; white-space:nowrap; }
.brand-mark { display:flex; justify-content:center; align-items:center; width:38px; height:38px; border-radius:10px; background:var(--ink); color:var(--paper); font-size:30px; font-weight:700; line-height:1; padding-bottom:4px; }
.brand-mark span { color:var(--accent); }
.brand-dev { color:var(--muted); }
.nav { display:flex; align-items:center; gap:32px; font-size:15px; font-weight:500; }
.nav a { padding:10px 0; }
.nav a:hover { box-shadow:0 2px var(--ink); }
.language { display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:14px; }
.language button { border:0; background:none; padding:9px 5px; opacity:.48; min-height:42px; }
.language button[aria-pressed="true"] { opacity:1; font-weight:700; }
.language span { color:#b4b6ae; }
.hero { display:grid; grid-template-columns:1.18fr 1fr; gap:66px; padding-top:88px; padding-bottom:90px; align-items:center; }
.eyebrow { display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; letter-spacing:.045em; margin:0 0 26px; line-height:1.6; }
.status-dot { width:8px; height:8px; border-radius:50%; background:#749d37; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(42px,4.5vw,66px); line-height:1.25; letter-spacing:-2.5px; font-weight:600; margin-bottom:28px; }
.hero-highlight { background:linear-gradient(transparent 70%,var(--accent) 70%,var(--accent) 91%,transparent 91%); }
.hero-description { max-width:490px; color:var(--muted); font-size:18px; line-height:1.9; margin-bottom:30px; }
.hero-actions { display:flex; gap:27px; align-items:center; flex-wrap:wrap; }
.button { display:inline-flex; align-items:center; justify-content:space-between; gap:32px; font-size:16px; font-weight:600; border-radius:4px; min-height:56px; padding:16px 23px; transition:background .2s,transform .2s; }
.button-dark { background:var(--ink); color:var(--paper); }
.button-dark:hover { background:#34372e; transform:translateY(-2px); }
.button span:last-child { font-size:22px; font-family:Arial,sans-serif; }
.text-link { display:inline-flex; gap:17px; align-items:center; font-size:15px; font-weight:600; padding-block:10px; }
.text-link:hover { text-decoration:underline; text-underline-offset:5px; }
.hero-note { color:var(--muted); font-size:14px; margin:18px 0 0; }
.project-board { background:var(--accent); padding:25px 25px 20px; border-radius:6px; position:relative; transform:rotate(2deg); }
.board-top { display:flex; align-items:center; justify-content:space-between; }
.board-icon { font:30px Arial,sans-serif; }
.board-title { font-size:36px; font-weight:600; line-height:1.45; margin:24px 0 27px; letter-spacing:-1px; }
.board-window { background:var(--paper); border:1px solid var(--ink); border-radius:7px; box-shadow:6px 6px 0 rgb(25 24 24 / 15%); transform:rotate(-2deg); overflow:hidden; }
.window-bar { display:flex; align-items:center; gap:15px; padding:16px; border-bottom:1px solid var(--line); }
.window-bar .mono { font-size:11px; color:var(--muted); }
.window-dots { display:flex; gap:5px; }
.window-dots i { width:6px; height:6px; background:#b6bbb0; border-radius:50%; }
.window-code { margin-left:auto; font-family:var(--mono); font-size:15px; }
.window-content { padding:8px 20px; }
.board-row { display:flex; align-items:center; gap:15px; padding:17px 0; font-size:15px; font-weight:500; border-bottom:1px solid var(--line); }
.board-row:last-child { border:0; }
.board-row > span:last-child { margin-left:auto; font:20px Arial,sans-serif; }
.row-number { font-family:var(--mono); font-size:12px; color:var(--muted); }
.board-bottom { display:flex; justify-content:space-between; gap:12px; margin-top:30px; }
.board-bottom .mono { font-size:10px; }
.principles { border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.principles-inner { display:flex; justify-content:space-between; gap:20px; align-items:center; min-height:77px; font-size:15px; font-weight:500; }
.principles-inner span:nth-child(even) { color:#91978b; font-size:25px; }
.section { padding-top:99px; padding-bottom:99px; }
.section-heading { margin-bottom:42px; }
.heading-row { display:flex; justify-content:space-between; align-items:flex-end; gap:80px; }
h2 { font-size:42px; font-weight:600; line-height:1.4; letter-spacing:-1.8px; margin-bottom:0; }
.section-intro { width:350px; color:var(--muted); line-height:1.85; margin:0 0 5px; }
.service-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--line); border-radius:5px; overflow:hidden; }
.service-card { padding:30px 29px 29px; border-right:1px solid var(--line); }
.service-card:last-child { border:0; }
.service-top { display:flex; justify-content:space-between; align-items:center; color:var(--muted); margin-bottom:44px; }
.service-top > span:last-child { font:24px Arial,sans-serif; }
h3 { font-size:23px; font-weight:600; letter-spacing:-.5px; line-height:1.5; margin-bottom:14px; }
.service-card p { color:var(--muted); font-size:16px; line-height:1.85; min-height:60px; margin-bottom:23px; }
.service-card ul { margin:0; padding:22px 0 0; list-style:none; border-top:1px solid var(--line); }
.service-card li { display:flex; align-items:baseline; gap:9px; font-size:14px; line-height:1.9; margin-bottom:6px; }
.service-card li::before { content:"↗"; color:#72776b; }
.service-footer { display:flex; align-items:center; gap:18px; padding-top:25px; }
.service-footer-marker { font-size:23px; }
.service-footer p { margin:0; font-size:15px; color:var(--muted); line-height:1.7; }
.service-footer a { margin-left:auto; white-space:nowrap; }
.approach-section { background:#eff1e9; border-block:1px solid var(--line); }
.steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px; margin-top:56px; }
.step { border-top:1px solid #bbc1b2; padding-top:20px; }
.step-number { display:block; color:#72776b; margin-bottom:27px; }
.step h3 { font-size:21px; }
.step p { color:var(--muted); font-size:15px; line-height:1.9; margin-bottom:0; }
.questions-section { display:grid; grid-template-columns:1fr 1.2fr; gap:80px; }
.questions-section h2 { font-size:36px; }
.faq-list { border-top:1px solid var(--line); }
details { border-bottom:1px solid var(--line); }
summary { list-style:none; display:flex; gap:20px; justify-content:space-between; align-items:center; padding:25px 0; cursor:pointer; font-weight:500; font-size:17px; line-height:1.6; }
summary::-webkit-details-marker { display:none; }
.faq-plus { font-size:24px; font-weight:400; transition:transform .2s; }
details[open] .faq-plus { transform:rotate(45deg); }
details p { color:var(--muted); line-height:1.9; margin:0 34px 24px 0; font-size:16px; }
.contact-section { background:var(--accent); }
.contact-inner { display:flex; justify-content:space-between; align-items:center; gap:80px; padding-block:74px; }
.contact-inner .eyebrow { margin-bottom:22px; }
.contact-inner h2 { font-size:49px; line-height:1.4; }
.contact-description { line-height:1.85; max-width:480px; margin:21px 0 0; color:#3f4e29; }
.contact-actions { display:flex; flex-direction:column; align-items:flex-start; min-width:287px; }
.contact-actions .button { width:100%; }
.email-address { margin-top:24px; font-family:var(--mono); font-size:16px; text-decoration:underline; text-underline-offset:5px; }
.copy-email { padding:10px 0; margin-top:6px; border:0; background:none; font-size:14px; color:#3f4e29; }
.copy-email:hover { text-decoration:underline; }
.copy-status { min-height:20px; font-size:14px; }
.footer { min-height:125px; display:flex; align-items:center; justify-content:space-between; gap:25px; }
.footer .brand { font-size:17px; }
.footer .brand-mark { width:30px; height:30px; font-size:24px; border-radius:7px; }
.footer p { margin:0; color:var(--muted); font-size:13px; line-height:1.8; }
.back-to-top { display:flex; gap:16px; font-size:14px; white-space:nowrap; }
html[lang="en"] h1 { font-family:var(--mono); font-size:clamp(44px,4.8vw,70px); line-height:1.09; letter-spacing:-3px; }
html[lang="en"] h2 { font-family:var(--mono); line-height:1.2; }
html[lang="en"] h3 { font-family:var(--mono); }
html[lang="en"] .board-title { font-family:var(--mono); font-size:37px; line-height:1.15; letter-spacing:-1.8px; }
html[lang="en"] .service-card p { min-height:89px; }
@media (min-width:1500px) { .container { max-width:1410px; } .hero { padding-block:107px; gap:95px; } h1 { font-size:72px; } .board-title { font-size:42px; } }
@media (max-width:1050px) { .container { padding-inline:32px; } .hero { gap:35px; padding-block:66px; } h1 { font-size:49px; letter-spacing:-2px; } .hero-description { font-size:17px; } .board-title { font-size:32px; } .board-bottom .mono:last-child { display:none; } .service-card { padding:26px 22px; } .heading-row { gap:45px; } .questions-section { gap:45px; } h2 { font-size:36px; } html[lang="en"] h1 { font-size:52px; } }
@media (max-width:760px) { .container { padding-inline:22px; } .header-inner { height:78px; gap:12px; } .brand { font-size:18px; gap:9px; } .brand-mark { width:33px; height:33px; font-size:27px; } .nav { display:none; } .hero { grid-template-columns:1fr; gap:48px; padding-top:54px; padding-bottom:55px; } h1 { font-size:48px; line-height:1.3; } .hero-description { max-width:530px; } .hero .eyebrow { margin-bottom:24px; } .project-board { margin-inline:8px; padding:23px; } .board-title { font-size:32px; margin-top:19px; } .board-bottom .mono:last-child { display:block; } .principles-inner { flex-wrap:wrap; justify-content:center; gap:10px 18px; padding-block:20px; font-size:14px; } .principles-inner span:last-child { display:none; } .principles-inner span:nth-last-child(2) { display:none; } .section { padding-block:62px; } .heading-row { display:block; } h2 { font-size:35px; } .section-intro { width:auto; max-width:480px; margin-top:23px; } .section-heading { margin-bottom:30px; } .service-grid { grid-template-columns:1fr; } .service-card { padding:25px; border-right:0; border-bottom:1px solid var(--line); } .service-top { margin-bottom:25px; } .service-card p, html[lang="en"] .service-card p { min-height:0; } .service-card ul { padding-top:18px; } .service-footer { align-items:flex-start; gap:12px; flex-wrap:wrap; padding-top:21px; } .service-footer p { flex:1; } .service-footer a { margin-left:29px; flex-basis:100%; } .steps { grid-template-columns:1fr 1fr; gap:33px 24px; margin-top:36px; } .step-number { margin-bottom:20px; } .questions-section { grid-template-columns:1fr; gap:30px; } .questions-section h2 { font-size:34px; } .contact-inner { display:block; padding-block:55px; } .contact-inner h2 { font-size:43px; } .contact-actions { margin-top:30px; min-width:0; } .contact-actions .button { width:auto; min-width:265px; } .footer { flex-wrap:wrap; padding-block:30px; row-gap:22px; } .footer p { order:3; flex-basis:100%; } html[lang="en"] h1 { font-size:54px; letter-spacing:-2.4px; max-width:530px; } }
@media (max-width:370px) { .container { padding-inline:17px; } h1 { font-size:41px; } html[lang="en"] h1 { font-size:47px; } .hero-actions { gap:17px; } .button { padding-inline:20px; gap:24px; } .board-bottom .mono:last-child { display:none; } .language { gap:2px; } .brand { font-size:16px; } .brand-dev { display:none; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } }