@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700;800&display=swap');
:root { --ink:#173f35; --ink-deep:#11342c; --lime:#dff291; --paper:#f5f5ed; --paper-dark:#ebebe1; --muted:#728078; --line:#d9ddd2; --white:#fff; --serif: Georgia,'Times New Roman',serif; --sans: Inter,'Noto Sans SC',Arial,sans-serif; --mono:'DM Mono',monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); line-height:1.65; -webkit-font-smoothing:antialiased; }
body:has(dialog[open]) { overflow:hidden; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; cursor:pointer; }
.container { max-width:1240px; width:calc(100% - 80px); margin:0 auto; }
.skip-link { position:absolute; left:12px; top:-70px; z-index:20; padding:10px 16px; background:var(--lime); color:var(--ink); transition:top .2s; }
.skip-link:focus { top:12px; }
.demo-bar { height:28px; display:flex; align-items:center; justify-content:center; gap:24px; background:var(--lime); color:var(--ink); font:500 10px var(--mono); letter-spacing:.06em; }
.demo-bar span { opacity:.58; }
.header { position:sticky; top:0; z-index:10; background:rgba(245,245,237,.92); border-bottom:1px solid rgba(23,63,53,.08); backdrop-filter:blur(12px); }
.nav-wrap { height:78px; display:flex; justify-content:space-between; align-items:center; }
.brand { display:flex; align-items:center; gap:11px; font-size:16px; font-weight:700; letter-spacing:.02em; line-height:1.15; }
.brand small { display:block; margin-top:3px; color:#83938c; font:500 8px var(--mono); letter-spacing:.07em; }
.brand-mark { display:flex; gap:3px; align-items:flex-start; width:26px; height:26px; }
.brand-mark i { display:block; width:7px; height:20px; background:var(--ink); transform:skewY(-30deg); transform-origin:bottom; }
.brand-mark i:nth-child(2){height:16px;margin-top:4px}.brand-mark i:nth-child(3){height:12px;margin-top:8px}
nav { display:flex; align-items:center; gap:34px; font-size:13px; font-weight:500; }
.nav-link { position:relative; padding:28px 0; color:#687a72; }
.nav-link:after { position:absolute; content:''; left:0; bottom:20px; width:0; height:2px; background:var(--ink); transition:width .2s; }
.nav-link:hover,.nav-link.active { color:var(--ink); }.nav-link.active:after { width:18px; }
.nav-contact { padding:12px 17px; border:1px solid var(--ink); font-size:12px; transition:.2s; }.nav-contact:hover { background:var(--ink); color:var(--lime); }.nav-contact span { padding-left:14px; font-size:16px; }
.menu-toggle { display:none; border:0; background:none; width:42px; height:42px; padding:10px; }.menu-toggle span { display:block; height:1px; background:var(--ink); margin:6px 0; transition:.2s; }
.hero { min-height:680px; display:grid; grid-template-columns:1fr 1.04fr; align-items:center; gap:78px; padding-top:68px; padding-bottom:70px; }
.eyebrow { color:#668179; font:500 10px var(--mono); letter-spacing:.12em; }.tiny-star { display:inline-block; margin-right:10px; color:#94aa9e; font-size:15px; }
h1,h2,h3,p { margin-top:0; }.hero h1 { max-width:650px; margin:18px 0 24px; font:500 clamp(42px,5.2vw,73px)/1.12 var(--serif); letter-spacing:-.055em; }.title-accent,.muted-green { color:#709786; font-style:italic; }.title-accent { position:relative; display:inline-block; }.title-accent svg { position:absolute; left:0; bottom:-12px; width:100%; height:17px; fill:none; stroke:#8ab8a6; stroke-width:2; }
.hero-description { color:#697a72; font-size:15px; line-height:1.9; }.hero-actions { display:flex; align-items:center; gap:27px; margin-top:34px; }.button { display:inline-flex; align-items:center; justify-content:center; gap:26px; min-height:48px; padding:0 18px; border:1px solid transparent; font-size:12px; font-weight:600; transition:transform .2s,background .2s; }.button:hover { transform:translateY(-2px); }.button-green { background:var(--ink); color:var(--lime); }.button-green:hover { background:#285f50; }.button-lime { background:var(--lime); color:var(--ink); min-width:180px; }.text-link { padding:8px 0; font-size:12px; font-weight:600; }.circle-arrow { display:inline-flex; justify-content:center; align-items:center; width:25px; height:25px; margin-left:9px; border:1px solid #aeb9ae; border-radius:50%; color:#71837a; }
.hero-foot { display:flex; align-items:center; gap:10px; margin-top:87px; color:#82918a; font:10px var(--mono); letter-spacing:.05em; }.status-dot { width:6px; height:6px; border-radius:50%; background:#90c09a; box-shadow:0 0 0 4px #e0ebdb; }.hero-foot-line { width:48px; height:1px; margin-left:16px; background:#bcc7be; }.micro { color:#8c9b94; font:9px var(--mono); letter-spacing:.13em; }
.hero-visual { position:relative; height:528px; }.hero-visual img { width:100%; height:100%; display:block; object-fit:cover; filter:saturate(.72) contrast(.98); }.hero-visual:after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(35,79,65,.2),transparent 50%); pointer-events:none; }.photo-index { position:absolute; top:19px; right:18px; z-index:1; color:#fff; font:9px var(--mono); letter-spacing:.08em; }.visual-caption { position:absolute; left:25px; bottom:27px; z-index:1; display:flex; align-items:flex-end; width:calc(100% - 50px); justify-content:space-between; color:white; font:20px/1.35 var(--serif); }.photo-arrow { font:29px var(--serif); }.floating-note { position:absolute; right:-48px; bottom:45px; z-index:2; display:flex; align-items:center; gap:13px; width:225px; padding:16px 18px; background:var(--lime); font-size:12px; line-height:1.35; box-shadow:0 12px 34px rgba(30,64,50,.17); }.floating-note small { display:block; margin-top:5px; color:#6b7d73; font:8px var(--mono); letter-spacing:.08em; }.note-star { font-size:24px; }
.capability-band { overflow:hidden; background:var(--ink); color:var(--lime); }.capability-band .container { height:82px; display:flex; align-items:center; gap:35px; white-space:nowrap; font:600 12px var(--mono); letter-spacing:.09em; }.capability-band b { color:#6f947f; font-size:15px; }.capability-band .band-en { color:#98aea2; margin-left:auto; font-weight:400; }
.section { padding-top:113px; padding-bottom:124px; }.section-label { display:flex; align-items:center; justify-content:space-between; padding-bottom:20px; border-bottom:1px solid var(--line); color:#76857d; font:10px var(--mono); letter-spacing:.1em; }.section-label span:last-child { color:#a2aaa1; }.about-layout { display:grid; grid-template-columns:1fr 1fr; gap:100px; padding-top:62px; }.about h2,.section-heading h2 { margin-bottom:27px; font:500 clamp(38px,4.2vw,57px)/1.15 var(--serif); letter-spacing:-.05em; }.about-symbol { display:flex; gap:5px; align-items:flex-start; margin-top:41px; }.about-symbol span { width:11px; height:34px; background:#a6c4ad; transform:skewY(-35deg); }.about-symbol span:nth-child(2){height:27px;margin-top:7px}.about-symbol span:nth-child(3){height:20px;margin-top:14px}.about-text { padding-top:5px; max-width:510px; color:#718079; font-size:14px; }.about-text .lead { color:var(--ink); font:20px/1.55 var(--serif); }.about-text p { margin-bottom:20px; }.value-pills { display:flex; gap:8px; margin-top:32px; }.value-pills span { padding:7px 12px; border:1px solid #cbd5cc; color:#71837a; font:10px var(--mono); }
.services-section { background:var(--paper-dark); }.section-heading { display:flex; justify-content:space-between; align-items:flex-end; padding-top:57px; padding-bottom:50px; }.section-heading p { margin-bottom:31px; color:#77867e; font-size:14px; line-height:1.85; }.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; }.service-card { min-height:380px; display:flex; flex-direction:column; padding:29px 30px 25px; background:var(--paper); border-top:3px solid var(--ink); transition:transform .2s,box-shadow .2s; }.service-card:hover { transform:translateY(-5px); box-shadow:0 15px 25px rgba(25,61,48,.08); }.card-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:43px; color:#98a59c; font:10px var(--mono); }.service-icon { width:46px; height:46px; display:grid; place-items:center; color:#6f9c83; }.service-icon svg { width:44px; height:44px; fill:none; stroke:currentColor; stroke-width:1.35; }.service-card .micro { margin-bottom:12px; }.service-card h3 { margin-bottom:15px; font:500 25px var(--serif); letter-spacing:-.03em; }.service-card p { color:#76847d; font-size:13px; line-height:1.85; }.service-tags { color:#8c9b93; font:9px var(--mono); line-height:1.7; }.service-tags span { color:#b4beb5; }.service-link { display:flex; justify-content:space-between; align-items:center; width:100%; margin-top:auto; padding:23px 0 0; border:0; border-top:1px solid #dce1d8; background:none; color:var(--ink); font-size:11px; font-weight:600; text-align:left; }.service-link span { font-size:19px; }
.work-heading { align-items:center; }.section-note { margin:0 !important; color:#9aa49e !important; font:10px var(--mono) !important; }.filters { display:flex; gap:18px; }.filter { padding:7px 0; border:0; border-bottom:1px solid transparent; background:none; color:#96a19b; font:11px var(--mono); }.filter.active,.filter:hover { color:var(--ink); border-bottom-color:var(--ink); }.work-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }.work-card { min-width:0; }.work-card[hidden] { display:none; }.project-art { position:relative; display:block; width:100%; height:378px; padding:0; overflow:hidden; border:0; background:#c9e0cb; text-align:left; }.project-art:hover .project-open { transform:rotate(45deg); }.project-demo { position:absolute; left:17px; top:15px; z-index:2; color:rgba(21,62,46,.62); font:9px var(--mono); letter-spacing:.06em; }.project-open { position:absolute; right:19px; top:13px; z-index:2; display:grid; place-items:center; width:30px; height:30px; border:1px solid rgba(21,62,46,.35); border-radius:50%; color:#1f5c48; font-size:18px; transition:.3s; }.brand-art { background:#bdceb3; }.mock-browser { position:absolute; left:9%; top:16%; width:82%; height:74%; padding:17px 25px; overflow:hidden; background:#efeede; color:#173f35; box-shadow:0 20px 40px rgba(30,66,48,.15); transform:rotate(-3deg); }.mock-top { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(23,63,53,.25); padding-bottom:13px; font:8px var(--mono); }.mock-top b { font:700 18px var(--serif); }.mock-top b span { color:#b4c8ab; }.mock-top i { font-style:normal; font-size:7px; }.mock-title { position:absolute; left:35px; top:95px; font:400 36px/.95 var(--serif); letter-spacing:-.08em; }.mock-title span { display:block; color:#7a9c84; font-style:italic; }.mock-orbit { position:absolute; right:15%; bottom:19%; width:100px; height:100px; border:1px solid #97b29a; border-radius:50%; }.mock-orbit:after { content:''; position:absolute; inset:16px -13px; border:1px solid #97b29a; border-radius:50%; transform:rotate(45deg); }.mock-footer { position:absolute; bottom:18px; left:25px; color:#8d9d91; font:7px var(--mono); }.mock-footer b { margin-left:12px; color:var(--ink); font-size:15px; }.digital-art { background:#303a35; }.dashboard { position:absolute; left:9%; top:12%; display:flex; width:82%; height:76%; overflow:hidden; background:#e8ece4; box-shadow:0 20px 40px rgba(0,0,0,.2); color:#2c4239; }.dash-side { display:flex; flex-direction:column; width:21%; padding:18px 9px; background:#183f35; color:#bdd5c1; }.dash-side b { margin:0 auto 30px; color:#e2f397; font:700 15px var(--serif); }.dash-side b span { color:#8bb0a0; }.dash-side i { width:100%; height:20px; margin:3px 0; border-radius:3px; opacity:.35; background:linear-gradient(90deg,#bed8c0 0 40%,transparent 40%); }.dash-side i.selected { opacity:1; background:#dff291; }.dash-side small { margin:18px 0 0 2px; font:6px var(--mono); opacity:.65; }.dash-main { flex:1; padding:19px 24px; }.dash-top { display:flex; justify-content:space-between; padding-bottom:14px; border-bottom:1px solid #cad6cb; font-size:9px; }.dash-top i { color:#8ba397; font-style:normal; }.dash-welcome { margin:21px 0 14px; font:22px var(--serif); letter-spacing:-.05em; }.dash-welcome small { display:block; margin-top:6px; color:#8a9a90; font:7px var(--mono); letter-spacing:.04em; }.dash-stats { display:flex; gap:6px; }.dash-stats span { flex:1; padding:9px 6px; background:#dbe4d8; color:#81938a; font-size:7px; }.dash-stats b { display:block; padding-top:4px; color:var(--ink); font:18px var(--serif); }.dash-chart { margin-top:18px; padding:12px; background:#f2f4ed; font-size:8px; }.dash-chart small { float:right; color:#8aa292; }.chart-bars { display:flex; align-items:flex-end; gap:6px; height:55px; margin-top:14px; }.chart-bars i { flex:1; background:#87ae94; }.chart-bars i:nth-child(1){height:25%}.chart-bars i:nth-child(2){height:42%}.chart-bars i:nth-child(3){height:32%}.chart-bars i:nth-child(4){height:56%}.chart-bars i:nth-child(5){height:48%}.chart-bars i:nth-child(6){height:72%}.chart-bars i:nth-child(7){height:57%}.chart-bars i:nth-child(8){height:85%}.chart-bars i:nth-child(9){height:67%}.chart-bars i:nth-child(10){height:92%;background:#d0e77c}.chart-bars i:nth-child(11){height:80%}.project-caption { display:flex; justify-content:space-between; align-items:flex-start; padding:20px 3px 0; }.project-caption h3 { margin:7px 0 0; font:500 22px var(--serif); letter-spacing:-.04em; }.project-caption > span { color:#84938a; font:10px var(--mono); }
.approach-section { background:var(--ink); color:var(--paper); }.approach-section .section-label { border-color:#3d6257; color:#abc0b3; }.approach-section .section-label span:last-child { color:#77948a; }.approach-section .section-heading h2 { color:var(--paper); }.approach-section .section-heading p { color:#adc0b7; }.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:25px; border-top:1px solid #3d6257; }.steps article { padding:28px 20px 0 0; border-right:1px solid #3d6257; }.steps article:last-child { border:0; }.steps article > span { color:#9ab8a4; font:10px var(--mono); }.steps h3 { margin:33px 0 13px; color:var(--lime); font:500 22px var(--serif); }.steps p { color:#b6c7be; font-size:12px; line-height:1.8; }
.contact-section { overflow:hidden; background:var(--lime); }.contact-inner { position:relative; min-height:460px; display:flex; align-items:center; padding-top:80px; padding-bottom:80px; }.contact-inner h2 { margin:18px 0 23px; color:var(--ink); font:500 clamp(40px,5vw,67px)/1.12 var(--serif); letter-spacing:-.06em; }.contact-inner p { color:#587165; font-size:14px; line-height:1.8; }.contact-note { display:block; margin-top:22px; color:#758a7c; font:9px var(--mono); }.contact-orbit { position:absolute; right:45px; top:50%; width:380px; height:380px; transform:translateY(-50%); border:1px solid rgba(23,63,53,.4); border-radius:50%; }.contact-orbit:before,.contact-orbit:after { content:''; position:absolute; inset:48px 0; border:1px solid rgba(23,63,53,.35); border-radius:50%; transform:rotate(48deg); }.contact-orbit:after { inset:0 48px; transform:rotate(-38deg); }.contact-orbit span { position:absolute; width:8px; height:8px; border-radius:50%; background:var(--ink); }.contact-orbit span:nth-child(1){left:56px;top:74px}.contact-orbit span:nth-child(2){right:27px;top:136px;background:#77a28b}.contact-orbit span:nth-child(3){left:100px;bottom:32px;background:#7c9d89}.contact-orbit b { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); text-align:center; color:var(--ink); font:500 25px/1.1 var(--serif); }.contact-orbit i { position:absolute; left:50%; bottom:13px; transform:translateX(-50%); color:#6a8174; font:9px var(--mono); font-style:normal; white-space:nowrap; }
.footer { background:var(--paper); }.footer-main { min-height:178px; display:flex; align-items:center; justify-content:space-between; }.footer-main > p { margin:0; color:#85938c; font:13px/1.8 var(--serif); }.footer-main > p span { color:#a1ada5; font-size:11px; }.back-top { color:#718279; font:10px var(--mono); }.footer-bottom { display:flex; justify-content:space-between; padding:18px 0 22px; border-top:1px solid var(--line); color:#a2aaa3; font:9px var(--mono); }
dialog { width:min(540px,calc(100% - 32px)); max-height:calc(100vh - 40px); padding:36px 38px 38px; border:0; background:var(--paper); color:var(--ink); box-shadow:0 24px 90px rgba(9,35,26,.3); }.project-dialog{}.dialog-close { position:absolute; right:17px; top:12px; border:0; background:none; color:#718279; font-size:27px; line-height:1; }.dialog-close:hover { color:var(--ink); }dialog::backdrop { background:rgba(13,39,30,.57); backdrop-filter:blur(3px); }dialog h2 { margin:16px 0 12px; font:500 40px/1.1 var(--serif); letter-spacing:-.05em; }dialog p { color:#76847d; font-size:13px; line-height:1.8; }.dialog-intro { max-width:420px; }.contact-dialog form { display:grid; gap:16px; margin-top:25px; }.contact-dialog label { display:grid; gap:6px; color:#6d7e75; font:10px var(--mono); letter-spacing:.02em; }.contact-dialog input,.contact-dialog textarea,.contact-dialog select { width:100%; padding:11px 12px; border:1px solid #cbd5cc; border-radius:0; outline:none; background:#fafaf3; color:var(--ink); font:13px var(--sans); }.contact-dialog textarea { resize:vertical; min-height:90px; }.contact-dialog input:focus,.contact-dialog textarea:focus,.contact-dialog select:focus { border-color:#6e9b82; box-shadow:0 0 0 2px rgba(110,155,130,.14); }.form-status { min-height:20px; margin:0 !important; color:#5a7e68 !important; font-size:11px !important; }.project-dialog ul { padding-left:18px; color:#667a70; font-size:13px; line-height:2; }
@media (max-width:900px){.container{width:calc(100% - 44px)}.hero{gap:45px}.floating-note{right:-20px}.nav-wrap{height:68px}nav{gap:19px}.hero-foot .micro{display:none}.about-layout{gap:45px}.contact-orbit{right:-60px;opacity:.8}}
@media (max-width:800px){.demo-bar{justify-content:flex-start;padding:0 18px;font-size:8px;gap:10px;white-space:nowrap;overflow:hidden}.demo-bar span{display:none}.container{width:calc(100% - 40px)}.menu-toggle{display:block;z-index:3}.header nav{position:absolute;left:0;right:0;top:68px;display:none;align-items:stretch;flex-direction:column;gap:0;padding:10px 20px 20px;background:rgba(245,245,237,.98);border-bottom:1px solid var(--line);box-shadow:0 12px 25px rgba(20,56,42,.08)}.header nav.is-open{display:flex}.nav-link{padding:13px 0}.nav-link:after{bottom:8px}.nav-contact{margin-top:6px;text-align:center}.hero{display:flex;flex-direction:column;align-items:stretch;gap:42px;min-height:auto;padding-top:62px;padding-bottom:66px}.hero h1{font-size:clamp(45px,13vw,70px)}.hero-description{font-size:14px}.hero-actions{margin-top:28px}.hero-foot{margin-top:50px}.hero-visual{height:430px}.floating-note{right:12px;bottom:-20px}.capability-band .container{height:68px;gap:22px;overflow:hidden}.capability-band .container span:nth-of-type(2),.capability-band .container span:nth-of-type(3),.capability-band .container b:nth-of-type(2),.capability-band .container b:nth-of-type(3){display:none}.capability-band .band-en{display:block!important;margin-left:0}.section{padding-top:78px;padding-bottom:80px}.about-layout{display:block;padding-top:43px}.about-text{margin-top:55px}.section-heading{display:block;padding-top:43px;padding-bottom:35px}.section-heading p{margin-top:23px}.service-grid,.work-grid{grid-template-columns:1fr;gap:14px}.service-card{min-height:350px}.project-art{height:320px}.work-heading .filters{margin-top:31px}.steps{grid-template-columns:1fr 1fr;gap:0}.steps article{min-height:200px;padding:25px 18px 0 0;margin-right:18px;border-right:1px solid #3d6257;border-bottom:1px solid #3d6257}.steps article:nth-child(2){border-right:0;margin-right:0}.steps article:nth-child(3),.steps article:nth-child(4){border-bottom:0}.contact-inner{min-height:680px;padding-top:70px;padding-bottom:70px;align-items:flex-start}.contact-orbit{top:auto;bottom:-30px;right:50%;width:310px;height:310px;transform:translateX(50%)}.footer-main{min-height:210px;display:grid;align-content:center;gap:28px}.footer-bottom{display:block;line-height:2}.footer-bottom span{display:block}.footer-bottom span+span{margin-top:5px}.contact-dialog{padding:30px 24px 28px}dialog h2{font-size:35px}.desktop-break{display:none}}
@media (max-width:420px){.hero-actions{align-items:flex-start;flex-direction:column;gap:17px}.hero-visual{height:370px}.visual-caption{font-size:17px}.mock-title{font-size:27px;top:70px}.mock-browser{padding:13px 15px}.dash-main{padding:14px 12px}.dash-welcome{font-size:17px}.dash-stats{gap:3px}.dash-stats span{font-size:6px}.project-caption{display:block}.project-caption>span{display:block;margin-top:8px}.footer-main{gap:20px}}