:root {
  color-scheme: light dark;
  --bg: #f3f6f2;
  --surface: #ffffff;
  --surface-muted: #e8efea;
  --ink: #13231b;
  --muted: #5f6e65;
  --line: #d5e0d9;
  --accent: #147d68;
  --accent-strong: #0e5e4e;
  --accent-soft: #d7eee5;
  --panel: #183c32;
  --panel-ink: #f2f8f4;
  --about-start: #183c32;
  --about-mid: #10271f;
  --about-edge: #070c09;
  --about-ink: #f2f8f4;
  --about-muted: #c1d4ca;
  --about-line: rgba(224, 245, 235, 0.22);
  --radius: 10px;
  --max: 1240px;
  --shadow: 0 22px 60px rgba(32, 67, 51, 0.13);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101814;
    --surface: #18231d;
    --surface-muted: #1d2a23;
    --ink: #f0f7f2;
    --muted: #acbbb2;
    --line: #30443a;
    --accent: #59c7a2;
    --accent-strong: #7cdbba;
    --accent-soft: #24503f;
    --panel: #1b4739;
    --panel-ink: #f3faf5;
    --about-start: #1b4739;
    --about-mid: #112a21;
    --about-edge: #050806;
    --about-ink: #f3faf5;
    --about-muted: #bfd5c9;
    --about-line: rgba(224, 245, 235, 0.2);
    --shadow: 0 22px 60px rgba(0, 0, 0, 0.3);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Segoe UI", "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif; font-size: 16px; line-height: 1.72; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

.skip-link { position: fixed; z-index: 20; top: 12px; left: 12px; padding: 10px 14px; border-radius: 8px; background: var(--accent-strong); color: #fff; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: sticky; z-index: 10; top: 0; border-bottom: 1px solid var(--line); background: var(--bg); background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(16px); }
.nav-shell { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; max-width: var(--max); margin: 0 auto; padding: 0 28px; }
.brand { display: inline-grid; min-width: 230px; padding: 5px 0; color: var(--ink); text-decoration: none; }
.brand-text { display: grid; gap: 3px; line-height: 1; }
.brand-text strong { font-size: 20px; font-weight: 800; letter-spacing: 0; }
.brand-text small { color: var(--muted); font-size: 10px; font-weight: 650; letter-spacing: 0; text-transform: uppercase; }
.brand:hover strong { color: var(--accent-strong); }
.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links a, .language-button, .menu-toggle { border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: 14px; text-decoration: none; transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease; }
.nav-links a { padding: 8px 10px; }
.nav-links a:hover, .language-button:hover, .language-button[aria-pressed="true"] { border-color: var(--line); background: var(--surface); color: var(--ink); }
.language-switcher { display: flex; align-items: center; gap: 4px; margin-left: 8px; padding-left: 14px; border-left: 1px solid var(--line); }
.language-button { min-height: 43px; display: inline-flex; align-items: center; justify-content: center; flex-direction: column; gap: 2px; padding: 5px 8px; cursor: pointer; line-height: 1.1; }
.language-main { display: block; color: inherit; font-size: 12px; font-weight: 620; letter-spacing: 0; white-space: nowrap; }
.language-region { display: block; color: var(--muted); font-size: 10px; font-weight: 520; letter-spacing: 0; line-height: 1; opacity: 0.8; white-space: nowrap; }
.menu-toggle { display: none; padding: 8px 10px; color: var(--ink); cursor: pointer; }
.menu-toggle:hover { border-color: var(--line); background: var(--surface); }

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--ink); font-weight: 740; letter-spacing: -0.035em; line-height: 1.1; }
h1 { max-width: 10ch; margin-bottom: 22px; font-size: clamp(44px, 5.7vw, 72px); }
h2 { max-width: 14ch; margin-bottom: 18px; font-size: clamp(34px, 4vw, 54px); }
h3 { margin-bottom: 10px; font-size: 24px; letter-spacing: -0.025em; }
html[lang="en"] h1 { max-width: 16ch; }
html[lang="en"] h2 { max-width: 20ch; }

