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

:root { --ink:#122a39; --muted:#667b83; --line:#d9e3e3; --paper:#f7faf8; --white:#fff; --blue:#1f8fb5; --teal:#0c7a72; --green:#9abd74; --shadow:0 20px 55px rgba(25,61,72,.11); --radius:18px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'DM Sans','Noto Sans SC',sans-serif; line-height:1.6; }
body.english { font-family:'DM Sans',Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.shell { width:min(1180px, calc(100% - 64px)); margin:0 auto; }
.site-header { position:sticky; top:0; z-index:20; background:rgba(247,250,248,.92); border-bottom:1px solid rgba(217,227,227,.8); backdrop-filter:blur(16px); }
.nav-shell { min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:inline-flex; align-items:center; gap:11px; flex-shrink:0; }
.brand img { width:43px; height:30px; object-fit:contain; }
.brand span { display:grid; gap:0; line-height:1.15; }
.brand strong { color:var(--ink); font-size:14px; letter-spacing:.14em; }
.brand small { color:var(--muted); font-size:10px; letter-spacing:.12em; }
.main-nav { display:flex; align-items:center; gap:30px; font-size:14px; color:#5b7078; }
.main-nav a { position:relative; padding:29px 0 25px; transition:color .2s; }
.main-nav a::after { content:''; position:absolute; left:0; right:100%; bottom:18px; height:2px; background:var(--teal); transition:right .25s; }
.main-nav a:hover,.main-nav a.active { color:var(--teal); }
.main-nav a.active::after { right:0; }
.nav-actions { display:flex; align-items:center; gap:16px; }
.nav-mail { color:var(--teal); font-size:12px; white-space:nowrap; }
.lang-toggle { border:0; background:transparent; color:#789097; cursor:pointer; font-size:12px; padding:7px 0; }
.lang-toggle i { font-style:normal; margin:0 5px; color:#b1c0c0; }
.lang-toggle .selected { color:var(--teal); font-weight:700; }
.menu-toggle { display:none; border:0; background:transparent; padding:8px; cursor:pointer; }
.menu-toggle span { display:block; width:22px; height:1px; background:var(--ink); margin:5px; }
.eyebrow { margin:0 0 17px; color:var(--teal); font-size:11px; letter-spacing:.22em; font-weight:700; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:23px; font-size:clamp(42px,5.8vw,78px); line-height:1.05; letter-spacing:-.065em; font-weight:700; }
h2 { margin-bottom:20px; font-size:clamp(32px,4vw,53px); line-height:1.08; letter-spacing:-.05em; }
h3 { font-size:19px; line-height:1.25; }
.lead { color:var(--muted); font-size:17px; max-width:600px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:48px; padding:0 22px; border:1px solid var(--teal); border-radius:999px; background:var(--teal); color:white; font-size:13px; font-weight:700; transition:transform .2s,background .2s; }
.btn::after { content:'↗'; font-size:17px; line-height:1; }
.btn:hover { transform:translateY(-2px); background:#075f5a; }
.btn-outline { background:transparent; color:var(--teal); }
.btn-outline:hover { background:var(--teal); color:white; }
.btn-plain { border:0; background:transparent; padding-left:0; color:var(--teal); }
.btn-plain:hover { background:transparent; color:var(--blue); }
.hero { position:relative; overflow:hidden; padding:86px 0 78px; background:#f7faf8; }
.hero::before { content:''; position:absolute; width:520px; height:520px; right:-220px; top:-140px; border-radius:50%; background:radial-gradient(circle,rgba(128,192,167,.28),transparent 65%); }
.hero-grid { position:relative; display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:70px; }
.hero-copy { padding-bottom:12px; }
.hero h1 { max-width:650px; }
.hero h1 em { color:var(--teal); font-style:normal; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.hero-visual { position:relative; min-height:500px; }
.hero-photo { width:100%; height:500px; display:block; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow); }
.hero-note { position:absolute; bottom:22px; left:-35px; padding:18px 20px; background:white; border-left:3px solid var(--green); box-shadow:var(--shadow); max-width:225px; }
.hero-note strong { display:block; font-size:15px; }
.hero-note span { display:block; color:var(--muted); font-size:11px; margin-top:4px; }
.stats { background:var(--teal); color:white; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.stat { padding:31px 28px 30px 0; border-right:1px solid rgba(255,255,255,.23); }
.stat:not(:first-child) { padding-left:28px; }
.stat:last-child { border-right:0; }
.stat strong { display:block; font-size:34px; letter-spacing:-.05em; }
.stat span { display:block; color:rgba(255,255,255,.72); font-size:12px; margin-top:4px; }
.section { padding:118px 0; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:45px; }
.section-head h2 { max-width:650px; margin-bottom:0; }
.section-head p { max-width:390px; color:var(--muted); margin-bottom:3px; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center; }
.image-frame { position:relative; }
.image-frame img { width:100%; height:480px; object-fit:cover; display:block; border-radius:var(--radius); }
.image-frame::after { content:''; position:absolute; width:52%; height:52%; left:-18px; bottom:-18px; z-index:-1; border:1px solid #a8c5b6; border-radius:var(--radius); }
.numbered-list { margin:34px 0 0; padding:0; list-style:none; }
.numbered-list li { display:grid; grid-template-columns:38px 1fr; gap:16px; padding:17px 0; border-top:1px solid var(--line); }
.numbered-list li strong { color:var(--teal); font-size:12px; letter-spacing:.12em; }
.numbered-list li span { font-size:15px; font-weight:600; }
.eco-section { background:#eaf3ee; }
.eco-grid { display:grid; grid-template-columns:.75fr 1.25fr; gap:80px; align-items:center; }
.eco-copy p { color:var(--muted); max-width:480px; }
.eco-wheel { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.eco-card { min-height:170px; padding:27px; background:white; border-radius:var(--radius); display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 10px 30px rgba(28,91,75,.06); }
.eco-card:nth-child(2) { transform:translateY(28px); background:var(--teal); color:white; }
.eco-card:nth-child(3) { background:#d2e5b8; }
.eco-card:nth-child(4) { transform:translateY(28px); background:#f4efe0; }
.eco-card strong { font-size:30px; letter-spacing:-.06em; }
.eco-card span { font-size:13px; color:var(--muted); }
.eco-card:nth-child(2) span { color:rgba(255,255,255,.75); }
.service-preview { background:#fff; }
.service-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.service-card { min-height:266px; padding:28px 24px; background:white; transition:background .2s,transform .2s; }
.service-card:hover { background:#f1f8f5; transform:translateY(-5px); }
.service-card .index { color:var(--teal); font-size:12px; letter-spacing:.15em; }
.service-card h3 { margin:57px 0 13px; }
.service-card p { color:var(--muted); font-size:13px; }
.band { background:var(--ink); color:white; padding:98px 0; }
.band-grid { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center; }
.band p { color:rgba(255,255,255,.69); max-width:500px; }
.band .eyebrow { color:#b2d894; }
.band .btn { margin-top:20px; background:#b2d894; border-color:#b2d894; color:var(--ink); }
.band .btn:hover { background:#d0eca8; }
.partner-strip { display:grid; grid-template-columns:repeat(5,1fr); gap:22px; align-items:center; }
.partner-strip img { width:100%; height:52px; margin:auto; display:block; object-fit:contain; filter:grayscale(1); opacity:.65; transition:opacity .2s,filter .2s; }
.partner-strip img:hover { filter:none; opacity:1; }
.page-hero { padding:95px 0 85px; background:linear-gradient(120deg,#e8f2ee,#f7faf8 62%); }
.page-hero-grid { display:flex; justify-content:space-between; align-items:end; gap:50px; }
.page-hero h1 { max-width:650px; margin-bottom:0; }
.page-hero p { max-width:370px; color:var(--muted); margin-bottom:4px; }
.breadcrumb { margin-bottom:20px; color:var(--teal); font-size:11px; text-transform:uppercase; letter-spacing:.19em; }
.service-levels { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.level-card { padding:27px 23px; border-top:2px solid var(--teal); background:white; min-height:248px; box-shadow:0 8px 25px rgba(28,68,75,.05); }
.level-card:nth-child(2) { border-color:#469e9a; }.level-card:nth-child(3) { border-color:#78ae78; }.level-card:nth-child(4) { border-color:#a9c978; }
.level-card small { color:var(--teal); font-size:11px; letter-spacing:.12em; }
.level-card h3 { margin:38px 0 13px; }.level-card p { color:var(--muted); font-size:13px; }
.function-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.function-card { min-height:190px; padding:23px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:white; }
.function-card b { display:block; color:var(--teal); font-size:12px; letter-spacing:.15em; }.function-card h3 { margin:32px 0 9px; font-size:17px; }.function-card p { color:var(--muted); font-size:12px; }
.case-feature { display:grid; grid-template-columns:1.15fr .85fr; min-height:480px; background:var(--ink); color:white; border-radius:var(--radius); overflow:hidden; }
.case-feature img { width:100%; height:100%; object-fit:cover; min-height:480px; }.case-copy { padding:52px 48px; align-self:center; }.case-copy p { color:rgba(255,255,255,.68); }.case-copy h2 { font-size:42px; }.case-copy .tag { color:#b2d894; font-size:11px; letter-spacing:.16em; }
.case-points { margin:30px 0 0; padding:0; list-style:none; }.case-points li { padding:13px 0; border-top:1px solid rgba(255,255,255,.19); font-size:14px; }.case-points li::before { content:'+'; color:#b2d894; margin-right:11px; }
.expert-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; }.expert-card { background:white; overflow:hidden; border-radius:var(--radius); }.expert-card img { width:100%; height:280px; object-fit:cover; object-position:top; display:block; background:#e9efed; }.expert-card div { padding:20px 21px; }.expert-card h3 { margin:0 0 5px; font-size:17px; }.expert-card p { margin:0; color:var(--muted); font-size:12px; }
.logos-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }.logo-box { min-height:138px; padding:20px; background:white; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; }.logo-box img { width:100%; max-height:64px; object-fit:contain; }.logo-box span { color:var(--muted); font-size:14px; text-align:center; }
.contact-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; align-items:start; }.contact-list { margin-top:36px; }.contact-row { display:grid; grid-template-columns:85px 1fr; gap:15px; padding:18px 0; border-top:1px solid var(--line); }.contact-row strong { color:var(--teal); font-size:12px; }.contact-row span,.contact-row a { font-size:15px; }
.contact-card { padding:40px; background:var(--ink); color:white; border-radius:var(--radius); }.contact-card h2 { font-size:39px; }.contact-card p { color:rgba(255,255,255,.68); }.contact-card .btn { margin-top:18px; background:#b2d894; color:var(--ink); border-color:#b2d894; }.contact-qr { display:flex; align-items:center; gap:22px; margin-top:32px; padding-top:26px; border-top:1px solid rgba(255,255,255,.18); }.contact-qr img { width:112px; height:112px; border-radius:7px; }.contact-qr span { color:rgba(255,255,255,.68); font-size:13px; }
.qr-pair { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:34px; padding-top:28px; border-top:1px solid rgba(255,255,255,.18); }
.qr-card { display:flex; flex-direction:column; align-items:center; gap:11px; padding:18px 16px; border:1px solid rgba(255,255,255,.16); border-radius:12px; background:rgba(255,255,255,.06); color:white; text-align:center; cursor:pointer; transition:background .2s,border-color .2s,transform .2s; }
.qr-card:hover { background:rgba(255,255,255,.12); border-color:rgba(178,216,148,.6); transform:translateY(-2px); }
.qr-card img { width:132px; height:132px; border-radius:8px; background:#fff; padding:4px; }
.qr-card strong { font-size:13px; line-height:1.35; }
.qr-card span { color:rgba(255,255,255,.62); font-size:11px; line-height:1.5; }
.qr-lightbox { position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(9,25,32,.82); backdrop-filter:blur(4px); }
.qr-lightbox.open { display:flex; }
.qr-lightbox-inner { position:relative; padding:26px 26px 22px; background:white; border-radius:16px; text-align:center; box-shadow:0 30px 80px rgba(6,20,26,.45); cursor:pointer; }
.qr-lightbox-inner img { width:min(320px,62vw); height:auto; display:block; border-radius:9px; background:#fff; }
.qr-lightbox-inner strong { display:block; margin-top:15px; color:var(--ink); font-size:14px; }
.qr-lightbox-inner small { display:block; margin-top:5px; color:var(--muted); font-size:11.5px; }
.site-footer { background:#102630; color:white; padding-top:68px; }.footer-top { display:grid; grid-template-columns:1.8fr .9fr 1.3fr 1.7fr; gap:45px; padding-bottom:56px; }.brand-light strong,.brand-light small { color:white; }.footer-brand p { max-width:310px; color:rgba(255,255,255,.53); font-size:13px; margin-top:22px; }.footer-col { display:flex; flex-direction:column; gap:10px; }.footer-col h3 { font-size:12px; color:#b2d894; letter-spacing:.12em; text-transform:uppercase; margin-bottom:11px; }.footer-col a,.footer-col span { color:rgba(255,255,255,.61); font-size:13px; }.footer-col a:hover { color:white; }.footer-qr { justify-self:end; display:flex; flex-direction:row; align-items:flex-start; gap:16px; }.footer-qr .qr-item { display:flex; flex-direction:column; gap:9px; color:rgba(255,255,255,.54); font-size:12px; text-align:center; }.footer-qr img { width:105px; height:105px; border-radius:6px; background:#fff; }.footer-bottom { display:flex; justify-content:space-between; gap:18px; padding:20px 0; border-top:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.4); font-size:11px; }.footer-bottom a:hover { color:white; }
[data-reveal] { opacity:0; transform:translateY(22px); transition:opacity .7s ease,transform .7s ease; }.revealed { opacity:1; transform:translateY(0); }
@media (max-width:1000px) { .main-nav { gap:18px; }.nav-mail { display:none; }.hero-grid,.split,.eco-grid,.band-grid,.contact-grid { gap:45px; }.service-grid,.service-levels { grid-template-columns:repeat(2,1fr); }.function-grid { grid-template-columns:repeat(2,1fr); }.footer-top { grid-template-columns:1.5fr 1fr; }.footer-qr { justify-self:start; }.partner-strip { grid-template-columns:repeat(5,1fr); gap:10px; } }
@media (max-width:720px) { .shell { width:min(100% - 36px, 560px); }.nav-shell { min-height:68px; }.main-nav { display:none; position:absolute; top:68px; left:0; right:0; padding:11px 18px 18px; flex-direction:column; align-items:stretch; gap:0; background:rgba(247,250,248,.98); border-bottom:1px solid var(--line); }.main-nav.open { display:flex; }.main-nav a { padding:12px 0; }.main-nav a::after { bottom:4px; }.menu-toggle { display:block; }.hero { padding:62px 0 58px; }.hero-grid,.split,.eco-grid,.band-grid,.contact-grid,.case-feature { grid-template-columns:1fr; }.hero-visual { min-height:300px; }.hero-photo { height:330px; }.hero-note { left:14px; bottom:-20px; }.hero-copy { padding-bottom:25px; }.stats-grid { grid-template-columns:repeat(2,1fr); }.stat { padding:21px 12px!important; border-right:1px solid rgba(255,255,255,.23); border-bottom:1px solid rgba(255,255,255,.23); }.stat:nth-child(2) { border-right:0; }.stat:nth-child(3),.stat:nth-child(4) { border-bottom:0; }.section { padding:74px 0; }.section-head,.page-hero-grid { display:block; }.section-head p,.page-hero p { margin-top:18px; }.image-frame img { height:320px; }.eco-wheel { margin-top:10px; }.eco-card { min-height:145px; }.service-grid,.service-levels,.function-grid,.expert-grid,.logos-grid { grid-template-columns:1fr; }.service-card,.level-card { min-height:0; }.function-card { min-height:155px; }.partner-strip { grid-template-columns:repeat(2,1fr); gap:25px; }.partner-strip img { max-height:53px; }.page-hero { padding:65px 0 55px; }.case-feature img { min-height:280px; height:280px; }.case-copy { padding:34px 26px 38px; }.case-copy h2,.contact-card h2 { font-size:33px; }.footer-top { grid-template-columns:1fr 1fr; gap:32px 20px; }.footer-brand { grid-column:1 / -1; }.footer-qr { grid-column:1 / -1; justify-self:start; }.qr-pair { grid-template-columns:1fr; }.footer-bottom { flex-wrap:wrap; }.nav-actions { gap:9px; }.lang-toggle { font-size:11px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } [data-reveal] { opacity:1; transform:none; } }