.hero { position: relative; isolation: isolate; overflow: hidden; min-height: calc(100dvh - 72px); border-bottom: 1px solid var(--line); background: #071714 url("images/hero-technology-background.jpg") center 44% / cover no-repeat; }
.hero::before { position: absolute; z-index: -1; inset: 0; content: ""; background: linear-gradient(90deg, rgba(4, 21, 17, 0.97) 0%, rgba(4, 21, 17, 0.9) 38%, rgba(4, 21, 17, 0.54) 68%, rgba(4, 21, 17, 0.32) 100%), linear-gradient(0deg, rgba(4, 21, 17, 0.35), transparent 42%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; min-height: calc(100dvh - 72px); max-width: var(--max); margin: 0 auto; padding: 56px 28px; }
.hero-copy { max-width: 580px; }
.kicker, .section-label { margin-bottom: 18px; color: var(--accent-strong); font-size: 12px; font-weight: 760; letter-spacing: 0.1em; text-transform: uppercase; }
.hero .kicker { color: #a7e4d0; }
.hero h1 { color: #f4fbf8; }
.hero-copy > p { max-width: 520px; margin-bottom: 30px; color: var(--muted); font-size: 18px; }
.hero-copy > p:not(.kicker) { color: #d7e8e1; }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 18px; border: 1px solid var(--accent-strong); border-radius: 8px; background: var(--accent-strong); color: #fff; font-size: 14px; font-weight: 720; text-decoration: none; transition: transform 180ms ease, background 180ms ease, border-color 180ms ease; }
.button:hover { border-color: var(--accent); background: var(--accent); transform: translateY(-2px); }
.button.secondary { border-color: var(--line); background: transparent; color: var(--ink); }
.button.secondary:hover { border-color: var(--accent); background: var(--accent-soft); }
.hero .button.secondary { border-color: rgba(242, 251, 247, 0.72); background: rgba(4, 21, 17, 0.22); color: #f4fbf8; }
.hero .button.secondary:hover { border-color: #f4fbf8; background: rgba(242, 251, 247, 0.16); }

.identity-section { border-bottom: 1px solid var(--line); background: var(--surface); }
.identity-inner { display: grid; grid-template-columns: minmax(220px, 0.63fr) minmax(0, 1.37fr); gap: clamp(36px, 7vw, 94px); max-width: var(--max); margin: 0 auto; padding: 62px 28px; }
.identity-intro h2 { margin-bottom: 0; font-size: clamp(30px, 3vw, 42px); }
.identity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 34px; margin: 0; border-top: 1px solid var(--line); }
.identity-grid > div { padding: 17px 0 15px; border-bottom: 1px solid var(--line); }
.identity-grid dt { margin-bottom: 4px; color: var(--muted); font-size: 13px; }
.identity-grid dd { margin: 0; color: var(--ink); font-size: 15px; font-weight: 680; line-height: 1.5; }

.section { max-width: var(--max); margin: 0 auto; padding: 112px 28px; }
.section-heading { max-width: 710px; margin-bottom: 48px; }
.section-heading p { max-width: 660px; margin-bottom: 0; color: var(--muted); font-size: 17px; }
.service-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.service-group { min-height: 330px; padding: 34px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.service-group-primary { border-color: var(--panel); background: var(--panel); }
.service-group-primary h3 { color: var(--panel-ink); }
.service-group p { max-width: 470px; color: var(--muted); }
.service-group ul { display: grid; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.service-group li { padding-top: 8px; border-top: 1px solid var(--line); color: var(--ink); font-size: 15px; font-weight: 640; }
.service-group-primary p, .service-group-primary li { color: #d7eee5; }
.service-group-primary li { border-color: rgba(235, 250, 242, 0.25); }
.service-group-automation { grid-column: 1 / -1; min-height: 0; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: end; background: var(--surface-muted); }
.service-group-automation p { max-width: 560px; margin-bottom: 0; }
.service-group-automation ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 0; }
.service-group-automation li { padding-top: 14px; line-height: 1.6; }

.about { isolation: isolate; overflow: hidden; color: var(--about-ink); background-color: var(--about-start); background: linear-gradient(108deg, var(--about-start) 0%, var(--about-start) 19%, var(--about-mid) 56%, var(--about-edge) 100%); }
.about-inner { position: relative; max-width: var(--max); margin: 0 auto; padding: 112px 28px; overflow: hidden; }
.about-grid { position: relative; min-height: 620px; display: flex; align-items: center; }
.about-copy { position: relative; z-index: 2; width: min(62%, 680px); padding: 38px 0; }
.about .section-label { color: #a8e1ca; }
.about h2 { color: var(--about-ink); }
.about-copy p { max-width: 630px; color: var(--about-muted); font-size: 17px; }
.about-media { position: absolute; z-index: 1; top: 0; right: -6%; bottom: 0; width: 68%; margin: 0; pointer-events: none; }
.about-media::before { position: absolute; z-index: 1; inset: 0; content: ""; pointer-events: none; background: none; }
.about-media img { width: 100%; height: 100%; object-position: right center; object-fit: contain; }
.about .principles { border-color: var(--about-line); }
.principle { display: grid; grid-template-columns: 160px 1fr; gap: 16px; align-items: baseline; }
.about .principle strong { color: var(--about-ink); font-size: 15px; }
.about .principle span { color: var(--about-muted); font-size: 14px; }

.contact-band { background: var(--panel); color: var(--panel-ink); }
.contact-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 0.72fr); gap: 70px; align-items: end; max-width: var(--max); margin: 0 auto; padding: 100px 28px; }
.contact-inner h2, .contact-inner h3 { color: var(--panel-ink); }
.contact-inner p { max-width: 560px; color: #c9ded4; font-size: 17px; }
.contact-details { padding-top: 18px; border-top: 1px solid rgba(232, 248, 240, 0.28); }
.contact-details p { margin-bottom: 12px; font-size: 14px; }
.contact-details a { color: #f2faf5; text-underline-offset: 4px; }
.contact-inner .button { border-color: #d7eee5; background: #d7eee5; color: #123b2f; }
.contact-inner .button:hover { border-color: #fff; background: #fff; }
.privacy-section { padding-top: 104px; padding-bottom: 104px; }
.privacy-layout { display: grid; grid-template-columns: minmax(230px, 0.62fr) minmax(0, 1.38fr); gap: clamp(46px, 8vw, 120px); align-items: start; }
.privacy-intro { position: sticky; top: 104px; max-width: 390px; }
.privacy-intro h2 { margin-bottom: 16px; }
.privacy-effective { margin-bottom: 18px; color: var(--ink); font-size: 14px; font-weight: 680; }
.privacy-intro > p:last-child, .privacy-detail li, .privacy-contact { color: var(--muted); font-size: 15px; }
.privacy-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 34px; }
.privacy-detail { padding: 24px 0 26px; border-top: 1px solid var(--line); }
.privacy-detail h3 { margin-bottom: 10px; font-size: 18px; letter-spacing: 0; line-height: 1.3; }
.privacy-detail ul { display: grid; gap: 8px; margin: 0; padding-left: 20px; }
.privacy-contact { grid-column: 1 / -1; margin: 0; padding-top: 22px; border-top: 1px solid var(--line); }
.privacy-contact strong { color: var(--ink); }
.privacy-contact a { color: var(--accent-strong); text-underline-offset: 4px; }
footer { border-top: 1px solid var(--line); background: var(--bg); }
.footer-inner { display: flex; justify-content: space-between; gap: 24px; max-width: var(--max); margin: 0 auto; padding: 28px; color: var(--muted); font-size: 13px; }
.footer-inner p { margin-bottom: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 16px; }
.footer-links a { text-underline-offset: 3px; }

.reveal { transition: opacity 480ms ease, transform 480ms ease; }
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .js .reveal { opacity: 1; transform: none; } }

@media (max-width: 900px) { .hero-grid, .identity-inner, .contact-inner, .privacy-layout, .service-group-automation { grid-template-columns: 1fr; } .about { background: linear-gradient(180deg, var(--about-start) 0%, var(--about-mid) 62%, var(--about-edge) 100%); } .about-grid { min-height: 0; display: block; } .about-copy { width: 100%; padding: 0; } .about-media { position: relative; inset: auto; width: min(100%, 680px); height: 360px; margin: 34px auto 0; } .about-media img { object-position: center; } .about-media::before { background: none; } .service-group-automation { gap: 24px; } .service-group-automation ul { grid-template-columns: 1fr; } .privacy-intro { position: static; max-width: 620px; } .privacy-details { grid-template-columns: 1fr; } .privacy-contact { grid-column: auto; } .hero-grid { min-height: calc(100dvh - 72px); padding-top: 48px; } .hero-copy { max-width: 760px; } .identity-intro { max-width: 620px; } .contact-inner { gap: 38px; } }
@media (max-width: 700px) { .nav-shell { min-height: 64px; padding: 0 18px; } .brand { min-width: 0; } .brand-text strong { font-size: 18px; } .brand-text small { display: none; } .menu-toggle { display: inline-flex; } .nav-links { position: absolute; top: 64px; right: 18px; left: 18px; display: none; align-items: stretch; flex-direction: column; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); } .nav-links.is-open { display: flex; } .nav-links a { padding: 10px 12px; } .language-switcher { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 6px 0 0; padding: 8px 0 0; border-top: 1px solid var(--line); border-left: 0; } .language-button { text-align: center; } .hero-grid, .section, .about-inner, .contact-inner, .identity-inner { padding-right: 18px; padding-left: 18px; } .hero-grid { min-height: calc(100dvh - 64px); padding-top: 36px; padding-bottom: 46px; } h1 { max-width: 9ch; margin-bottom: 18px; font-size: clamp(40px, 13vw, 62px); } .hero-copy > p { font-size: 16px; } .identity-inner { gap: 30px; padding-top: 60px; padding-bottom: 60px; } .identity-grid { grid-template-columns: 1fr; } .section, .about-inner { padding-top: 78px; padding-bottom: 78px; } .section-heading { margin-bottom: 36px; } h2 { max-width: 12ch; font-size: clamp(34px, 11vw, 50px); } .service-groups { grid-template-columns: 1fr; } .service-group { min-height: 0; padding: 28px; } .principle { grid-template-columns: 1fr; gap: 2px; } .about-media { width: 100%; height: 280px; margin-top: 24px; } .privacy-section { padding-top: 78px; padding-bottom: 78px; } .contact-inner { padding-top: 76px; padding-bottom: 76px; } .footer-inner { align-items: flex-start; flex-direction: column; padding: 24px 18px; } }